Develop Reference

What is the right way to setup navigation drawer in react native

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;

Top tabs with material top tabs navigation - authentication implementation - how to proceed?

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')

Hide TabBar in specific Screens in React Native

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>

react-native Hide specific label of screen in the bottom tab navigation

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,
}}
/>

Navigation from Login screen to Drawer.Navigator first screen Not able to navigate from one screen to drawer navigation

I am very new to react native and this is my 1st application my org has given me to do a PoC for the same.
My requirement is i have to develop an app with
Login screen -----> Navigation Drawer(1) screen Name-- workProcessor and 2) Operation Analytics)
I am able to achieve screen at 2 different level's
i.e i am able to design Login screen and i am able to design workprocessor and operation analytics screen and switch between them
I am not able to Integrate my login screen and on click of login i should navigate to Navigation-drawer screen
My files are :
Login.js
import React from 'react';
import {
ScrollView,
Text,
TextInput,
View,
Button,
StyleSheet
} from 'react-native';
import Logo from './Logo';
import Form from './Form';
export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<Logo></Logo>
<Form type = "Login"></Form>
<View style ={styles.workSpaceText}>
<Text style = {styles.workSpaceText}> Change WorkSpace ?</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#455a64',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
workSpaceText: {
flexGrow:1,
justifyContent:'center',
alignItems:'center',
},
workSpaceText: {
fontSize: 15,
marginVertical:15,
color: 'rgba(255,255,255,0.7)'
}
});
Form.js
import React from 'react';
import { StyleSheet, TextInput, View, Image, TouchableOpacity, Text } from "react-native";
import { useNavigation } from '#react-navigation/native';
// import { Actions } from 'react-native-router-flux';
const Form = () => {
const navigation = useNavigation();
loginMove= ()=>{
navigation.navigate('Landing');
}
return (
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Username"
placeholderTextColor='#ffffff'
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
placeholderTextColor='#ffffff'
/>
<TouchableOpacity style={styles.button} onPress={loginMove}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
);
}
export default Form;
const styles = StyleSheet.create({
container: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center'
},
inputBox: {
width: 300,
backgroundColor: 'rgba(255,255,255,0.5)',
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color: '#ffffff',
marginVertical: 10
},
button: {
width: 300,
backgroundColor: '#1c313a',
borderRadius: 25,
marginVertical: 20,
paddingVertical: 12
},
buttonText: {
fontSize: 16,
fontWeight: '500',
color: '#ffffff',
textAlign: 'center'
}
});
And my Drawer File
i.e LandingScreen.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
// import { Router, Stack, Scene } from 'react-native-router-flux';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import WorkProcessor from './workprocessor';
import OperationAnalytics from './OperationAnalytics';
import { Button, View, Text, TouchableOpacity, Image } from 'react-native';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const NavigationDrawerStructure = (props) => {
//Structure for the navigatin Drawer
const toggleDrawer = () => {
//Props to open/close the drawer
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => toggleDrawer()}>
{/*Donute Button Image */}
<Image
source={{ uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png' }}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
function firstScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen
name="FirstPage"
component={WorkProcessor}
options={{
title: 'Work-Processor', //Set Header Title
headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
}
function secondScreenStack({ navigation }) {
return (
<Stack.Navigator
initialRouteName="SecondPage"
screenOptions={{
headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
}
}}>
<Stack.Screen
name="SecondPage"
component={OperationAnalytics}
options={{
title: 'Operational Analytics', //Set Header Title
}} />
</Stack.Navigator>
);
}
const LandingScreen = () => (
<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: { marginVertical: 5 },
}}>
<Drawer.Screen
name="FirstPage"
options={{ drawerLabel: 'Work-Processor' }}
component={firstScreenStack} />
<Drawer.Screen
name="SecondPage"
options={{ drawerLabel: 'Operation-Analytics' }}
component={secondScreenStack} />
</Drawer.Navigator>
</NavigationContainer>
);
export default LandingScreen;
When i am clicking on login button i.e loginMove .. it is not moving to navigation drawer screen and giving error: -
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
Please can some one help me completing this flow. I am ready for doing any code changes it's my PoC

You cannot embedd NavigationContainer, only stacks, drawers, tabs, etc
I suggest you to make two Navigations, one for login, one logged. This prevent to back to login screen when already logged in.
Example
// App.js
return(
<NavigationContainer>
{isLogged ? <LoggedNav /> : <LoginNav />}
</NavigationContainer>
)
With your Drawer in LoggedNav and Stacks in LoginNav
OR
In a first stack, you have a screen with your drawer stack and one with your landing page stack. You can embedd stacks as much as you want but not NavigationContainer. A screen can be a stack without problems.
function Login({ navigation }) {
return (
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen
name="FirstPage"
component={WorkProcessor}
options={{
title: 'Work-Processor', //Set Header Title
headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
}
const LandingScreen = () => (
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: { marginVertical: 5 },
}}>
<Drawer.Screen
name="FirstPage"
options={{ drawerLabel: 'Work-Processor' }}
component={firstScreenStack} />
<Drawer.Screen
name="SecondPage"
options={{ drawerLabel: 'Operation-Analytics' }}
component={secondScreenStack} />
</Drawer.Navigator>
);
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="login">
<Stack.Screen name="login" component={Login} ... />
<Stack.Screen name="landing" component={LandingScreen} ... />
</Stack.Navigator>
</NavigationContainer>
)