Nested scenes in the reactor using reagents-routers-fluxes

Question

I am using React-Native-Router-Flux (V. 3.37) to create an Android application and I am trying to create nested scenes. Using the DefaultRenderer element, I was able to create a single nested scene, but I would like it to be multiple and you can navigate through them.

My index.android.js looks something like this (inside the Router element and Scene = "root").

<Scene key="outer" component={Outer} title="Outer" initial hideNavBar > <Scene key="inner1" component={Inner1} title="Inner1" hideNavBar /> <Scene key="inner2" component={Inner2} title="Inner2" hideNavBar /> </Scene> 

The external component looks something like this:

 <View style={styles.container}> <View style={styles.smallContainer}> <DefaultRenderer navigationState={this.props.children[0]} onNavigate={this.props.onNavigate} /> </View> </View> 

Similarly, the Inner1 component will be properly nested in the smallContainer view in the Outer component. But I do not know how to switch to Inner2. If I just hardcode this.props.children [1] as navigationState, it tells me that the “navigationState and onNavigate property must not be null”.

If I put TouchableHighlight in Inner1 using onPress = {Actions.inner2}, it just doesn't do anything.

My instinct tells me that the answer lies in the onNavigate = {this.props.onNavigate} attribute in the Outer component's DefaultRenderer element, but I could not find any information about this. I just copied the DefaultRenderer element from the depth of the React-Native-Router-Flux example document.

I also studied React-Native-Simple-Router, React-Native-Router and React-Router-Native, but none of them were clearly better.