React Native: How to pass navigator object?

help
1

Hey guys,
I’m just tesing React Native and I’m relatively new to React. Now I’m having a little problem with NavigatorIOS. I want to pass the navigator object to my side menu.

index.ios.js

var app = React.createClass({


_getNavigator() {
    return this.navigation;
},


render: function () {


    const menu = <Menu navigator={this._getNavigator}/>;


    return (
        <SideMenu menu={menu}>
            <NavigatorIOS style={{flex:1}}
                          barTintColor="#00cd8d"
                          ref={(ref) => this.navigation = ref}
                          shadowHidden={true}
                          tintColor="#ffffff"
                          titleTextColor="#ffffff"
                          initialRoute={{
    component: Dashboard,

    title: "myApp"
  }}
            />

        </SideMenu>
    );
}
});

menu.js

module.exports = React.createClass({

openDashboard() {
   this.props.navigator.push({
       component: Notification,
       title:"Hallo"
   });
},

render() {
    return (
        <ScrollView scrollsToTop={false} style={styles.menu}>
            <View style={styles.avatarContainer}>
                <Image
                    style={styles.avatar}
                    source={{ uri, }}/>
                <Text style={styles.name}>Your name</Text>
            </View>

            <TouchableWithoutFeedback onPress={this.openDashboard}><Text style={styles.item}>Übersicht</Text></TouchableWithoutFeedback>
            <Text style={styles.item}>Verdienst</Text>
        </ScrollView>
    );
}
});

Now I’ve the problem that “this.props.navigator” isn’t defined. How can I pass the navigation object to another component, while it isn’t rendered, yet?