How to implement a Drawer navigator in 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

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

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

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.