React Native Navigation: best way to organize component references in tab navigators nested in a stack navigator?

Viewed 242

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?

0 Answers
Related