Implemeting drawer in React native application

Question

I just created my first interface in my React native app. I created a navbar in which there is a menu button to click, so the drawer opens and i can navigate from one screen to another. I intend to use this https://github.com/root-two/react-native-drawer. I know i need to call open drawer in the menu button when click and here is the code i used, that displays an alert for now

openDrawer(){
        this.drawer.open()
    }

    render() {
        return (
            <Container>
                <Navbar
                    bgColor={'#C0C0C0'}
                    title={"Det globale flyktningbildet"}
                    titleColor="white"
                    left={{
                        icon: "ios-menu",
                        iconColor: "#FFFFFF",
                       // onPress: () => {alert('Toggle menu ')}
                        onPress: () => {this.props.openDrawer}
                    }}
                />

                <Drawer
                    type="static"
                  //  content={<ControlPanel />}
                    openDrawerOffset={100}
                    styles={{main: {shadowColor: "#000000", shadowOpacity: 0.4, shadowRadius: 3}}}
                    tweenHandler={Drawer.tweenPresets.parallax}>
                </Drawer>
                <View>
                    <Image
                        source = { require('./../images/image1_2.png')}
                        style={[styles.image1, {resizeMode: 'contain'}]}
                    />
                </View>
            </Container>
        );
    } 

So can you please help me implemet the drawer and navigate between different screens

Answer 1

Go through example code in github you will get the idea or you can refer https://stackoverflow.com/a/42748086/6423570

EDIT

You should wrap root container of the screen with Drawer component. The <ControlPanel /> component is the content that should be displayed in the drawer. You could use Touchable Components in the <ControlPanel /> and navigator to navigate between screens. And the openDrawer function is not a prop, call it as this.openDrawer

render() {
  return (
    <Drawer
      type="static"
    //  content={<ControlPanel />}
      openDrawerOffset={100}
      styles={{
        main: {
         shadowColor: "#000000", 
         shadowOpacity: 0.4, 
         shadowRadius: 3
        }
      }}
      tweenHandler={Drawer.tweenPresets.parallax}
     >
     <Container>
      <Navbar
        bgColor={'#C0C0C0'}
        title={"Det globale flyktningbildet"}
        titleColor="white"
        left={{
            icon: "ios-menu",
            iconColor: "#FFFFFF",
           // onPress: () => {alert('Toggle menu ')}
            onPress: () => {this.openDrawer}
        }}
      />
      <View>
        <Image
            source = { require('./../images/image1_2.png')}
            style={[styles.image1, {resizeMode: 'contain'}]}
        />
      </View>
    </Container>
   </Drawer>
  );
}