TransWikia.com

Header title issues with React Navigation 5

Stack Overflow Asked by Dhaval Chheda on December 20, 2021

I have a couple of things which I am not able to accomplish with React Navigation

  • Header Title for tabs not showing correctly ( Right now all 3 tabs show the same title which is "Account" )
  • Hiding Header for some screens ( for e.g :- for Account Screen I do not want any header )

I have nested navigator setup and the code is as follows :-

ProjectNavigator.tsx

    const BottomTabNavigator = createBottomTabNavigator();
    
    export const BottomNavigator = () => {
      return (
        <BottomTabNavigator.Navigator>
          <BottomTabNavigator.Screen
            name="Explore"
            component={HomeScreen}
            options={{ title: "Home" }}
          />
          <BottomTabNavigator.Screen
            name="MySpaces"
            component={MySpacesScreen}
            options={{ title: "My Spaces" }}
          />
          <BottomTabNavigator.Screen
            name="Account"
            component={AccountScreen}
            options={{ title: "Account" }}
          />
        </BottomTabNavigator.Navigator>
      );
    };

    function getHeaderTitle(route: any) {
      // If the focused route is not found, we need to assume it's the initial screen
      // This can happen during if there hasn't been any navigation inside the screen
      // In our case, it's "Feed" as that's the first screen inside the navigator
      const routeName = getFocusedRouteNameFromRoute(route) ?? "XYZ";
      console.log("routeName", routeName);
      switch (routeName) {
        case "Home":
          return "Home";
        case "MySpaces":
          return "My Spaces";
        case "Account":
          return "My account";
      }
    }
    
    const AccountStackNavigator = createStackNavigator();

export const AccountNavigator = () => {
  return (
    <AccountStackNavigator.Navigator>
      <AccountStackNavigator.Screen
        name="Account"
        component={AccountScreen}
        options={{ title: "My Account" }}
      />
      <AccountStackNavigator.Screen
        name="MyProfile"
        component={MyProfileScreen}
        options={{ title: "My Profile" }}
      />
      <AccountStackNavigator.Screen
        name="RecentSearches"
        component={RecentSearchesScreen}
        options={{ title: "Recent Searches" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinHistory"
        component={CheckinHistoryScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinMonthlyList"
        component={CheckinMonthlyListScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseHistory"
        component={PurchaseHistoryScreen}
        options={{ title: "Purchase History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseDetails"
        component={PurchaseDetailsScreen}
        options={{ title: "Purchase Details" }}
      />
      <AccountStackNavigator.Screen
        name="Support"
        component={SupportScreen}
        options={{ title: "Support" }}
      />
      <AccountStackNavigator.Screen
        name="Faq"
        component={FaqScreen}
        options={{ title: "FAQ" }}
      />
      <AccountStackNavigator.Screen
        name="CouponCodes"
        component={CouponCodesScreen}
        options={{ title: "Coupon Codes" }}
      />
    </AccountStackNavigator.Navigator>
  );
};
    
    const FinalStackNavigator = createStackNavigator();

export const FinalNavigator = () => {
  const authContext = useContext(AuthContext);
  return (
    <FinalStackNavigator.Navigator>
      {authContext.isLoggedIn ? (
        <FinalStackNavigator.Screen
          name="Account"
          component={BottomNavigator}
        />
      ) : (
        <FinalStackNavigator.Screen name="Auth" component={AuthNavigator} />
      )}
    </FinalStackNavigator.Navigator>
  );
};

AppNavigator.tsx

    export const AppNavigator = (props: any) => {
      return (
        <NavigationContainer>
          <FinalNavigator />
        </NavigationContainer>
      );
    };

If you need any additional code do lemme know

Any help on this will be appreciated.

3 Answers

Thanks Atul for giving the hint and I used a combination of headerMode and headerShown and this is my navigation code if anybody ever comes across this issue

// ----------- Auth Stack Navigator ----------------
const AuthStackNavigator = createStackNavigator();
const AuthNavigator = () => {
  return (
    <AuthStackNavigator.Navigator headerMode="screen">
      <AuthStackNavigator.Screen
        name="Auth"
        component={AuthScreen}
        options={{ title: "Getting Started", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="AuthPhone"
        component={AuthPhoneScreen}
        options={{ title: "Add Phone Number", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ResetPassword"
        component={ResetPasswordScreen}
        options={{ title: "Password Reset", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ChangePassword"
        component={ChangePasswordScreen}
        options={{ title: "Enter new password", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="ForgotPassword"
        component={ForgotPasswordScreen}
        options={{ title: "Forgot password", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="Login"
        component={LoginScreen}
        options={{ title: "Login", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="Register"
        component={RegisterScreen}
        options={{ title: "Sign up to continue", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="VerificationMailSent"
        component={VerificationMailSentScreen}
        options={{
          title: "Verification mail sent",
          headerTitleAlign: "center",
        }}
      />
      <AuthStackNavigator.Screen
        name="VerifyMail"
        component={VerifyMailScreen}
        options={{ title: "Verifying your email", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="TermsAndConditions"
        component={TermsAndConditionsScreen}
        options={{ title: "Terms and Conditions", headerTitleAlign: "center" }}
      />
      <AuthStackNavigator.Screen
        name="PrivacyPolicy"
        component={PrivacyPolicyScreen}
        options={{ title: "Privacy Policy", headerTitleAlign: "center" }}
      />
    </AuthStackNavigator.Navigator>
  );
};

// ----------- Home Stack Navigator ----------------
const HomeStackNavigator = createStackNavigator();
const HomeNavigator = () => {
  return (
    <HomeStackNavigator.Navigator headerMode="screen">
      <HomeStackNavigator.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerShown: false }}
      />
    </HomeStackNavigator.Navigator>
  );
};

// ----------- My Spaces Stack Navigator ----------------
const MySpacesStackNavigator = createStackNavigator();
const MySpacesNavigator = () => {
  return (
    <MySpacesStackNavigator.Navigator headerMode="screen">
      <MySpacesStackNavigator.Screen
        name="MySpaces"
        component={MySpacesScreen}
        options={{ title: "My Spaces" }}
      />
    </MySpacesStackNavigator.Navigator>
  );
};

// ----------- Account Stack Navigator ----------------
const AccountStackNavigator = createStackNavigator();
const AccountNavigator = () => {
  return (
    <AccountStackNavigator.Navigator headerMode="screen">
      <AccountStackNavigator.Screen
        name="Account"
        component={AccountScreen}
        options={{ title: "My Account" }}
      />
      <AccountStackNavigator.Screen
        name="MyProfile"
        component={MyProfileScreen}
        options={{ title: "My Profile" }}
      />
      <AccountStackNavigator.Screen
        name="RecentSearches"
        component={RecentSearchesScreen}
        options={{ title: "Recent Searches" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinHistory"
        component={CheckinHistoryScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="CheckinMonthlyList"
        component={CheckinMonthlyListScreen}
        options={{ title: "Checkin History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseHistory"
        component={PurchaseHistoryScreen}
        options={{ title: "Purchase History" }}
      />
      <AccountStackNavigator.Screen
        name="PurchaseDetails"
        component={PurchaseDetailsScreen}
        options={{ title: "Purchase Details" }}
      />
      <AccountStackNavigator.Screen
        name="Support"
        component={SupportScreen}
        options={{ title: "Support" }}
      />
      <AccountStackNavigator.Screen
        name="Faq"
        component={FaqScreen}
        options={{ title: "FAQ" }}
      />
      <AccountStackNavigator.Screen
        name="CouponCodes"
        component={CouponCodesScreen}
        options={{ title: "Coupon Codes" }}
      />
    </AccountStackNavigator.Navigator>
  );
};

// ----------- Bottom Tabs Navigator ----------------
const BottomTabNavigator = createBottomTabNavigator();
const BottomNavigator = () => {
  return (
    <BottomTabNavigator.Navigator>
      <BottomTabNavigator.Screen name="Home" component={HomeNavigator} />
      <BottomTabNavigator.Screen
        name="MySpaces"
        component={MySpacesNavigator}
      />
      <BottomTabNavigator.Screen name="Account" component={AccountNavigator} />
    </BottomTabNavigator.Navigator>
  );
};

// ----------- Final Stack Navigator ----------------
const FinalStackNavigator = createStackNavigator();
export const FinalNavigator = () => {
  const authContext = useContext(AuthContext);
  return (
    <FinalStackNavigator.Navigator>
      {authContext.isLoggedIn ? (
        <FinalStackNavigator.Screen
          name="Account"
          component={BottomNavigator}
          options={{ headerShown: false }}
        />
      ) : (
        <FinalStackNavigator.Screen name="Auth" component={AuthNavigator} />
      )}
    </FinalStackNavigator.Navigator>
  );
};

The AppNavigator.tsx code is unchanged but pasting here for reference

AppNavigator.tsx

    export const AppNavigator = (props: any) => {
      return (
        <NavigationContainer>
          <FinalNavigator />
        </NavigationContainer>
      );
    };

Answered by Dhaval Chheda on December 20, 2021

You can add headerMode="none" in

 <FinalStackNavigator.Navigator
headerMode="none">

and

  <AccountStackNavigator.Navigator
        headerMode="none">

to hide all the headers. and then can add a custom header on that particular page

Answered by Atul Raj on December 20, 2021

You have to do it in Stack Navigator. Options = {{headerShown:false}}

Answered by r g on December 20, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP