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.

use https://reactnavigation.org/docs/use-scroll-to-top – satya164 Jun 30 '20 at 16:59 — satya164, Jun 30 '20 at 16:59

score 2 · Accepted Answer · answered Jun 30 '20 at 08:47

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!

score 0 · Answer 2 · answered May 23 '22 at 12:16

None of the solutions worked for me on the web, not using listener and not using useScrollToTop which is provided by react-navigation. Because I have nested stacks and navigators and also custom tabbar.

I solved the problem by setting a navigation param for scrolling to the top.

I have custom tabbar, and I needed to scroll to top on the homepage which was the first route of the tab stack.

So, in the homepage I set the scrollToTop parameter for the navigator:

const homelistRef = React.useRef<FlatList | null>(null)

useFocusEffect(
    useCallback(() => {
      navigation.setParams({
        scrollToTop: () => homelistRef.current?.scrollToOffset({ offset: 0, animated: true }),
      });
    }, [navigation, homelistRef]),
  );


return (

<FlatList
    ref={homelistRef}
    ...{other Flatlist configs}
    />

)

And in my Tabbar component, I read this new param and execute it in the onPress function of the tabs:

interface IProps extends BottomTabBarProps {}

const TabBar: React.FC<IProps> = ({ state, navigation }) => {

const handleTabPress = useCallback(
    (route) => async () => {
      const currentRoute = state.routes?.[state.index];

      if (
        route === currentRoute?.name &&
        state.routes?.[0].state?.routes?.[0]?.params?.scrollToTop
      ) {
        state.routes[0].state.routes[0].params.scrollToTop();
      }
    },
    [navigation, state],
  );

   return (
      {render tab component}
   )
}

And that's the ultimate solution for executing some action on active tabs.

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

2 Answers2