I integrated sidebar for the drawer while its not showing. It shows simple react-navigation drawer nothing else.
Here is my code. How can I make it worked and visible?
App.js
import React from 'react';
import {StyleSheet, Text, View } from 'react-native';
import { TabNavigator, DrawerNavigator, StackNavigator } from 'react-navigation';
import WelcomeScreen from './screens/WelcomeScreen';
import SigninScreen from './screens/SigninScreen';
import SignupScreen from './screens/SignupScreen';
import HomeScreen from './screens/HomeScreen';
import BusinessScreen from './screens/BusinessScreen';
import TechScreen from './screens/TechScreen';
import ProfileScreen from './screens/ProfileScreen';
import FavoritesScreen from './screens/FavoritesScreen';
import SettingsScreen from './screens/SettingsScreen';
import SideBar from './components/SideBar';
export default class App extends React.Component {
render() {
const MainNavigator = TabNavigator({
welcome: { screen: WelcomeScreen },
signin: { screen: SigninScreen },
signup: { screen: SignupScreen },
main: {
screen: DrawerNavigator({
home: { screen: HomeScreen },
business: { screen: BusinessScreen },
tech: { screen: TechScreen },
profile: {
screen: StackNavigator({
profile: { screen: ProfileScreen },
settings: { screen: SettingsScreen }
})
}
},
)
}
},
{
contentComponent: props => <SideBar {...props} />
}
);
return (
);
}
}
HomeScreen.js
import React from "react";
import { StatusBar } from "react-native";
import {
Button,
Text,
Container,
Card,
CardItem,
Body,
Content,
Header,
Title,
Left,
Icon,
Right
} from "native-base";
import SideBar from '../components/SideBar';
export default class HomeScreen extends React.Component {
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.navigate("DrawerOpen")}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Chat App to talk some awesome people!</Text>
</Body>
</CardItem>
</Card>
<Button
full
rounded
dark
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("business")}>
<Text>Chat With People</Text>
</Button>
<Button
full
rounded
primary
style={{ marginTop: 10 }}
onPress={() => this.props.navigation.navigate("tech")}>
<Text>Goto Profiles</Text>
</Button>
</Content>
</Container>
);
}
}
SideBar.js
import React from "react";
import { AppRegistry, Image, StatusBar } from "react-native";
import {
Button,
Text,
Container,
List,
ListItem,
Content,
Icon
} from "native-base";
const routes = ["home", "business", "tech", "profile"];
export default class SideBar extends React.Component {
render() {
return (
<Container>
<Content>
<Image
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
}}
style={{
height: 120,
alignSelf: "stretch",
justifyContent: "center",
alignItems: "center"
}}>
<Image
square
style={{ height: 80, width: 70 }}
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/logo.png"
}}
/>
</Image>
<List
dataArray={routes}
renderRow={data => {
return (
<ListItem
button
onPress={() => this.props.navigation.navigate(data)}>
<Text>{data}</Text>
</ListItem>
);
}}
/>
</Content>
</Container>
);
}
}
What is going wrong?
Try below package for use side bar
https://github.com/react-native-community/react-native-side-menu
Try this method
Related
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>
);
}
}
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
}
);
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
I don't know why I can't import my screen, or I just can't find my mistake. I have another screen like this one. The import and the stack navigator screens is like here, but there isn't error there.
Here is my code:
import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Text, Form, Input, Item, Button} from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import {StyleSheet, ImageBackground, Dimensions, Image, View} from 'react-native';
import MainNavigator from './LoginScreen';
// Some Code
const MainNavigator1 = createStackNavigator({
SignUp: {
screen: SignUpScreen,
navigationOptions: {
header: null,
}
},
Login: {
screen: MainNavigator,
navigationOptions: {
header: null,
}
}
})
export default createAppContainer(MainNavigator1);
const styles = StyleSheet.create ({
container:{
flex: 1,
backgroundColor: null,
justifyContent: 'center',
padding: 10
},
profileImg: {
height: 80,
width: 80,
overflow: 'hidden',
}
})
LogInScreen:
import React, {Component} from 'react';
import * as firebase from 'firebase';
import {Container, Content, Header, Text, Form, Input, Item, Button} from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import {StyleSheet, ImageBackground, Dimensions, Image, View} from 'react-native';
import AppContainer22 from './DrawerNavigatorNew';
import MainNavigator1 from './SignUpScreen';
const firebaseConfig = {
apiKey:
authDomain:
databaseURL:
projectId:
storageBucket:
};
firebase.initializeApp(firebaseConfig);
class LoginScreen extends React.Component {
constructor (props) {
super(props)
this.state =({
email:'',
password:'',
error:'',
})
}
/*
signUpUser = (email, password) => {
try {
if(this.state.password.length <6)
{
alert("Please enter atleast 6 characters")
return;
}
firebase.auth().createUserWithEmailAndPassword(email, password)
}
catch (error){
console.log(error.toString())
}
}
*/
onSignInPress() {
this.setState({error:''})
const {email, password} = this.state;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
this.setState({error:''})
this.props.navigation.navigate('Drawer');
})
.catch(() => {
this.setState({error:'Authentication failed'})
})
}
render(){
let { height, width } = Dimensions.get('window');
return (
<ImageBackground source={{uri:'https://guidetoiceland.is/image/437199/x/0/northern-lights-in-all-the-colors-of-the-rainbow-dance-across-the-sky-in-iceland-6.jpg'}}
style={{height, width}}>
<Container style={styles.container}>
<View style={{justifyContent:'center', alignItems:'center'}}>
<Image source={{uri:'https://image.flaticon.com/icons/png/512/10/10155.png'}}
style={styles.profileImg}/>
</View>
<Form>
<Item rounded>
<Icon active name='md-mail' size={20} color={'white'}/>
<Input
name='email'
placeholder='YourEmail#gmail.com'
autoCorrect={false}
autoCapitalize='none'
onChangeText={(email)=> this.setState({email})}
keyboardType='email-address'
style={{marginTop: 10}}
/>
</Item>
<Item rounded>
<Icon active name='md-key' size={25} color={'white'}/>
<Input
name='password'
placeholder='******'
secureTextEntry={true}
autoCorrect={false}
autoCapitalize='none'
onChangeText={(password)=> this.setState({password})}
style={{marginTop: 10}}
/>
</Item>
<Text style={{color: 'red'}}>{this.state.error}</Text>
<Button style={{marginTop: 10}}
full
rounded
success
onPress = {this.onSignInPress.bind(this)}
>
<Text> Login </Text>
</Button>
<Button style={{marginTop: 10}}
full
rounded
primary
onPress = {this.props.navigation.navigate('SignUp')}
>
<Text style={{color: 'white' }}> Sign Up </Text>
</Button>
</Form>
</Container>
</ImageBackground>
);
}
}
const MainNavigator = createStackNavigator({
Home: {
screen: LoginScreen,
navigationOptions: {
header: null,
}
},
Drawer: {
screen: AppContainer22,
navigationOptions: {
header: null,
}
},
SignUp: {
screen: MainNavigator1,
navigationOptions: {
header: null,
}
}
});
export default createAppContainer(MainNavigator);
const styles = StyleSheet.create ({
container:{
flex: 1,
backgroundColor: null,
justifyContent: 'center',
padding: 10
},
profileImg: {
height: 80,
width: 80,
overflow: 'hidden',
}
})
And here is the Error:
For some reason, there is an error when you click on the opening menu and it is unclear to me why it is happening.
"react-navigation": "^3.5.1"
This is for open my menu drawer with pressing.
```
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Left, Icon } from 'native-base';
import { DrawerActions } from 'react-navigation';
class Header extends Component {
render() {
return (
<View style={styles.viewStyle}>
<Left>
<Icon
name='menu'
style={styles.menu}
onPress={() => this.props.navigation.openDrawer()}
/>
</Left>
<Text style={styles.textStyle}>Episodes</Text>
</View>
);
}
}
export default Header;
```
```
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { Right, Left, Icon } from 'native-base';
import EpisodeList from '../components/EpisodeList';
import Header from '../components/header';
class HomeScreen extends Component {
static navigationOptions = {
drawerIcon: ({ tintColor }) => (
<Icon name='home' style={{ fontSize: 24, color: tintColor }} />
)
};
render() {
return (
<View style={styles.container}>
<Header />
<View>
<Image
source={{
uri:
'https://images.pexels.com/photos/754082/pexels-photo-754082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
}}
style={{ width: 400, height: 700, position: 'absolute' }}
/>
<EpisodeList />
</View>
</View>
);
}
}
export default HomeScreen;
```
I expect the drawer will open when I press the menu button
the header is a component that i pass into another component that its
activated from there .
You need to pass navigation prop to your child components to use this kind of functionality.
<Header navigation={this.props.navigation} />
or in header file do this,
import {withNavigation} from "react-navigation";
....
...
...
export default withNavigation(Header);
Did you try with the following?
this.props.navigation.dispatch(DrawerActions.openDrawer());
Don't forgot to import,
import { DrawerActions } from "react-navigation";
Please try this, in your HomeScreen
<Header {...this.props}/>
Hi there I am trying to implement a drawer navigation in React Native
referring to this example.
I have almost finished the coding but I am getting an error while adding the contentComponent attribute in drawer class (HomeScreenRouter). After removing it I am able to run it successfully and everything is working well but when I add the sidebar menu using contentComponent it throws an error. I need a custom design for my drawer.
Here is my code for the drawer:
import React, { Component } from "react";
import HomeScreen from "./HomeScreen.js";
import MainScreenNavigator from "../DealScreen/mychat.js";
import Profiled from "../profilescreen/Profile.js";
import SideBar from "../SideBar/SideBar.js";
import { DrawerNavigator } from "react-navigation";
const HomeScreenRouter = DrawerNavigator(
{
Home: { screen: HomeScreen },
Chat: { screen: MainScreenNavigator },
Profile: { screen: Profiled },
},
{
contentComponent: props => <SideBar {...props} />
});
export default HomeScreenRouter;
Sidemenu :
import React from "react";
import { AppRegistry, Image, StatusBar } from "react-native";
import { Container, Content, Text, List, ListItem } from "native-base";
export default class SideBar extends React.Component {
render() {
const routes = ["Home", "Chat", "Profile"];
return (
<Container>
<Content>
<Image
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/drawer-cover.png"
}}
style={{
height: 120,
alignSelf: "stretch",
justifyContent: "center",
alignItems: "center"
}}>
<Image
square
style={{ height: 80, width: 70 }}
source={{
uri: "https://github.com/GeekyAnts/NativeBase-KitchenSink/raw/react-navigation/img/logo.png"
}}
/>
</Image>
<List
dataArray={routes}
renderRow={data => {
return (
<ListItem
button
onPress={() => this.props.navigation.navigate("Profile")}>
<Text>{data}</Text>
</ListItem>
);
}}
/>
</Content>
</Container>
);
}
}
I use library with react-navigation and i can slide the drawer as well.
Now i want to set a button can open the drawer , but i find that my this.props.navigation is undefined from console.log(this.props.navigation).
So it will cause the undefined error if i try to use
<Button transparent onPress={() =>
{this.props.navigation.navigate('DrawerOpen')}>
<Icon name='menu' />
</Button>
How do i fix the error ? Any help would be appreciated.
I create my Drawer with a component like this:
import React, { Component } from 'react';
import { Image, ScrollView } from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import PageOne from './PageOne';
import PageTwo from './PageTwo';
class MyDrawer extends Component {
render() {
const TheDrawer = DrawerNavigator({
PageOne: {
screen: PageOne,
navigationOptions: {
drawerLabel: 'It\s page One',
drawerIcon: () => (
<Image source={require('../img/nav_icon_home.png')} />
),
},
},
PageTwo: {
screen: PageTwo,
navigationOptions: {
drawerLabel: 'It\'s page Two',
drawerIcon: () => (
<Image source={require('../img/nav_icon_home.png')} />
),
},
},
}, {
drawerWidth: 300,
contentComponent: props => <ScrollView>
<DrawerItems {...props}
activeTintColor='#008080'
activeBackgroundColor='#EEE8AA'
inactiveTintColor='#20B2AA'
inactiveBackgroundColor='#F5F5DC'
style={{ backgroundColor: '#F5F5DC' }}
labelStyle={{ color: '#20B2AA' }}
/>
</ScrollView>
});
return (
<TheDrawer />
);
}
};
export default MyDrawer;
Use MyDrawer in App.js: (Undefined error is over here)
import React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { TabNavigator, DrawerNavigator } from 'react-navigation';
import MyDrawer from './screens/MyDrawer';
import { Container, Header, Button, Text, Icon, Left, Right, Title, Body } from 'native-base';
//style={[styles.icon, { tintColor: tintColor }]}
export default class App extends React.Component {
render() {
// it shows undefined
console.log(this.props.navigation);
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => { alert('test') }}>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>I am Title Man</Title>
</Body>
<Right />
</Header>
<MyDrawer />
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
To control TheDrawer navigator from App component, you need to store the ref of TheDrawer to a service, and dispatch actions from that service.
class MyDrawer extends Component {
// ...
render(): {
//...
return (
<TheDrawer
ref={navigatorRef => {
NavigatorService.setContainer(navigatorRef);
}}
/>
);
}
}
Then use NavigatorService.navigate('DrawerOpen') to open the drawer. For more details, you can see this