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