React Navigation upgrade v4 to v6 - navigationOptions and listener

155 Views Asked by At

Previously with React Navigation v4, I have use route.params.scrollToTop() to pass the function I want to call when tabBarOnPress. The function content is not related to scrollToTop. After upgrading to React Navigation v6, I have changed the code. However, with all the changes, the scrollToTop function only called once. Once I switch to another Tab and go back to ScreenB, the componentDidMount do not trigger again. I would like to call the function every time I tap the tab just like how it respond in v4, no matter which screen I'm switching from.

v4

const RouteConfigs = {
    ScreenA:{
        screen: ComponentA,
    },
    ScreenB:{
        screen: ComponentB,
        navigationOptions: {
            tabBarOnPress: (event) => {
                const { navigation } = event;
                event.defaultHandler();
                if (navigation.isFocused() && navigation.state.params && navigation.state.params.scrollToTop) {
                  navigation.state.params.scrollToTop();
                }
             },
        }
    }
}

const Tabs = createBottomTabNavigator(RouteConfigs, TabNavigatorConfig)
Tabs.navigationOptions = ({navigation}) => {
  const {routeName} = navigation.state.routes[navigation.state.index]
  return{
      header: null,
  }
}

v6 Navigation

const Tab = createBottomTabNavigator();
<Tab.Navigator>
    <Tab.Screen
      name="ScreenA"
      component={ComponentA}
    >
    <Tab.Screen
      name="ScreenB"
      component={ComponentB}
      listeners={({ navigation, route, params}) => ({
          tabPress: (e) => {
          if (navigation.isFocused() && route.params && route.params.scrollToTop) {
              route.params.scrollToTop();
          }
        },
      })}       
    >
</Tab.Navigator>

I did not change anything in ComponentB

...
 componentDidMount(){
    this.props.navigation.setParams({
        scrollToTop: this.scrollToTop,
    });
 }
 scrollToTop = ()=>{
    console.log("Press")
    this.setState(()=> ({...}))
 }
...

I am not sure is it because I did not add the part. However I have no idea how to add it under v6.

Tabs.navigationOptions = ({navigation}) => {
  const {routeName} = navigation.state.routes[navigation.state.index]
  return{
      header: null,
  }
}
0

There are 0 best solutions below