Show DrawerLayoutAndroid via ToolbarAndroid using Navigator (React Native) - reactjs

Question

I'm new to react native and I'm doing a simple android app.
I added a DrawerLayoutAndroid that I can drag from the left of my screen. However I'd like to open it when I click on my menu icon in my ToolbarAndroid having a Navigator gave me the error
"undefined is not an object (evaluating 'this.refs['DRAWER']')"
Then I solved this mistake but I got another one being
"undefined is not an object (evaluating 'this.props.sidebarRef').
My code is this:
MyToolbar.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
class MyToolbar extends Component {
render() {
var navigator = this.props.navigator;
return (
<ToolbarAndroid
title={this.props.title}
navIcon={require('./icons/ic_menu_white_24dp.png')}
style = {styles.toolbar}
titleColor={'white'}
onIconClicked={this._onIconClicked}/>
);
}
_onIconClicked(){
this.props.sidebarRef.refs['DRAWER'].openDrawer();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
toolbar: {
height: 56,
backgroundColor: '#08AE9E',
width: 370,
alignItems: 'center'
}
});
module.exports = MyToolbar;
OpenDrawerFromToolbar.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
DrawerLayoutAndroid,
ScrollView,
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
var MyToolbar = require('./MyToolbar');
var MenuItem = require('./MenuItem');
class OpenDraweFromToolbar extends Component {
render() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
<MenuItem
title="Calendar"
selected={this.props.activeTab === 'Calendar'}
//onPress={this.onTabSelect.bind(this, 'schedule')}
icon={require('./icons/ic_today_black_24dp.png')}
//selectedIcon={scheduleIconSelected}
/>
<MenuItem
title="Offers"
selected={this.props.activeTab === 'Offers'}
//onPress={this.onTabSelect.bind(this, 'schedule')}
icon={require('./icons/ic_today_black_24dp.png')}
//selectedIcon={scheduleIconSelected}
/>
<MenuItem
title="Boats"
selected={this.props.activeTab === 'Boats'}
//onPress={this.onTabSelect.bind(this, 'schedule')}
icon={require('./icons/ic_directions_boat_black_24dp.png')}
//selectedIcon={scheduleIconSelected}
/>
<MenuItem
title="Profile"
selected={this.props.activeTab === 'Profile'}
//onPress={this.onTabSelect.bind(this, 'schedule')}
icon={require('./icons/ic_account_circle_black_24dp.png')}
//selectedIcon={scheduleIconSelected}
/>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}
ref={'DRAWER'}>
<MyToolbar style={styles.toolbar}
title={'Calendar'}
navigator={this.props.navigator}
sidebarRef={this}/>
<View style={{flex: 1, alignItems: 'center'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
</View>
</DrawerLayoutAndroid>
);
}
gotoPersonPage() {
this.props.navigator.push({
id: 'PersonPage',
name: 'hola',
});
}
_setDrawer() {
this.refs['DRAWER'].openDrawer();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
toolbar: {
height: 200,
backgroundColor: '#08AE9E',
width: 370,
alignItems: 'center'
}
});
module.exports = OpenDraweFromToolbar;
and calendarpage.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
DrawerLayoutAndroid,
ScrollView,
MenuItem,
} from 'react-native';
var ToolbarAndroid = require('ToolbarAndroid');
var MyToolbar = require('./MyToolbar');
var OpenDrawerFromToolbar = require('./OpenDrawerFromToolbar');
class CalendarPage extends Component {
render() {
return (
<Navigator
initialRoute = {{ name: 'OpenDrawerFromToolbar', index: 0 }}
renderScene={this.renderScene.bind(this)}
configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }}
/>
);
}
renderScene(route, navigator) {
//_navigator = navigator;
return (
<OpenDrawerFromToolbar
route={route}
navigator={navigator}
//data={route.data}
/>
);
}
}
module.exports = CalendarPage;
Does someone know what should i try to solve this mistake? i checked this same forum and found similar answers but none of them worked for me.
Thanks.

Answer 1

you should pass drawerlayout opening method as props to toolbar like this:
sidebarRef={()=>this._setDrawer()}
And in your toolbar component you should call sidebarRef as props, which automatically call the drawerlayout opening method of previous OpenDraweFromToolbar.js like this:
onIconClicked={this.props.sidebarRef}
Finally your toolbar icon will be called. This might help you.