I have total 6 screens, however I only want to put 4 screens(Tutorial, File Upload, Details Search, and Profile) in the bottom tab navigation below the screen. I use " tabBarLabel: () => null " to hide label for login and register screens.
My bottom tab now has 4 labels, but only the label has disappeared and still occupies that place.
enter image description here
const Tabs = createBottomTabNavigator();
const Stack = createStackNavigator();
const FileUploadStack = ({route, navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="File Upload" component={FileUpload} initialParams={{ itemId: 42 }} options={{
title:''}} />
</Stack.Navigator>
);
const DetailsSearchStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Details Search" component={DetailsSearch} options={{
title:''}} />
</Stack.Navigator>
);
const LoginStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Login" component={Login} options={{
title:''}} />
</Stack.Navigator>
);
const RegisterStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Register" component={Register} options={{
title:'' }} />
</Stack.Navigator>
);
const TutorialStack = ({navigation}) => (
<ThemeContextProvider>
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Tutorial" component={Tutorial} options={{
title:'' }} />
</Stack.Navigator>
</ThemeContextProvider>
);
export default function App() {
const [value1, setValue1] = useState("");
const [value2, setValue2] = useState("");
return (
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name = "Tutorial" component={Tutorial} options={{ tabBarVisible: false, header: null}}/>
<Tabs.Screen name= "Login" component={Login} options={{ tabBarVisible: false, tabBarLabel: () => null}}/>
<Tabs.Screen name= "Register" component={Register} options={{ tabBarVisible: false,tabBarLabel: () => null }}/>
<Tabs.Screen name= "File Upload" component={FileUpload} />
<Tabs.Screen name= "Details Search" component={DetailsSearch} />
<Tabs.Screen name = "Profile" component={User} option={{ tabBarLabel: 'Profile',
tabBarIcon: ({ color }) => ( <View>
<Icon name={"ios-person"} color={color} size={25}/> </View>)}}/>
</Tabs.Navigator>
{/* <Stack.Navigator initialRouteName="Tutorial">
<Stack.Screen name="Tutorial" component={Tutorial} options={{ headerShown: false }}/>
<Stack.Screen name="Login" component={Login}/>
<Stack.Screen name="Register" component={Register}/>
<Stack.Screen name="File Upload" component={FileUpload} />
<Stack.Screen name="Details Search" component={DetailsSearch}/>
</Stack.Navigator> */}
{/* <FlatList
data={data}
renderItem={({ item }) => (
<Text>{item.field1}, {item.field2}</Text>
)}
/> */}
<StatusBar style="auto" />
</NavigationContainer>
);
}
You will have to return null for the tabBarButton like below, this will hide the whole button from the tabbar
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarButton: () => null,
}}
/>
Related
Hello guys im a react native beginner and i created some small projects but in everyone of them my navigation is wrong ( works but not as i wanted ) exactly on the drawer look at my code and as you can see the MainStack , Login and StartUpScreen are showing on the drawer when open it in the app and i don't want that ! i just put them there so i can navigate between them ! is there any better way or someone who can show me how to do it right ?
const RootNavigation = (props) => {
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const screenOptions = {
headerShown: true,
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
};
const drawerOptions = {
headerShown: false,
};
const AppStack = () => (
<Stack.Navigator
initialRouteName="ProductsOverview"
screenOptions={screenOptions}
>
<Stack.Screen
name="ProductsOverview"
component={ProductsOverviewScreen}
options={({ navigation, route }) => ({
title: "All Products",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
onPress={() => {
navigation.navigate("CartScreen");
}}
/>
</HeaderButtons>
),
})}
/>
<Stack.Screen
name="ProductsDetail"
component={ProductDetails}
options={({ route }) => ({
title: route.params.productTitle,
headerTitleStyle: { fontFamily: "open-sans-bold" },
})}
/>
<Stack.Screen
name="CartScreen"
component={CartScreen}
options={{
title: "Cart Items",
headerTitleStyle: { fontFamily: "open-sans-bold" },
}}
/>
<Stack.Screen
name="OrdersScreen"
component={OrdersScreen}
options={{
title: "Orders ",
headerTitleStyle: { fontFamily: "open-sans-bold" },
}}
/>
<Stack.Screen
name="EditingProductScreen"
component={EditingProductScreen}
options={({ navigation }) => ({
title: "Editing",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerLeft: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={
Platform.OS === "android" ? "md-arrow-back" : "ios-arrow-back"
}
onPress={() => {
navigation.navigate("User Products");
}}
/>
</HeaderButtons>
),
})}
/>
<Stack.Screen
name="AddingProductScreen"
component={AddingProductScreen}
options={({ navigation }) => ({
title: "Adding",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerLeft: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={
Platform.OS === "android" ? "md-arrow-back" : "ios-arrow-back"
}
onPress={() => {
navigation.navigate("User Products");
}}
/>
</HeaderButtons>
),
})}
/>
</Stack.Navigator>
);
function CustomDrawerContent(props) {
const dispatch = useDispatch();
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<Button
title="LOGOUT"
onPress={() => {
dispatch(authActions.logout());
}}
/>
</DrawerContentScrollView>
);
}
return (
<NavigationContainer ref={navigationRef}>
<Drawer.Navigator
screenOptions={drawerOptions}
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="StartUpScreen" component={StartUpScreen} />
<Drawer.Screen name="Login" component={Login} />
<Drawer.Screen name="MainStack" component={AppStack} />
<Drawer.Screen
name="Products Overview"
component={ProductsOverviewScreen}
options={({ navigation, route }) => ({
headerShown: true,
title: "All Products",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
onPress={() => {
navigation.navigate("CartScreen");
}}
/>
</HeaderButtons>
),
})}
/>
<Drawer.Screen
name="Orders"
component={OrdersScreen}
options={{
headerShown: true,
title: "Orders ",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
}}
/>
<Drawer.Screen
name="User Products"
component={userProducts}
options={({ navigation }) => ({
headerShown: true,
title: "User Products",
headerTitleStyle: { fontFamily: "open-sans-bold" },
headerStyle: {
backgroundColor: "white",
},
headerTintColor: "aqua",
headerTitleStyle: {
fontWeight: "bold",
},
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Cart"
iconName={Platform.OS === "android" ? "md-add" : "ios-add"}
onPress={() => {
navigation.navigate("AddingProductScreen");
}}
/>
</HeaderButtons>
),
})}
/>
</Drawer.Navigator>
</NavigationContainer>
);
};
export default RootNavigation;
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')
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>
enter image description hereHow I can change that header in the react-native, After giving build I am getting that default android header.Please me out with this issue
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerTransparent: false,
headerTitleAlign: "center",
headerTitleStyle: {
fontSize: 13,
fontWeight: "normal",
letterSpacing: 1,
color: "#fff",
},
headerStyle: {
backgroundColor: "#7862FF",
},
headerTintColor: "#fff",
headerBackTitleVisible: false,
}}
>
{loginState.userToken == null ? (
<>
<Stack.Screen
name="Login"
component={SignInScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="SignUp"
component={SignUpScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Forgotpassword"
component={Forgetpassword}
options={{ headerShown: false }}
/>
</>
) : (
<>
<Stack.Screen
name="Landing"
component={LandingScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Dashboard"
component={DashboardScreen}
options={{ title: "Dashboard", headerTransparent: false }}
/>
<Stack.Screen
name="ArCamera"
component={CreateArTag}
options={{ title: "", headerTransparent: true }}
/>
<Stack.Screen
name="ViewArTag"
component={ViewArTag}
options={{ title: "", headerTransparent: true }}
/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
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 }} />