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
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.
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP