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?

score 1 · Answer 1 · answered Aug 09 '17 at 09:19

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

answered Aug 09 '17 at 09:19

Paras Watts

2,565
4
21
46

what is sidebar in that ?how to create that?do you have a working example? – Siddarth G Aug 11 '17 at 07:13
Sidebar is just another file, which has all the menu items . All the menu items in drawer are rendered in sidebar file. Yes I am using right now in my project. – Paras Watts Aug 11 '17 at 07:15
i copied the code in nativebase into my index.android.js, im getting a blank screen – Siddarth G Aug 11 '17 at 07:39
{ this.drawer = ref; }} content={} >

– Paras Watts Aug 11 '17 at 07:43
This is the code for drawer menu. Further there are function for closing and opening drawer. closeDrawer = () => { this.drawer._root.close() }; openDrawer = () => { this.drawer._root.open() }; – Paras Watts Aug 11 '17 at 07:44
goto(route) { console.log("navigation" + route); const { navigate } = this.props.navigation; navigate(route); } This function I have defined in drawermenu file and used in sidebar file to navigate to different screens on clicking of menu item – Paras Watts Aug 11 '17 at 07:45
Have you checked their github repository ? – Paras Watts Aug 11 '17 at 07:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151687/discussion-between-paras-watts-and-siddarth-g). – Paras Watts Aug 11 '17 at 07:47
https://github.com/GeekyAnts/NativeBase-KitchenSink check their sample app on github, you will also find sidebar file. – Paras Watts Aug 11 '17 at 07:52

How to implement React native DrawerLayout with ToolbarAndroid?

1 Answers1