Closed andreialecu closed 3 years ago
This builds on top of #93 to forward refs directly via the <Tabs.FlatList /> and ScrollView components.
<Tabs.FlatList />
ScrollView
Draft for now.
Small demo:
const Example: React.FC = () => { const ref = React.useRef<ScrollView>(null) const ref2 = React.useRef<FlatList>(null) React.useEffect(() => { setTimeout(() => { ref.current?.scrollToEnd() ref2.current?.scrollToEnd() }, 1000) }, [ref]) const renderItem: ListRenderItem<number> = React.useCallback(({ index }) => { return ( <View style={[styles.box, index % 2 === 0 ? styles.boxB : styles.boxA]} /> ) }, []) return ( <Tabs.Container HeaderComponent={Header} headerHeight={HEADER_HEIGHT} // optional > <Tabs.Tab name="A"> <Tabs.FlatList ref={ref2} data={[0, 1, 2, 3, 4]} renderItem={renderItem} keyExtractor={(v) => v + ''} /> </Tabs.Tab> <Tabs.Tab name="B"> <Tabs.ScrollView ref={ref}> <View style={[styles.box, styles.boxA]} /> <View style={[styles.box, styles.boxB]} /> </Tabs.ScrollView> </Tabs.Tab> </Tabs.Container> ) }
Relevant commit: f9b546a (#99)
f9b546a
The Expo app for the example from this branch is ready!
expo.io/@pedrobern/react-native-collapsible-tab-view-demos?release-channel=pr-99
Closing as it has been incorporated in #93 as per 749cfbe (#93)
749cfbe
This builds on top of #93 to forward refs directly via the
<Tabs.FlatList />
andScrollView
components.Draft for now.
Small demo:
Relevant commit:
f9b546a
(#99)