Comments (4)
Hi @jojojojo1322, converting typescrit to js is simple:
import * as React from 'react';
import { StyleSheet, View, Text, Animated } from 'react-native';
import {
CollapsibleTabView,
useCollapsibleScene,
} from 'react-native-collapsible-tab-view';
import { SceneMap } from 'react-native-tab-view';
type Route = {
key: string;
title: string;
};
- const SomeRoute: React.FC<{ routeKey: string; color: string }> = ({
+ const SomeRoute = ({
routeKey,
color,
}) => {
const scrollPropsAndRef = useCollapsibleScene(routeKey);
return (
<Animated.ScrollView
style={{ backgroundColor: color }}
{...scrollPropsAndRef}
>
<View style={styles.content} />
</Animated.ScrollView>
);
};
const FirstScene = () => <SomeRoute routeKey="first" color="white" />;
const SecondScene = () => <SomeRoute routeKey="second" color="black" />;
const HEADER_HEIGHT = 250;
const renderHeader = () => (
<View style={styles.header}>
<Text style={styles.headerText}>COLLAPSIBLE</Text>
</View>
);
const renderScene = SceneMap({
first: FirstScene,
second: SecondScene,
});
const App: React.FC<object> = () => {
const [index, setIndex] = React.useState(0);
- const [routes] = React.useState<Route[]>([
+ const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
- const handleIndexChange = (index: number) => {
+ const handleIndexChange = (index) => {
setIndex(index);
};
return (
- <CollapsibleTabView<Route>
+ <CollapsibleTabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={handleIndexChange}
renderHeader={renderHeader} // optional
headerHeight={HEADER_HEIGHT} // optional, will be computed.
/>
);
};
export default App;
const styles = StyleSheet.create({
header: {
height: HEADER_HEIGHT,
backgroundColor: '#2196f3',
justifyContent: 'center',
alignItems: 'center',
elevation: 4,
},
headerText: {
color: 'white',
fontSize: 24,
},
content: {
height: 1500,
},
});
from react-native-collapsible-tab-view.
I'm alive. Thanbkkkkkkkkkkkk
I Love YOu~~~~~
from react-native-collapsible-tab-view.
^_^
from react-native-collapsible-tab-view.
👍 👍 👍 👍
Good luck with your code, here is a nice typescript resource: https://github.com/typescript-cheatsheets/react
from react-native-collapsible-tab-view.
Related Issues (20)
- Scroll on tab item
- Is TabBar can scroll horization? HOT 1
- Center the Indicator for the TabItem HOT 1
- How to modify the width of the indicator
- Getting current scroll position with useCurrentTabScrollY using FlashList
- Bug using FlashList in combination with lazy HOT 1
- App get stuck when switching and scrolling 2-3 time between the Tabs only in android HOT 1
- Invalid onScroll event for Tabs.ScrollView
- Does this work on React Native Web? HOT 1
- Programmatically show header when `revealHeaderOnScroll={true}`
- Make AnimatedPagerView style customizable
- Is there a way to prevent scroll being lost when scrolling through dynamic tabs in collapsed state?
- Is it possible to reveal header on tab change? HOT 1
- Turbo repo - pnpm installation - getting `TypeError: deepEqual is not a function (it is Object)` HOT 3
- Great component! HOT 1
- ExampleComponentSharedPullToRefresh ios bug
- How to make the title slide without having to collapse into a page
- Collapsed header
- How to programatically switch tabs? HOT 2
- Header is reseting when switching to 5th tab from 1st tab HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-collapsible-tab-view.