2

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"
alishaevn
  • 73
  • 7

0 Answers0