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:

• ProfileScreen (screen with 2 items => User settings | Application settings)
  • UserSettings:
    • Language (Navigation to LanguageScreen)
    • Change password (Navigation to ChangePasswordScreen)
    • Personal data (Navigation to PersonalDataScreen)
  • ApplicationSettings: ...

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:

• React Navigation: v6 (it was also happenning in v5)
• React Native: v0.69.5
• Expo: v46.0.9

CodePudding user response：

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.