My app is set up nearly identical to this code snippet in the docs: https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state:
const FeedStack = createStackNavigator();
function FeedStackScreen() {
return (
<FeedStack.Navigator>
<FeedStack.Screen name="Feed" component={FeedScreen} />
{/* other screens */}
</FeedStack.Navigator>
);
}
const ProfileStack = createStackNavigator();
function ProfileStackScreen() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={ProfileScreen} />
{/* other screens */}
</ProfileStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={FeedStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>
);
}
const RootStack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<RootStack.Navigator>
<RootStack.Screen name="Home" component={HomeTabs} />
<RootStack.Screen name="Settings" component={SettingsScreen} />
</RootStack.Navigator>
</NavigationContainer>
);
}
The difference is that my versions of FeedStackScreen
and ProfileStackScreen
have about 4 or 5 screens in them that each have their own options
prop that's setting the values of headerLeft
, headerRight
and/or headerTitle
.
The docs say that a parent navigator can only see the settings in its immediate child. So RootStack
can read screen options for HomeTabs
, but not for FeedStackScreen
and ProfileStackScreen
.
I've tried using this code on my version of HomeTabs
,
React.useLayoutEffect(() => {
navigation.setOptions({ headerTitle: getHeaderTitle(route) });
}, [navigation, route])
but the route
prop only gives me the name of the Tab.Screen
...and at minimum I need the name of the Stack.Screen
that's inside of that tab.
Any suggestions on how to get the headerLeft
, headerRight
and headerTitle
options that are set inside FeedStackScreen
to be recognizable by RootStack
?
- Ejected expo app
- react-navigation 5
- xcode 12
- "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz"