How can I show the Drawer (SideMenu) on any screen except in the login using React Native? - react-native

Question

I had several problems trying to achieve this.
The sidemenu is not displayed on the Login screen, but in the Home component yes(this is fine).
But if I go back to the login component (by clicking on the menu navigation item), drawer is now shown from the login (It only must be showed on the Home component). I do not know why the template that I have to put in the drawer is not shown, by default the routes that I have created appear and with this the problem occurs (I am trying to put a template in the sidemenu)..
How can I fix this?
this is my code:
app.js
import React from "react";
import { StyleSheet, View } from "react-native";
import UserNavigation from "./app/navigation/UserNavigation";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return <UserNavigation />;
}
}
userNavigation.js
import React from "react";
import {
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions,
Image
} from "react-native";
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { Icon } from "native-base";
import LoginScreen from "../screens/login/Login";
import HomeScreen from "../screens/home/Home";
const { width } = Dimensions.get("window");
const CustomDrawerNavigation = props => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 250,
backgroundColor: "#fff",
opacity: 0.9
}}
>
<View
style={{
height: 200,
backgroundColor: "Green",
alignItems: "center",
justifyContent: "center"
}}
>
<Image
source={require("../../assets/img/logo.webp")}
style={{ resizeMode: "contain", width: "100%" }}
/>
</View>
<View
style={{
height: 50,
backgroundColor: "Green",
alignItems: "center",
justifyContent: "center"
}}
></View>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
<View style={{ left: 20, bottom: 20 }}>
<View style={{ flexDirection: "row" }}>
<View
onPress={() => props.navigation.navigate("Login")}
style={{
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "center",
marginRight: 15
}}
>
<Icon
type="MaterialCommunityIcons"
name="logout"
style={{ fontSize: 24 }}
onPress={() => props.navigation.navigate("Login")}
/>
<Text>Salir</Text>
</View>
</View>
</View>
</SafeAreaView>
);
};
const DrawerStack = createStackNavigator({
Home: HomeScreen
});
const DrawerNavigation = createDrawerNavigator({
Home: {
name: "Home",
screen: HomeScreen
},
Login: {
name: "Cerrar Sesión",
screen: LoginScreen
}
});
const AppNavigator = createSwitchNavigator(
{
App: DrawerNavigation,
Login: {
screen: LoginScreen
}
},
{
initialRouteName: "Login",
drawerPosition: "left",
I have another problem and I don't know why the template (CustomDrawerNavigation) I have to put in the drawer is not shown.
contentComponent: CustomDrawerNavigation,
drawerOpenRoute: "DrawerOpen",
drawerCloseRoute: "DrawerClose",
drawerToggleRoute: "DrawerToggle",
drawerWidth: (width / 3) * 2
}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
login.js
import React, { Component } from "react";
import { View } from "react-native";
import { Button, Text } from "native-base";
export default class Login extends Component {
constructor() {
super();
this.state = {};
}
handlerLogin = async () => {
this.props.navigation.navigate("Home");
};
render() {
return (
<View>
<Text>Login</Text>
<Button block button onPress={() => this.handlerLogin()}>
<Text>Go to home</Text>
</Button>
<Text>Login</Text>
</View>
);
}
}
home.js
import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { StatusBar } from "react-native";
import {
Container,
Header,
Title,
Left,
Icon,
Right,
Button,
Body,
Content,
Text,
Card,
CardItem
} from "native-base";
export default class Home extends Component {
constructor() {
super();
this.state = {
loading: false
};
}
closeDrawer = () => {
this.drawer._root.close();
};
openDrawer = () => {
this.drawer._root.open();
};
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.openDrawer()}
>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Home</Text>
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}

Answer 1

For this you can create two Navigators.
Advantages:
1. After login he cant get back to Login screen if he press back
2. Side Drawer wont be visible in Login Page
Imports we need:
import { createAppContainer, createSwitchNavigator } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { createDrawerNavigator } from 'react-navigation-drawer';
Login Stack:
const LoginStack = createStackNavigator(
{
Login: {
screen: Login,
navigationOptions: {
title: 'Login',
headerLeft: null,
header: null
}
},
forgotPassword: {
screen: ForgotPassword,
navigationOptions: {
title: 'Forgot Password'
}
}
},
{
initialRouteName: 'Login',
} );
Home Page Stack:
const homePageBottomNavigationStack = createStackNavigator(
{
Home: {
screen: Login,
navigationOptions: {
title: 'Login',
headerLeft: null,
header: null
},
},
{
initialRouteName: 'Home',
} )
Drawer Navigator:
const PostLoginStack = createDrawerNavigator(
{
Home: {
screen: homePageBottomNavigationStack
}
} );
Switch Navigator:
const switchNavigator = createSwitchNavigator(
{
LoginStack: LoginStack,
PostLoginStack: PostLoginStack
},
{ headerMode: "none", initialRouteName: "LoginStack" } );
const AppContainer = createAppContainer(switchNavigator);
package.json:
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.1",
"react-native-paper": "^3.2.1",
"react-native-reanimated": "^1.4.0",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^1.10.3"
For Having a custom drawer component, make this change:
const PostLoginStack = createDrawerNavigator(
{
Home: {
screen: homePageBottomNavigationStack
}
},
{
contentComponent: YourCustomDrawerComponent
}
);

Answer 2

You will need to create two navigators one for the Login and one for the App and then wrap them into a SwitchNavigator
So
Login = StackNavigator
App = DrawerNavigator
and Login and App together into a SwitchNavigator
You can refer this article
https://medium.com/building-with-react-native/routing-in-react-native-apps-and-how-to-configure-your-project-with-react-navigation-library-d8d58005bfe9