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

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.