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.