CODEWITHSUNDEEP
javascriptreact-nativereact-navigationreact-navigation-stackreact-navigation-v5
askingstupidquestions
askingstupidquestions

Reputation: 189

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>
  )
};

Upvotes: 0

Views: 1471

Answers (1)

anthony willis mu&#241;oz
anthony willis mu&#241;oz

Reputation: 2478

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>
  )
};

Upvotes: 1

Related Questions