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

i'm new react native , i'm doing simple android app. added drawerlayoutandroid can drag left of screen. i'd open when click on menu icon in toolbarandroid having navigator gave me error

"undefined not object (evaluating 'this.refs['drawer']')" 

then solved mistake got 1 being

"undefined not object (evaluating 'this.props.sidebarref'). 

my code this:

mytoolbar.js

'use strict';    import react, { component } 'react';  import {  	stylesheet,  	view,  	text  } '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 } 'react';  import {  	stylesheet,  	view,  	text,  	navigator,  	touchablehighlight,  	touchableopacity,   	drawerlayoutandroid,  	scrollview,  } '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 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 } 'react';  import {  	stylesheet,  	view,  	text,  	navigator,  	touchablehighlight,  	touchableopacity,   	drawerlayoutandroid,  	scrollview,  	menuitem,  } '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 know should try solve mistake? checked same forum , found similar answers none of them worked me. thanks.

you should pass drawerlayout opening method props toolbar this:

sidebarref={()=>this._setdrawer()} 

and in toolbar component should call sidebarref props, automatically call drawerlayout opening method of previous opendrawefromtoolbar.js this:

 oniconclicked={this.props.sidebarref} 

finally toolbar icon called. might you.