implementing sideBar/hamburger menu with react-native drawer

Question

I'm quite new to React-Native. I'm trying to add sideBar/hamburger menu to my application with implementing 'react-native drawer' component. Firstly, I'm trying to add the example code from GitHub to my new test project just to understand how it works. I face with the error in the screen.

It would make me really happy, If I get some help. Or can you advice me easier way to implement sideBar/hamburger menu to my project.

import Drawer from 'react-native-drawer';
import React, {Component} from 'react';
import SideBarContent from '../common/SideBarContent';
import {Text,View} from 'react-native';

class SideBar extends Component{

    closeControlPanel = () => {
        this._drawer.close()
    };
    openControlPanel = () => {
        this._drawer.open()
    };

    render()
    {
        const drawerStyles = {
            drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
            main: {paddingLeft: 3},
        }


        return (
            <Drawer
                type="static"
                content={<SideBarContent/>}
                openDrawerOffset={100}
                styles={drawerStyles}
                tweenHandler={Drawer.tweenPresets.parallax}
            >
                <View><Text>Drawer</Text></View>
            </Drawer>
        );
    }
}

and here is my SideBarContent Component.

import React, {Component} from 'react';
import {Text,View} from 'react-native';


class SideBarContent extends Component{
    render()
    {
        return(
            <View>
                <Text>Order History</Text>
                <Text>Account</Text>
                <Text>Basket</Text>
                <Text>About us</Text>
            </View>
        );
    }
}

Answer 1

the <MainView /> is essentially the screen that you will be showing before the hamburger menu.

The <ControlPanel /> is the side view that you will show after the user clicks on the Hamburger menu. In other words, it is the actual side menu.

The <Drawer /> controls the opening/closing of these views, animations, other functionalities of a drawer/side view/ side menu (whatever you wish to call it).

You still need to create these views. I'll help you with that showing an example of an app of mine.

My <MainView/> is this screen below:

My <ControlPanel /> is this one:

I also use the same library you are trying to use.

Hope this helps.