We are migrating an app in React Navigation 4 to React Navigation 5. The project has a BottomTabNavigator which has for one of its routes a nested TopTabNavigator with three tabs. One of the tabs in the BottomTabNavigator when pressed navigates to a Sorting Screen where you select the sort parameter to sort by and then navigates to the "Pending" route adding the selected sort parameter, which should reach one of the three List screens inside the TopTabNavigator. Currently I'm recieving inside those screens the route.params as null which I asume is cause theres another navigator in the middle (topTabNavigator).
BottomTabNavigator
<BottomTabsNavigator.Navigator
tabBar={props => <CustomTabBar {...props} />}
initialRouteName="Pending"
>
<BottomTabsNavigator.Screen name="Pending" component={createTopTabsNavigator} />
<BottomTabsNavigator.Screen name="Sort" component={SortScreen} />
<BottomTabsNavigator.Screen name="Tab 3" component={Fragment} />
<BottomTabsNavigator.Screen name="Tab 4" component={Fragment} />
<BottomTabsNavigator.Screen name="Tab 5" component={Fragment} />
<BottomTabsNavigator.Screen name="Filter" component={Fragment} />
</BottomTabsNavigator.Navigator>
SortScreen tab:
handleOnPress(item: { text: string; value: string; }): void {
const {navigation} = this.props;
const param = {orderBy: item.value};
navigation.navigate('Pending', param);
}
render(){
return(
<View>
<FlatList
data={orderOptions}
renderItem={({ item }) => (
<ListItem style={{ borderBottomWidth: 0 }} onPress={() => this.handleOnPress(item)}>
<Body>
<Text>{item.text}</Text>
</Body>
</ListItem>
)}
keyExtractor={item => item.text}
/>
</View>
);
}
createTopTabsNavigator:
<TopTabsNavigator.Navigator>
<TopTabsNavigator.Screen name="List1" component={Screen1} />
<TopTabsNavigator.Screen name="List2" component={Screen2} />
<TopTabsNavigator.Screen name="List3" component={Screen3} />
</TopTabsNavigator.Navigator>
A hand with this issue is greatly appreciated