How to implement a Drawer navigator in react native? - react-native

Question

Hi i 'm new to react native how to implement a drawer navigator in react native. Actually i'm following this doc
Updated:
code for home page is as follows
constructor(props){
super(props)
this.state= {
icon: null
}
}
render(){
return(
<Container>
<Header style={{backgroundColor:'pink'}} >
<Button
transparent
onPress= {() => this.props.navigation.navigate("DrawerOpen")}>
<Icon
style= {{color: '#ffffff', fontSize:25, paddingTop:0}}
name="bars"
/>
</Button>
</Header>
<Content>
</Content>
</Container>
);
}
}
also
index.js
import CourseListing from './CourseListing';
import SideBar from './SideBar/SideBar';
import {DrawerNavigator} from 'react-navigation';
import Profile from './Profile';
const MyHome =DrawerNavigator(
{
CourseListing: {screen: CourseListing},
Profile: {screen: Profile},
},
{
contentComponent: props => <SideBar {...props} />
}
);
I'm getting this error

Answer 1

In addition to the documentation which is great, I also recommend watching This video.
I would suggest creating a file called Router.js. It could look something like this:
import React from 'react';
import { DrawerNavigator } from 'react-navigation';
import Screens1 from ... // Import all your screens here
import Screens2 from ...
import Screens3 from ...
// The DrawerNavigator uses all the screens
export const MyDrawer = DrawerNavigator({
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
Screen3: { screen: Screen3 },
});
In your root (usually called App.js) make sure to import MyDrawer:
import React, { Component } from 'react';
import { MyDrawer } from '(correct path here)/Router.js';
export default class App extends Component {
render() {
return <MyDrawer />;
}
}
Now when the app starts Screen1 will be loaded. Each of the screens has a side menu because of the DrawerNavigator. To open the menu in any screen, use the following method:
_openMenu() {
this.props.navigation.navigate('DrawerOpen');
}
Hope this helps.

Answer 2

it's so, implement drawer such as stack-navgation
exmaple :
import { createDrawerNavigator } from 'react-navigation-drawer';
import {signIn,drawer} from 'scene'
const RouteConfigs = {
signIn
}
const DrawerNavigatorConfig = {
drawerPosition:'right',
drawerType:'front',
hideStatusBar:true,
contentComponent:drawer
}
export default createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);
the important part is contentComponent in DrawerNavigatorConfig. it's a view that shows in the drawer when it opens

Answer 3

import React, { Component } from "react";
import { Dimensions, StyleSheet, } from 'react-native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import color from '../../../constants/color'
import Attendance from '../../ExtraScreens/Attendance/Attendance'
import KIETDigitalDirectory from '../../ExtraScreens/KIETDigitalDirectory/KIETDigitalDirectory'
import KIETExtensions from '../../ExtraScreens/KIETExtensions/KIETExtensions'
import StudentRedressal from '../../ExtraScreens/StudentRedressal/StudentRedressal'
//
import Ticketing from '../../ExtraScreens/Ticketing/Ticketing'
import TicketingApply from '../../ExtraScreens/Ticketing/TicketingApply'
//
import Grievance from '../../ExtraScreens/EmployeeGrievance/Grievance'
import GrievanceApply from '../../ExtraScreens/EmployeeGrievance/GrievanceApply'
export default class Extra extends React.Component {
render() {
const Drawer = createDrawerNavigator();
return (
<Drawer.Navigator
drawerType="back"
// openByDefault
// overlayColor="transparent"
>
<Drawer.Screen name="KIET Extensions" component={KIETExtensions} />
<Drawer.Screen name="Grievance" component={GrievanceStack} />
<Drawer.Screen name="Ticketing" component={TicketingStack} />
<Drawer.Screen name="Student Redressal" component={StudentRedressal} />
<Drawer.Screen name="Attendance" component={Attendance} />
<Drawer.Screen name="KIET Digital Directory" component={KIETDigitalDirectory} />
</Drawer.Navigator>
)
}
}
const StackNavigator = createStackNavigator();
const GrievanceStack = (props) => (
<StackNavigator.Navigator
initialRouteName="Grievance"
mode="card"
headerMode="none"enter code here>
<StackNavigator.Screen name="Grievance" component={Grievance} />
<StackNavigator.Screen name="Grievance Apply" component={GrievanceApply} />
</StackNavigator.Navigator>
)
const TicketingStack = (props) => (
<StackNavigator.Navigator
initialRouteName="Ticketing"
mode="card"
headerMode="none"
>`enter code here`
<StackNavigator.Screen name="Ticketing" component={Ticketing} />
<StackNavigator.Screen name="Ticketing Apply" component={TicketingApply} />
</StackNavigator.Navigator>
)