I'm trying to implement a simple navigation but for some reason back button it's not showing up.

My Main Component

    <NavigationContainer>
      <Stack.Navigator>
        {userToken ? (
          <Stack.Screen name={routesName.App} ponent={TabNavigator} />
        ) : (
          <Stack.Screen name={routesName.Auth} ponent={AuthStack} />
        )}
      </Stack.Navigator>
    </NavigationContainer>

Tab Navigation

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name={routesName.Home} ponent={HomeStack} />
      <Tab.Screen name={routesName.Settings} ponent={SettingsStack} />
    </Tab.Navigator>
  );
};

const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName={routesName.Home}>
      <Stack.Screen name={routesName.Home} ponent={HomeScreen} />
      <Stack.Screen name={routesName.Details} ponent={DetailsScreen} />
    </Stack.Navigator>
  );
};

const SettingsStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={routesName.Settings} ponent={SettingsScreen} />
      <Stack.Screen name={routesName.Profile} ponent={ProfileScreen} />
    </Stack.Navigator>
  );
};

No matter what screen i go, app headers always shows "App" as title.

I'm trying to implement a simple navigation but for some reason back button it's not showing up.

My Main Component

    <NavigationContainer>
      <Stack.Navigator>
        {userToken ? (
          <Stack.Screen name={routesName.App} ponent={TabNavigator} />
        ) : (
          <Stack.Screen name={routesName.Auth} ponent={AuthStack} />
        )}
      </Stack.Navigator>
    </NavigationContainer>

Tab Navigation

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name={routesName.Home} ponent={HomeStack} />
      <Tab.Screen name={routesName.Settings} ponent={SettingsStack} />
    </Tab.Navigator>
  );
};

const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName={routesName.Home}>
      <Stack.Screen name={routesName.Home} ponent={HomeScreen} />
      <Stack.Screen name={routesName.Details} ponent={DetailsScreen} />
    </Stack.Navigator>
  );
};

const SettingsStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={routesName.Settings} ponent={SettingsScreen} />
      <Stack.Screen name={routesName.Profile} ponent={ProfileScreen} />
    </Stack.Navigator>
  );
};

No matter what screen i go, app headers always shows "App" as title.

• javascript
• react-native
• react-navigation

1 Answer 1

I believe it's because your root stack is always on App regardless of your nested ones. try this in your root stack:

<Stack.Navigator screenOptions={{ headerShown: false }}>

More info here: https://reactnavigation/docs/stack-navigator/#headershown