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

How to set the same screen options for all screens within a navigation container for React Navigation?


I am trying to set a default options parameter for each screen within my navigation container. I currently am re-using the same options configurations and manually setting it for each screen. It seems a bit redundant however. Is there a cleaner way in React Navigation to make a default, re-usable options parameter (that can be overwritten when desired) for all screens within a specific navigation container?

My current code below:

const CafeStack = createStackNavigator();

const CafeteriasScreen = () => {
  return (
    <CafeStack.Navigator>
      <CafeStack.Screen
        name='Home'
        component={CafeteriasFeed}
        options={({ route }) => ({
          headerLeft: null,
        })}
      />
      <CafeStack.Screen
        name='Crossroads'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Cafe 3'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='International House'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Clark Kerr'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Foothill'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
      <CafeStack.Screen
        name='Pat Browns'
        component={DiningHallScreen}
        options={({ route }) => ({
          headerBackTitleVisible: false,
        })}
      />
    </CafeStack.Navigator>
  )
};


Solution

  • You got screenOptions prop for Navigator that affect all screens. For more props read the docs https://reactnavigation.org/docs/stack-navigator.

    const CafeStack = createStackNavigator();
    
    const CafeteriasScreen = () => {
      return (
        <CafeStack.Navigator screenOptions={{
            headerBackTitleVisible: false,
          }}>
          <CafeStack.Screen
            name='Home'
            component={CafeteriasFeed}
            options={({ route }) => ({
              headerLeft: null,
            })}
          />
          <CafeStack.Screen
            name='Crossroads'
            component={DiningHallScreen}
          />
          <CafeStack.Screen
            name='Cafe 3'
            component={DiningHallScreen}
          />
          <CafeStack.Screen
            name='International House'
            component={DiningHallScreen}
          />
          <CafeStack.Screen
            name='Clark Kerr'
            component={DiningHallScreen}
          />
          <CafeStack.Screen
            name='Foothill'
            component={DiningHallScreen}
          />
          <CafeStack.Screen
            name='Pat Browns'
            component={DiningHallScreen}
          />
        </CafeStack.Navigator>
      )
    };