Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: forward ref for flatlist and scrollview #99

Closed
wants to merge 48 commits into from

Conversation

andreialecu
Copy link
Collaborator

@andreialecu andreialecu commented Feb 6, 2021

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)

andreialecu and others added 30 commits February 3, 2021 16:00
…ative-collapsible-tab-view into refactor-apicleanup3
@andreialecu andreialecu added the preview Trigger expo preview action label Feb 6, 2021
@github-actions
Copy link

github-actions bot commented Feb 6, 2021

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
Copy link
Collaborator Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
preview Trigger expo preview action
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants