How to implement React native DrawerLayout with ToolbarAndroid?

Question

I am trying to implement navigation drawer on click of menu icon in toolbar, i am trying this from many days but i could not find any good resource online,I have followed some stack overflow answer and implemented this till now:

MyToolbar.js

    'use strict';

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

    var ToolbarAndroid = require('ToolbarAndroid');

    export default class MyToolbar extends Component  {
    render() {
      // var navigator = this.props.navigator;
       return (
        <ToolbarAndroid
         title={this.props.title}
         navIcon={require('./ic_menu.png')}
         style = {styles.toolbar}
         titleColor={'white'}
         onIconClicked={this.props.sidebarRef}/>
        );
     }
     }

     const styles = StyleSheet.create({
       toolbar: {
            height: 56,
          backgroundColor: '#08AE9E',
        width: 370,
        alignItems: 'center'
        }

      });

openDrawerFromToolbar.js

    'use strict';

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

    var ToolbarAndroid = require('ToolbarAndroid');
    var MyToolbar = require('./MyToolbar');

    export default class OpenDrawerFromToolbar extends Component  {
     render() {

      var navigationView = (
         <ScrollView>
      <View style = {{height:100, backgroundColor:'blue', justifyContent:'center'}}>
         <Text style = {{height:25, color:'white', fontSize:25, marginLeft:20}}>Welcome To ReactNative</Text>
      </View>
      // <ListView></ListView>
           //render your list items
      </ScrollView>
    );

    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView}
        ref={'DRAWER'}>
        <MyToolbar style={styles.toolbar}
            title={'Calendar'}
            sidebarRef={()=>this._setDrawer()}/>

      </DrawerLayoutAndroid>
    );
    }

     _setDrawer() {
       this.refs['DRAWER'].openDrawer();
      }
     }

     const styles = StyleSheet.create({
       //your own style implementation

     });

index.android.js

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

    var OpenDrawerFromToolbar = require('./components/OpenDrawerFromToolbar');

    class NewsTrack extends Component {
      render() {

        return (
          <OpenDrawerFromToolbar
       />

        );
      }



    }



    AppRegistry.registerComponent('NewsTrack', () => NewsTrack);

Initially clicking on toolbar was not doing any action and navigation drawer was not opening now I'm getting blank screen. what am i missing in the code?

Edit : I have updated the code and now i am facing this error: "Element type is invalid: expected a string(for built-in components)or a class/function (for composite components) but got: object.

I have checked other such question they say some import or export is wrong i am not able to find out which in my case is wrong, can someone please help?

Answer 1

You can use Drawer provided by native base . It comes with toolbar functionality and very easy to use. I am using it in one of my projects. https://docs.nativebase.io/Components.html#Drawer