How do we implement Scroll to top functionality on tapping of the corresponding tab button on a bottom tab navigator in react navigation?

Question

The React Navigation version I am using is v5. In the ScrollView corresponding to a Bottom Tab Icon, if the user is already on that given screen, I want to enable functionality where the user scrolls to the top when this icon is pressed.

Answer 1

As stated in the documentation, this feature should be already implemented. But I think you have placed your ScrollView inside a nested StackNavigator, right?

In that case, you probably need to subscribe to TabNavigator event and fire your scrollToTop manually

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', e => {
    // Get your scrollView ref and dispatch scrollToTop
  });

  return unsubscribe;
}, [navigation]);

Hope it'll help you!