CODEWITHSUNDEEP
react-nativeexporeact-navigation
Esteban Chornet
Esteban Chornet

Reputation: 1227

React Navigation how to setup children routes

I have a React Native Expo application using React Navigation. I think I have all the navigation routes (links) not well setted up.

So in my app let's say I have a Profile screen which has 2 list items to navigate. Application settings & User settings. These two have some more items inside each one.

My navigation tree would be something like:

enter image description here

My LinkingConfiguration is configured like:

profileStack = {
    initialRouteName: "profile",
    screens: {
        profile: "profile",
        userSettings: "profile/userSettings",
        language: "profile/userSettings/language",
        changePassword: "profile/userSettings/password",
        personalData: "profile/userSettings/personalData",
        applicationSettings: "profile/applicationSettings"
    }
}

profileStack is a navigation stack. The rest are screens.

I'm wondering how I need to setup well the tree, because if I deep link to myApp.com/profile/userSettings/language, if I go back, I go directly to the initialRouteName which is profile, and I guess this is because the tree is not well generated.

In angular router would be setted as

profile: path: "...", children: [ userSettings: path: "...", children: [ {...}]]

How does navigation tree have to be setted up correctly in my example? Maybe using many navigation stacks?

Can anybody enlight me?

FYI:

Upvotes: 1

Views: 1565

Answers (1)

suark_krab
suark_krab

Reputation: 182

React Navigation allows you to set up the same hierarchy you showed in your example. You want to nest the navigators just as in your depiction.

https://reactnavigation.org/docs/nesting-navigators

Something like:

function Profile() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="UserSettings" component={UserSettings} />
      <Stack.Screen name="ApplicationSettings" component={ApplicationSettings} />
    </Stack.Navigator>
  );
}

function UserSettings() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Language" component={Language} />
      <Stack.Screen name="ChangePassword" component={ChangePassword} />
      <Stack.Screen name="PersonalData" component={PersonalData} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Profile />
    </NavigationContainer>
  );
}

The structure of navigation is created by how you nest components.

Upvotes: 1

Related Questions