How to use the navigator in response to its own 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 get:

the undefined error is not an object (rating "this.props.menuActions.close")

Answer 1

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

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

where menuActions should define a close function.

optionally, you can use isOpen to switch the sidebar with status.

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

Answer 2

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

In your case, you 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 to it is as follows:

 this.context.menuActions.close();