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

Solution 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.

Solution 2

As I am not on system so haven't check the working of code, but this should work.

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

export default class SideBar extends Component{

    constructor(){
        super();
        this.closeControlPanel = this.closeControlPanel.bind(this);
        this.openControlPanel = this.openControlPanel.bind(this);
    }

    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 />}
                ref = {(ref) => this._drawer = ref}
                openDrawerOffset={100}
                styles={drawerStyles}
                tweenHandler={Drawer.tweenPresets.parallax}
            >
                <View>
                <Text onPress={this.openControlPanel}>
                    Drawer
                </Text>
                </View>
            </Drawer>
        );
    }
}

An another file SideBarContent

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


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

Please let me know if any issues..

Comments

[Ali Zeynalov]

thank you very much. It almost made everything clear for me. I created new component for 'content' instead of ControlPanel and changed the MainView with simple 'View' component, just to see the hamburger menu and it's content. I edited my code with current one, so you can see. But, now, I get 'check render method of Default Renderer' error, which I screened and added to the question, as wel, so you can see. Do you have any idea what I am doing wrong? I could not get after some search on google.

[Gui Herzog]

Let me check for you.

[Ali Zeynalov]

I also added 'SideBarContent' component's code that I use for 'content'. I do not know, maybe I do something wrong there.

[Gui Herzog]

My guess is that you imported the View from react native inside the brackets and when you are using it inside the drawer, the code is breaking. I have to look here, but anyway try to create a component with a simple view and import it or try to import the view outside the brackets on your imports. I don't know if it's gonna work, but if it doesn't I can look later for you.

[Ali Zeynalov]

thank you. I tried both of your advices. Wheras, nothing changed. I would appreciate your help, when you're available.

[Gui Herzog]

Hmm, sad. I'll take a look here. Give me 10 min.

[Gui Herzog]

Let us continue this discussion in chat.

[Gui Herzog]

Oh, yeah you forgot to export the SideBarContent class. Every time you create an external component you should add: export default at the beginning. E.g. export default class SideBarContent ...

[Gui Herzog]

Thanks mate, this should work. He forgot to add the export default, to add the ref to the drawer.

[Gui Herzog]

They're just an example. You can create any view, but if you are looking specifically for the design, I can help you with that.

[Balasubramanian]

@Guilherme Herzog I'm looking for to navigate some component inside the control panel. is that possible ?

[Gui Herzog]

Well, you can do that using the states if the Drawer and rendering its components based on that states. Idk, if this is ideal but it works.