How to implement React native DrawerLayout with ToolbarAndroid? - react-native

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