Hide Tab Bar from Stack Navigator Without tabBarVisible option - javascript

I found some answers with old versions of navigation, with "tabBarVisible" option in Tab Navigator.
But since there is no more this option I want to know how to hide Tab Bar in specific screens INSIDE Stack Navigators
This is my Tab Navigator:
<Tab.Navigator
initialRouteName='Passports'
screenOptions={{
"tabBarLabelStyle": {
"fontSize": 12
},
"tabBarStyle": {
"backgroundColor": "white"
}
}}
>
<Tab.Screen
name='EquipmentStack'
component={EquipmentStack}
options={{
tabBarLabel:'Equipment'
}}
/>
<Tab.Screen
name='ObjectsStack'
component={ObjectsStack}
options={{ tabBarLabel:'Objects'}}
/>
<Tab.Screen
name='DocumentationStack'
component={DocumentationStack}
options={{ tabBarLabel:'Documentation'}}
/>
</Tab.Navigator>
And my First Stack navigator:
<Stack.Screen
name='Equipment'
component={Equipment}
options={{headerShown: false}}
/>
<Stack.Screen
name='Equipment Details'
component={EquipmentDetails}
options={{title:'Equipment Details'}}/>
<Stack.Screen
name='Equipment Details Update'
component={EquipmentDetailsUpdate}
options={{title:'Equipment Details Update'}}/>
<Stack.Screen
name='Equipment Details Update Zander'
component={EquipmentDetailsUpdateZander}
options={{title:'Equipment Details Update Zander'}}/>
</Stack.Navigator>
I want to hide Tab Bar only in 3 screens out of 4 in my stack:
"Equipment" 1 Screen : Tab Bar
"Equipment Details" 2 Screen : No Tab Bar
"Equipment Details Update" 3 Screen : No Tab Bar
"Equipment Details Update Zander" 4 Screen : No Tab Bar
Also My 2 other Stack Navigator are same, and i also want to do same thing to them :
<Stack.Navigator>
<Stack.Screen
name='Objects'
component={Objects}
options={{headerShown: false}}/>
<Stack.Screen
name='Objects Details'
component={ObjectsDetails}/>
<Stack.Screen
name='Objects Details Update'
component={ObjectsDetailsUpdate}/>
</Stack.Navigator>
<Stack.Navigator>
<Stack.Screen
name='Documentation'
component={Documentation}
options={{headerShown: false}}/>
<Stack.Screen
name='Documentation Details'
component={DocumentationDetails}/>
<Stack.Screen
name='Documentation Details Update'
component={DocumentationDetailsUpdate}/>
</Stack.Navigator>

As per my understanding what you are trying to achieve can be done as below. can you check
export const TabNavigation = () => {
return (
<Tab.Navigator
initialRouteName="Passports"
screenOptions={{
tabBarLabelStyle: {
fontSize: 12,
},
tabBarStyle: {
backgroundColor: 'white',
},
}}>
<Tab.Screen
name="Equipment"
component={Equipment}
options={{
tabBarLabel: 'Equipment',
headerShown: false,
}}
/>
<Tab.Screen
name="Objects"
component={Objects}
options={{
tabBarLabel: 'Objects',
headerShown: false,
}}
/>
<Tab.Screen
name="Documentation"
component={Documentation}
options={{
tabBarLabel: 'Equipment',
headerShown: false,
}}
/>
</Tab.Navigator>
);
};
export const StackNavigation = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="TabNavigation"
component={TabNavigation}
options={{headerShown: false}}
/>
<Stack.Screen
name="Equipment Details"
component={EquipmentDetails}
options={{title: 'Equipment Details'}}
/>
<Stack.Screen
name="Equipment Details Update"
component={EquipmentDetailsUpdate}
options={{title: 'Equipment Details Update'}}
/>
<Stack.Screen
name="Equipment Details Update Zander"
component={EquipmentDetailsUpdateZander}
options={{title: 'Equipment Details Update Zander'}}
/>
<Stack.Screen name="Objects Details" component={ObjectsDetails} />
<Stack.Screen
name="Objects Details Update"
component={ObjectsDetailsUpdate}
/>
<Stack.Screen
name="Documentation Details"
component={DocumentationDetails}
/>
<Stack.Screen
name="Documentation Details Update"
component={DocumentationDetailsUpdate}
/>
</Stack.Navigator>
);
};

For the current version (v6.x) you can use: tabBarStyle option passing display as none:
tabBarStyle: {
display: 'none'
}
and if you wish to show the tabBar again, just the the display to flex (default value).

Related

How can I use Drawer Navigation in TabScrren in React native?

I have a MainPage component, and in the MainPage component, there are PostList, Post, and Explain components as Stack.Screen. and i made Home component
this is my code
const home = () => {
return (
<View>
<Text>home</Text>
</View>
)
}
const MainPage = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="PostList"
component={PostList}
options={{headerShown: false}}
/>
<Stack.Screen
name="Post"
component={Post}
options={{headerShown: false}}
/>
<Stack.Screen
name="Explain"
component={Explain}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
};
And MainPage is wrapped with Tab.screen.
<Tab.Navigator>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
headerShown: false,
tabBarStyle: {display: 'none'},
tabBarIcon: ({color}) => (
<FontAwesome5 name="list" size={20} style={{color}} />
),
tabBarActiveTintColor: 'blue',
}}
/>
</Tab.Navigator>
I want to navigate to Home component using drawer navigation in MainPage component inside Tab.Screen.
so i tried like this code
<Drawer.Navigator initialRouteName="Home">
<Tab.Navigator>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
headerShown: false,
}}
/>
</Tab.Navigator>
</Drawer.Navigator>
but it doesn't work. How can i fix my code?

How to show Bottom tab navigation in specific screens only

I have react native app which I am using react navigation and my navigation stack looks like the following:
<AppStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: COLORS.primary2,
elevation: 0,
shadowOpacity: 0,
},
headerTintColor: '#fff',
}}>
<AppStack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
/>
<AppStack.Screen
name="qr"
component={qr}
options={{
headerShown: false
}} />
<AppStack.Screen
name="Profile"
component={ProfileScreen}
options={{ headerShown: false }}
/>
<AppStack.Screen
name="Notifications"
component={NotificationScreen}
options={{ headerShown: false }}
/>
<AppStack.Screen
name="Support"
component={ChatScreen}
options={{ headerShown: false }}
/>
</AppStack.Navigator>
I want to create createBottomTabNavigator but to be displayed in all screen in the AppStack except the following home screen
<AppStack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
/>
May I know what the best practice to implement that.
You can use tabBarVisible(boolean) prop for this purpose.
<AppStack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
navigationOptions:()=>{
return {
tabBarVisible:false,
}
}
/>

Displaying Home header on other Tab screens after adding authentication.(Following React Navigation Docs)

Hope you have a great day~
With help of #Wen W, I managed to show one Home header on Home screen. But now I have Home header on other Tabs screens as shown. What should I change to display each screen's own header?
Home Screen
History Screen
The code is
const Tab = createBottomTabNavigator();
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="History" component={HistoryScreen} />
<Tab.Screen name="Request" component={RequestScreen} />
<Tab.Screen name="Account" component={AccountScreen} />
</Tab.Navigator>
);
}
const BottomStack = createStackNavigator();
function HomeStack() {
return (
<BottomStack.Navigator>
<BottomStack.Screen name="Home" component={HomeTabs} />
<BottomStack.Screen name="ShiftConfirmation" component={ShiftConfirmation} />
<BottomStack.Screen name="ShiftConfirmed" component={ShiftConfirmed} />
<BottomStack.Screen name="RequestConfirmation" component={RequestConfirmation} />
<BottomStack.Screen name="RequestConfirmed" component={RequestConfirmed} />
</BottomStack.Navigator>
);
}
...
return (
<SafeAreaProvider>
<AuthContext.Provider value={authContext}>
<NavigationContainer>
<Stack.Navigator>
{state.isLoading ? (
// We haven't finished checking for the token yet
<Stack.Screen name="Splash" component={SplashScreen} />
) : state.userToken == null ? (
// No token found, user isn't signed in
<Stack.Screen
name="SignIn"
component={SignInScreen}
options={{
title: 'Sign in',
// When logging out, a pop animation feels intuitive
animationTypeForReplace: state.isSignout ? 'pop' : 'push',
}}
/>
) : (
// User is signed in
<Stack.Screen options={{ headerShown: false }} name="SignedIn" component={HomeStack} />
)}
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
</SafeAreaProvider>
);
}
because you have two stack screens with the name Home. you can remove the header from one of them.
) : (
// User is signed in
<Stack.Screen options={{headerShown: false}} name="Home" component={HomeTabs} />
)}
</Stack.Navigator>
....
<BottomStack.Screen options={{headerShown: false}} name="Home" component={HomeScreen} />
...

React navigation - hide ui from primary stack when navigating to nested stack

How can I hide the UI in my primary stack when I navigate to my nested drawer stack?
Currently, the header from my primary stack, shows above the header in my nested stack when I navigate to a screen using:
navigation.navigate('Drawer', {screen: 'About'});
Navigator:
function DrawerStack() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Video Episodes" component={VideoEpisodesScreen} />
<Drawer.Screen name="Test Yourself" component={TestYourselfScreen} />
<Drawer.Screen name="My Results" component={MyResultsScreen} />
<Drawer.Screen name="About" component={AboutScreen} />
<Drawer.Screen name="Tests" component={TestsScreen} />
<Drawer.Screen
name="Bookmarked Videos"
component={BookmarkedVideosScreen}
/>
</Drawer.Navigator>
);
}
export default function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={stackOptions}
/>
<Stack.Screen
name="Drawer"
component={DrawerStack}
options={drawerOptions}
/>
<Stack.Screen
name="MyResultsScreen"
component={MyResultsScreen}
options={options}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
You can hide the stack navigation header by setting the option headerShown to false. I'm not sure how drawerOptions is configured but I think you could do something like this in yout <Stack.Navigator>
<Stack.Screen
name="Drawer"
component={DrawerStack}
options={{...drawerOptions, headerShown: false}}
/>

React native Nested navigatiion issue

I save the stack navigator on the drawer navigator.
I have 2 problems.
The menu should not appear on the page when the application is opened.
The component name that I used during registration should not appear on the page I directed later.
I couldn't solve this issue. Can you help me?
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function Menu() {
return (
<Stack.Navigator headerMode="none" lazy={false}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Verify" component={VerifyScreen} />
<Stack.Screen name="Tarih" component={Datepicker} options={{
animationEnabled: false,
}} />
<Stack.Screen name="Otel" component={SearchedHotel} options={{
animationEnabled: false,
}} />
<Stack.Screen name="Bölge" component={Regions} options={{
animationEnabled: false,
}} />
<Stack.Screen name="Web" component={OtelScanner} options={{
animationEnabled: false,
}} />
</Stack.Navigator>
);
}
function Routing(props) {
return (
<React.Fragment>
<IconRegistry icons={EvaIconsPack} />
<ApplicationProvider mapping={mapping} theme={lightTheme}>
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Login" component={LoginScreen} />
<Drawer.Screen name="Menu" component={Menu} />
</Drawer.Navigator>
</NavigationContainer>
</ApplicationProvider>
</React.Fragment >
);
}
Inside the <NavigationContainer /> you should have a <StackNavigator /> instead of <DrawerNavigator />
Example:
NavigationContainer
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Menu" component={Menu} />
</Stack.Navigator>
</NavigationContainer>
Example: Menu
function Menu() {
return (
<Drawer.Navigator headerMode="none" lazy={false}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Login" component={LoginScreen} />
<Drawer.Screen name="Verify" component={VerifyScreen} />
<Drawer.Screen name="Tarih" component={Datepicker} options={{
animationEnabled: false,
}} />
<Drawer.Screen name="Otel" component={SearchedHotel} options={{
animationEnabled: false,
}} />
<Drawer.Screen name="Bölge" component={Regions} options={{
animationEnabled: false,
}} />
<Drawer.Screen name="Web" component={OtelScanner} options={{
animationEnabled: false,
}} />
</Drawer.Navigator>
);
}

Categories