i've been trying to hide tabBar in specific screens, tried out some solutions found but none worked for me(Using Native-Base) for UI.
I have a TabNavigator in which i pass a Stack with screens.
So what i'm trying to do is to hide the TabBar in one of those screens.
See my code below 👇.
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {createStackNavigator} from '#react-navigation/stack';
import { NativeBaseProvider } from 'native-base';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
//Stack of Screens linked with the search Menu.
function Recherche() {
return (
<Stack.Navigator initialRouteName="Recherche">
<Stack.Screen
name="Recherche"
component={Search}
options={{title: 'Recherche', headerShown: false}}
/>
<Stack.Screen
name="ViewCarte"
component={ViewCarte}
options={{title: 'ViewCarte', headerShown: false}}
/>
</Stack.Navigator>
);
}
//Stack of Screens linked with the Mon Espace Menu.
function MonEspace() {
return (
<Stack.Navigator initialRouteName="Espace">
<Stack.Screen
name="Espace"
component={Espace}
options={{title: 'Espace', headerShown: false}}
/>
<Stack.Screen
name="Compte"
component={Compte}
options={{title: 'Compte', headerShown: false}}
/>
</Stack.Navigator>
);
}
//Function constructing the TabBar
function ViewLoc({navigation}) {
return (
<NativeBaseProvider>
<Tab.Navigator
initialRouteName="Recherche"
tabBarOptions={{
activeTintColor: '#0B3D91',
style: {
padding: 5,
height: 60,
},
tabStyle: {
paddingTop: 8,
paddingBottom: 8,
},
}}>
<Tab.Screen
name="Recherche"
component={Recherche}
options={{
tabBarIcon: ({color, size}) => (
<SearchIcon color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Mon espace"
component={MonEspace}
options={{
tabBarIcon: ({color, size}) => <ProfileIcon color={color} />,
tabBarVisible: true,
}}
/>
</Tab.Navigator>
</NativeBaseProvider>
);
}
Trying to hide tabBar in screen "ViewCarte" and screen "Compte".
you can change navigation structure, your structure should be like this
const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function TabsNavigatorComponent() {
return (
<Tab.Navigator>
//any screen or stack here will show with tabs.
</Tab.Navigator>
)
}
<NavigationContainer>
//the main Navigator shoud be Stack
<RootStack.Navigator>
//outside any screen to here, to show it without tabs.
<RootStack.Screen name="screenWithoutTabs" component={ScreenWithoutTabs}/>
<RootStack.Screen name="bottomTabs" component={TabsNavigatorComponent}/>
</RootStack.Navigator>
</NavigationContainer>
Related
Currently i do have this config in react-navigation:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
<Stack.Group
screenOptions={{
contentStyle: { marginTop: 120 },
gestureEnabled: true,
// presentation: 'modal',
gestureDirection: 'horizontal',
}}
>
<Stack.Screen component={CollectiblesInfoScreen} name={Routes.COLLECTIBLE_INFO_SCREEN} />
</Stack.Group>
</Stack.Navigator>
but for some reason when i try to swipe down nothing happens, modals do not close. Currently this is how it looks like the component CollectiblesInfoScreen
import { Box, Text } from 'native-base';
export const CollectiblesInfoScreen = () => {
return (
<Box>
<Text>Test</Text>
</Box>
);
};
Any ideas about what might be the issue?
App.js
const App = () => {
return (
<NavigationContainer>
<Tabs />
</NavigationContainer>
);
};
Tabs.js
const Tabs = () => {
return (
<Tab.Navigator initialRouteName='Team' screenOptions={{tabBarShowLabel: false, headerShown: false}} >
<Tab.Screen
name="Home" component={Main}
options={{
tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Main')} />),
// tabBarIcon
}}
/>
<Tab.Screen
name="Team" component={Team}
options={{
tabBarButton: props => (<TouchableOpacity {...props} onPress={() => navigation.navigate('Team')} />),
}}
/>
</Tab.Navigator>
);
}
Home.js
const Home = ({navigation}) => {
return (
<Stack.Navigator initialRouteName="Schedule">
<Stack.Screen name="Main" component={Main}
options={{
title: 'Main',
headerShown: false
}}
/>
<Stack.Screen name="Team" component={Team}
options={{
title: 'Team',
headerShown: false
}}
/>
</Stack.Navigator>
);
};
This is what I did. The screens with Main and Team.
I'm unable to navigate through these screens.
What is the issue with this implementation? And please help me to navigate through screens.!
Your first tabBarButton tries to navigate to Main but the name you're using for the tab route is Home.
I'm assuming you intended to use the Home component in the first tab instead of the Main component.
I tried to create this snack with a working example: https://snack.expo.dev/9a0DOgzoB
Please do not use the same route name for multiple routes. You're using Team multiple times.
I am implementing material top tabs and want to keep the user singed in if the user signs in to the application. The concept is working but after working for 6-7 times, the screen transitions are wrong. The user sees the previous user's details after logout and relogin.
function TabNavigation() { return (
<Tab.Navigator
tabBarOptions={{
labelStyle: { fontSize: 12 }
}} style={{ marginTop: Constants.statusBarHeight }}>
<Tab.Screen name="Login" component={Login} options={{ title: 'Login' }} onPress={retrieveData} initialParams={{ fcmToken: `${fcmTokenSAve}` }}/>
<Tab.Screen name="Sign Up" component={SignUp} options={{ title: 'Sign Up' }}/>
</Tab.Navigator> ); }
const Stack = createStackNavigator();
function HomeStack() { return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} initialParams={{
url: Platform.OS === 'android' ? `${API_LIVE_URL}/Account?version=${appVersion}` : `${API_LIVE_URL}/AccountIos?version=${appVersion}`}} options={{headerShown: false}}/>
<Stack.Screen name="Authentication" component={TabNavigation} options={{headerShown: false}}/>
<Stack.Screen name="Forgot Password" component={ForgotPassword} />
<Stack.Screen name="OTP" component={OTP} options={{headerLeft: ()=> null}}/>
</Stack.Navigator> );}
export default function App() { if (!isLoadingComplete ) {
return (
<AppLoading
startAsync={retrieveData}
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
); }else{
return (
<NavigationContainer>
<NotificationController />
{console.log('LoggedIn App',Logged), Logged ? (
<HomeStack />
) : (
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Authentication" component={TabNavigation} options={{headerShown: false}}/>
<Stack.Screen name="Forgot Password" component={ForgotPassword} />
<Stack.Screen name="OTP" component={OTP} options={{headerLeft: ()=> null}}/>
<Stack.Screen name="Home" component={Home} options={{headerShown: false}}/>
</Stack.Navigator>
)}
</NavigationContainer>
);
}}
And when we logout, we want to redirect back to login screen otherwise whenever app launches, remain to home screen.
navigation.canGoBack() ? (
navigation.navigate('Authentication')
) : navigation.navigate('Authentication')
Recently, I am designing an app. And here's the problem when I combine two navigations into one.
How can I open the drawer when the screen is inside tab navigation. Android OS doesn't support a swipe left gesture. Therefore I have to add a menu button for Android users.
Is there any method to call out the drawer?
function DrawerNav() {
return (
<Drawer.Navigator
drawerContent={(props) => <DrawerContent {...props} />}
initialRouteName="Home"
>
<Drawer.Screen name="Home" component={TabNav} />
</Drawer.Navigator>
);
}
function TabNav() {
return (
<Tab.Navigator
tabBarOptions={{
showLabel: false,
style: {
flex: 1,
position: "absolute",
bottom: "5%",
left: "5%",
right: "5%",
height: win.height * 0.08,
elevation: 0,
backgroundColor: "#f7f7f7",
borderRadius: 15,
...styles.shadow,
paddingVertical: "5%",
paddingHorizontal: "5%",
},
}}
>//Some screen here
),
}}
/>
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<DrawerNav />
</NavigationContainer>
);
}
function Feed({ navigation }) {
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
>
<Image
source={require("./app/assets/menu.png")}
style={{ position: "absolute", top: 10, width: 40, height: 40 }}
/>
</TouchableOpacity>
</SafeAreaView>
);
}
function App() {
return (
<NavigationContainer>
<DrawerNav />
</NavigationContainer>
);
}
You can use like that you need to put your tab navigation into the drawer navigation it will be available in your all tabs screens. i am using stack navigation but its same for tab navigation
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import Home from "./screen/Home"
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
import Search from "./screen/Search"
import Login from "./screen/Login"
import SuperRegister from "./screen/SuperRegister"
import CustomDrawer from "./Components/CustomDrawer"
import { createDrawerNavigator } from '#react-navigation/drawer';
import {MyContextprovider} from"./Context";
const Stack = createStackNavigator();
function MyStack(){
return (
<Stack.Navigator
headerMode={false}
initialRouteName="Login"
>
<Stack.Screen name="SuperRegister" component={SuperRegister} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Search" component={Search} />
</Stack.Navigator>
);
}
const Drawer = createDrawerNavigator();
App = () => {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props)=><CustomDrawer {...props} />}
>
<Drawer.Screen name="Home" component={MyStack} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default () => {
return (
<MyContextprovider>
<App />
</MyContextprovider>
)
}
for open or close drawer you can use
navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());
for refrains ..drawer ref..
I am new to react native development, but i have some requirement with react navigation drawer. I want to display the navigation drawer from top of the screen but it is display below from toolbar. It is a combination of both Stack and Drawer screens. Following is my code in App.js
function App() {
SplashScreen.hide()
return (
<NavigationContainer>
{/* headerMode='float' */}
<Stack.Navigator initialRouteName='Login' >
<Stack.Screen name="Login" component={LoginScreen}
options={{ headerShown: false }} />
{/* <Stack.Screen name="Home" component={HomeScreen} /> */}
<Stack.Screen name="DrawerScreens" component={DrawerScreens}
options={({ navigation, route }) => ({
title: "Home",
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'},
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} />
<Stack.Screen name="Dashboard" component={Dashboard}
options={({ route }) => ({headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'}})} />
</Stack.Navigator>
</NavigationContainer>
DrawerScreens function is like following..
function DrawerScreens({ route, navigation }) {
// console.log("param:"+route.params.token)
return (
//drawerContent={props=>CustomDrawerContent(props)}
// <SafeAreaProvider>
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="float" >
{/* <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}> */}
{/* options={{ drawerLabel: 'Updates' }} */}
<Drawer.Screen name="LandingScreen" component={LandingScreen}
initialParams={{ token: route.params.token }}/>
);
}
CustomDrawer function contains list of the menu items which is dynamic and NestedMenuView is taking care of that..
function CustomDrawerContent(props) {
return (
<SafeAreaView style={{flex: 1}} forceInset={{ top: "always" }}>
<NestedMenuView navObj={props.navigation} />
</SafeAreaView>
);
};
For me the combination of both stack and drawer screens.Thanks in advance.
I don't think the problem lies around the Stack Navigator or the Screen components;
If you use the latest, after v5 release version of #react-navigation/drawer (mine is 5.6.3) the recommended way is to use the built-in wrappers when creating custom drawer
const Drawer = createDrawerNavigator();
const Menu = (props) => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Help" onPress={() => {}} />
</DrawerContentScrollView>
);
};
export default function MyDrawer() {
return (
<Drawer.Navigator
initialRouteName="Tabs"
drawerContent={(props) => <Menu {...props} />}
edgeWidth={100}
drawerContentOptions={{
activeTintColor: Colors.accentColor,
labelStyle: {
fontFamily: 'open-sans',
},
}}
>
<Drawer.Screen...
</Drawer.Navigator>
);
You can also leave the scrollview and create custom ui like this:
const contentOptions = {
activeBackgroundColor: '#dbdbdb',
activeLabelStyle: {
fontSize: 16,
color: 'black',
fontFamily: 'roboto'
},
labelStyle: {
fontSize: 16,
fontWeight: 'normal',
color: intenseGrey,
fontFamily: 'roboto'
}
};
return (
<View
style={{
display: 'flex',
flexDirection: 'column',
flexGrow: 1
}}
>
<SafeAreaView style={{ flex: 1, paddingBottom: 0 }}>
<View style={{
backgroundColor: '#dbdbdb',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
flexGrow: 1}}
>
<View>
<DrawerItemList {...props} {...contentOptions} />
</View>
</View>
</SafeAreaView>
</View>
);
I think the reason that Drawer is not covering is because you put the Drawer navigation inside your Stack navigation.
Yours
Stack
Drawer
To fixed that you have to readjust the order
Drawer
Stack
For example (or you could see from my snack here: https://snack.expo.io/#gie3d/d25aca)
const HomeStack = () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} options={({navigation}) => ({
title: "Home",
headerLeft: () => (
<Ionicons
name={'md-menu'}
size={24}
style={{ marginLeft: 10 }}
onPress={() =>
navigation.dispatch(DrawerActions.toggleDrawer())
}
/>
),
})} />
</Stack.Navigator>
);
const Home = () => {
return (
<View>
<Text>This is Home</Text>
</View>
)}
export default () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="HomeStack">
<Drawer.Screen name="HomeStack" component={HomeStack} />
<Drawer.Screen name="HomeNoStack" component={Home} />
</Drawer.Navigator>
</NavigationContainer>
);
}
The following stacks created and calling these stacks from Drawer Screens.
const LandingStack = ({ route, navigation }) => (
<Stack.Navigator>
<Stack.Screen name="LandingScreen" component={LandingScreen} options={({navigation}) => ({
headerTitle: 'Home',
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} />
</Stack.Navigator>
);
const TicketingStack = () => (
<Stack.Navigator>
<Stack.Screen name="TicketingDashboard" component={TicketingDashboard} options={({route, navigation}) => ({
headerTitle: route.params.type,
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} />
</Stack.Navigator>
);
function DrawerScreens({ route, navigation }) {
// console.log("param:"+route.params.token)
return (
//drawerContent={props=>CustomDrawerContent(props)}
<SafeAreaProvider>
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="screen">
{/* options={{ drawerLabel: 'Updates' }} */}
{/* <Stack.Screen name="DrawerScreens" component={DrawerScreens}
options={({ navigation, route }) => ({
title: "Home",
headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
})} /> */}
<Drawer.Screen name="LandingStack" component={LandingStack}
initialParams={{ token: route.params.token }}/>
<Drawer.Screen name="HomeStack" component={HomeStack}
initialParams={{ token: route.params.token }} />
</Drawer.Navigator>
</SafeAreaProvider>
);
}
And I have removed header part from the function App and finally looks like this in the App.js
<Stack.Screen name="DrawerScreens" component={DrawerScreens}
options={{ headerShown: false }} />