In my React Native app I have a stack navigator called StackNavigator that contains two tab navigators TabNavigator1 and TabNavigator2. TabNavigator1 contains the screens TabNavigator1_Screen1 and TabNavigator1_Screen2, and TabNavigator1 contains TabNavigator2_Screen1, and TabNavigator2_Screen2.
From all four of those screens, the user needs to be able to navigate to various other screens, Screen1, Screen2, and Screen3.
I'm using react-navigation@4.x
What I Want To Know:
Where is the best place to put references to Screen1, Screen2, and Screen3? The only place I know I can add them is when defining StackNavigator. So I would do
createStackNavigator(
{
TabNavigator1,
TabNavigator2,
TabNavigator1_Screen1,
TabNavigator1_Screen2,
TabNavigator2_Screen1,
TabNavigator2_Screen2,
Screen1,
Screen2,
Screen3,
Screen4,
}
)
and then in TabNavigator1 and TabNavigator1 pass their navigation prop to the screens with
screenProps={{
navigation: this.props.navigation
}}
so that TabNavigator1_Screen1 can navigate to Screen1 with this.props.screenProps.navigation.navigate('Screen1').
Is there a way I can organize all those screen references so that I define specific screens that screens in TabNavigator1 can navigate to, and others that screens in TabNavigator1 can navigate to?