React Navigation: Scroll to top if tab is the same as active tab

Question

I have a tab-based app. If I'm currently on the first tab, scrolled all the way down, and I click the tab again, I want it to scroll to the top. Is this possible?

I know I should have a scroll view with a reference and then use this._scrollView.scrollTo(0), but how can I detect when the user taps the tabbar and decide whether it is the same tab?

Answer 1

You can create your tab navigator as follow:

const TabNav = TabNavigator({
   // config
},
{
   navigationOptions: ({ navigation }) => ({
        tabBarOnPress: (scene, jumpToIndex) => {
            // Called when tab is press
        },
    }),
});

In order to scroll to top, you can check this solution:

1. https://github.com/react-navigation/react-navigation/issues/2955#issuecomment-343422076
2. https://snack.expo.io/HJp9mEQkG

Answer 2

tabBarOnPress in navigationOptions. Callback to handle tap events; the argument is an object containing:

the previousScene: { route, index }: the scene which we are leaving. the scene: { route, index } that was tapped. the jumpToIndex method that can perform the navigation for you.

so in your case just use scene object to check which tab is pressed.

check more on react navigation documentation.