PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
875 stars 171 forks source link

feat: forward ref for flatlist and scrollview #99

Closed andreialecu closed 3 years ago

andreialecu commented 3 years ago

This builds on top of #93 to forward refs directly via the <Tabs.FlatList /> and ScrollView components.

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)

github-actions[bot] commented 3 years ago

The Expo app for the example from this branch is ready!

expo.io/@pedrobern/react-native-collapsible-tab-view-demos?release-channel=pr-99

andreialecu commented 3 years ago

Closing as it has been incorporated in #93 as per 749cfbe (#93)