Side-menu in navigation-bar in react-native

Question

I am confused in the use of Navigator with react-native-side-menu. In my code I use navigator and NavigatorIOS for side-menu in navbar,but that code is not working in Android, because of the usage of NavigatorIOS. Now I am trying to convert my code to usage of Navigator in react-native.

• Here is the my code with the usage of NavigatorIOS:

var Basic = React.createClass({
  getInitialState() {
    return {
      navigationBarHidden: false
    };
  },

  showSideBar () {
      return this.refs.sidemenu.openMenu();
  },

  getNavigator(){
    if (this.refs.nav){
      return this.refs.nav.navigator;
    }else{
      return undefined;
    }
  },
  LogOut(){
    this.refs.sidemenu.closeMenu();
    this.props.navigator.popToTop();
  },
  render(){
    //alert("renderEmail:"+this.props.email);
    return (
      <SideMenu 
        ref="sidemenu"
        touchToClose={true}
        disableGestures={true}
        menu={
          <Menu
            getNavigator={this.getNavigator}
            showSideBar={this.showSideBar}
            LogOut={this.LogOut}
          />
        }
       >
          <NavigatorIOS
            ref = "nav"
            shouldUpdate={true}
            style={styles.container}
            barTintColor='#1A8A29'
            tintColor='white'
            titleTextColor='white'
            initialRoute={{
              component: BecomeMember,
              title:'Become Member',
              leftButtonIcon: require('image!menu1'),
              onLeftButtonPress: ()=> {this.showSideBar(); },
              rightButtonTitle: 'Log Out',
              onRightButtonPress: ()=> {this.LogOut();},
              passProps: {email:this.props.email,userId:this.props.userId},
            }}
            />
      </SideMenu>
    );

  }
});

when i wrote using navigatorIOS side-menu works correctly but using navigator in react-native-side-menu it not working, here is the code using Navigator

 showSideBar () {
      return this.refs.sidemenu.openMenu();
  },

  getNavigator(){
    if (this.refs.nav){
      return this.refs.nav.navigator;
    }else{
      return undefined;
    }
  },
  LogOut(){
    this.refs.sidemenu.closeMenu();
    this.props.navigator.popToTop();
  },
  render(){
    //alert("renderEmail:"+this.props.email);
    var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState){
    if(index > 0){
      return(
        <TouchableHighlight style={{marginTop: 10}} onPress={() =>{
          if(index > 0){
            navigator.pop();
          }
        }}>
        <Text>Back</Text>
        </TouchableHighlight>
        )
    }else{
      return (
        <Text onPress={this.showSideBar()}>Main</Text>
        )
    }
  },
  RightButton(route, navigator, index, navState){
    return null;
  },
  Title(route, navigator, index, navState){
    return <Text style={styles.navBarTitle}>MaxWords</Text>
  }
}
    return (
      <SideMenu ref="sidemenu" touchToClose={true} disableGestures={true} menu={<Menu getNavigator={this.getNavigator} showSideBar={this.showSideBar} LogOut={this.LogOut}/>}>
          <Navigator
            ref="nav"
            shouldUpdate={true}
            style={{flex:1}}
            initialRoute={{name:'My Profile',component:MyProfile,leftButtonIcon: require('image!menu1'),
              onLeftButtonPress: ()=> {this.showSideBar()},index:0}}
            renderScene={(route, navigator) => {
              if(route.component){
                return React.createElement(route.component, {...this.props, ...route.passProps, navigator, route});
              }
            }}
            navigationBar = {<Navigator.NavigationBar routeMapper={NavigationBarRouteMapper}  style={styles.navBar}/>}/>
      </SideMenu>
    );
  }

when i calling the function this.showSideBar(), it throws an error as shown in the image below

Can any one give me suggestions on how to solve this and how to use Navigator with side-menu in react-native ? Any help much appreciated.

Answer 1

Either

1) Add it via passProps to the component. e.g.

initialRoute={{
    component: YourComponent,
    passProps: {
        onLeftButtonPress: this.showSideBa,
    },
    (..other stuff here)
}}

or

2) Add it to the renderScene as a property. e.g.

renderScene: function(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;

    return (
      <View style={styles.navigator}>
        <Component
          {...route.passProps}
          navigator={navigator}
          route={route}
          onLeftButtonPress={this.showSideBar}/>
      </View>
    );
},

and update your renderScene() in the Navigator to point to the function instead.

initialRoute={{
    component: YourComponent,
    (..other stuff here),
    renderScene={this.renderScene}
}}

Using method 2 will pass it down to every scene that get rendered through the navigator.