Search code examples
reactjsreact-nativereact-navigationreact-navigation-stackreact-navigation-v5

What happens if the initialRouteName prop doesn't exist for a stack navigator component provided by the React Navigation library in React Native


const App = () => (
  <SafeAreaProvider>
    <NavigationContainer theme={MyTheme} linking={linking}>
      <Stack.Navigator
        initialRouteName="Root"
        screenOptions={{ gestureEnabled: false }}
      >
        <Stack.Screen
          name="NotRoot"
          component={NotRoot}
          options={verticalConfig}
        />
      </Stack.Navigator>
    </NavigationContainer>
  </SafeAreaProvider>
);

In this code snippet Root is a non existent Stack.Screen name that's not present in any file within the project's source. So, I was wondering if 'Root' is sort of like a default value?


Solution

  • Root is not a default value. When you specify an initialRouteName that doesn't exist, it does the same as when you don't specify the prop: it goes to the first Screen (route).

    You can see it in the code (GitHub), here is the relevant part:

    const initialRouteName =
      options.initialRouteName !== undefined &&
      routeNames.includes(options.initialRouteName)
        ? options.initialRouteName // if initialRouteName is defined and exists
        : routeNames[0]; // otherwise, go to the first one