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,
}
}