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

Question

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?

score 1 · Accepted Answer · answered Aug 01 '20 at 12:02

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

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

1 Answers1