CODEWITHSUNDEEP
react-native
Hussian Shaik
Hussian Shaik

Reputation: 2693

How to use navigator with react native side menu?

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')

Upvotes: 5

Views: 7670

Answers (2)

chinloong
chinloong

Reputation: 3643

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.

Upvotes: 1

webwelten
webwelten

Reputation: 1593

in the latest release of react-native-side-menu the author announced that he'd switched from using props for menuActions to context. You can read it in the release notes and he even gives an example.

In your case you would change the following right in your code:

Add contextTypes to your class Menu.

Menu.contextTypes = {
  menuActions: React.PropTypes.object.isRequired
};

In your onPress method access it like this:

this.context.menuActions.close();

Upvotes: 0

Related Questions