React-native-tab-view: How to implement scroll to top function in "onTabPress"

[jasonkw9]

Current behaviour

Currently my renderScene is rendering a custom component which using FlatList. I have done some research on FlatList's scrollToIndex, and they all using something called refs. My question is how do I pass the refs from the FlatList in the custom component back to the parent component?

Expected behaviour

When active tab is "Tab one", and I tab on "Tab one" again, it should scroll to top.

Code sample

https://snack.expo.io/@jasonkw-abc/bd48f8

Screenshots (if applicable)

What have you tried

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | android
| react-native | 0.61.2
| react-native-tab-view | 2.10.0
| react-native-gesture-handler | 1.5.0
| react-native-reanimated | 1.3.2
| node | 10.15
| npm or yarn | 6.4.1

[satya164]

My question is how do I pass the refs from the FlatList in the custom component back to the parent component

You don't pass ref from child to parent, you use React.createRef to to create ref objects in parent, pass them down to your components and use them.

Please post questions on stack overflow.

[jasonkw9]

@satya164 Thank you so much!

[RogerParis]

@jasonkw9 do you have a working solution you can show?