CODEWITHSUNDEEP
react-nativeexporeact-native-navigation
Egge
Egge

Reputation: 450

Structure for nested navigation with react-native-navigation

I am currently building my first app using react-native and i am struggeling with the right structure for nested navigation using react-native-navigation .

My app should be navigatable using a Tab-bar. On every screen of that Tab-bar I might need to have a Stack navigation available.

App.js:

<NavigatonContainer>
  <BottomTab.Navigator>
    <BottomTab.Screen name="Screen1" component={Screen1}/>
    <BottomTab.Screen name="Screen2" component={Screen2}/>
    <BottomTab.Screen name="Screen3" component={Screen3}/>
  <BottomTab.Navigator/>
<NavigationContainer/>

Now if i want to use a Stack navigation inside Screen1, what would be the best approach? My approach would be to move all content that should be display when the first Tab is active to a new screen called "Screen1Start" and then having following code on "Screen1".

Screen1.js:

<Stack.Navigator>
   <Stack.Screen name="Screen1Start" component={Screen1Start}/>
   <Stack.Screen name="Screen1Settings" component={Screen1Settings}/>
   <Stack.Screen name="Screen1Details" component={Screen1Details}/>
</Stack.Navigator>

Is that the right thing to do? Are there better approaches to this? Thanks for your help!

Upvotes: 1

Views: 941

Answers (1)

sorraimi.rivas
sorraimi.rivas

Reputation: 66

You can have a stack inside of a stack and then navigate to each individually with navigation.navigate('name'). In the react navigation docs you can read more about navigating inside nested navigators here.

Pretty quick example would be:

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Here you can see that Home is a stack of feed and messages and then you have individual screens for Profile and Settings. Like so you can have another stack instead of Profile or Settings binded by another navigator such as toptab or bottomtab.

The react navigation docs explain this very detailed and easy to understand. I would recommend you to read from start to finish so you have a deeper understanding of the navigation.

Upvotes: 1

Related Questions