How to use navigator with react native side menu?

Question

native-side-menu here is my code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

 var React = require('react-native');
var SideMenu = require('react-native-side-menu');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
} = React;

var ContentView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
});

var TestView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to another page.
        </Text>
        <Text style={styles.instructions}>
          Testing react native side menu with navigator.
        </Text>
      </View>
    );
  }
});

var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
    this.props.navigator.push({
      component: TestView,
      title: 'Test View',
    });
  },

  render: function() {
    return (
      <View style={styles.sidemenu}>
        <Text style={styles.paddingMenuItem}>Menu</Text>
        <Text onPress={this.about} style={styles.paddingMenuItem}>About</Text>
      </View>
    );
  }
});

var FindWisely = React.createClass({
  render: function() {
    return (
      <Navigator
       initialRoute={{
         component: Something,
         title: 'Something',
       }}
       configureScene={() => {
         return Navigator.SceneConfigs.FadeAndroid;
       }}
       renderScene={(route, navigator) => {
         if(route.component) {
           return React.createElement(route.component, { navigator });
         }
       }}/>
    );
  }
});

var Something = React.createClass({
  render: function() {
    var menu = <Menu navigator={this.props.navigator}/>;
    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  sidemenu: {
    paddingTop: 50,
  },
  paddingMenuItem: {
    padding: 10,
  },
});

module.exports = FindWisely;

When I run this I am getting:

an error undefined is not an object (evaluating 'this.props.menuActions.close')

Answer 1

menuActions is undefined in this case. To fix this, you can pass it as props from the <Menu /> composite component.

e.g: var menu = <Menu navigator={this.props.navigator} menuActions={menuActions}/>;

where menuActions should define the close function.

optionally, you can use isOpen to toggle the side menu with a state.

Use <SideMenu menu={menu} isOpen={this.state.isOpen}> and replace this.props.menuActions.close() with this.setState({isOpen: false}) to close the side menu.