Nested Scenes in React Native with React-Native-Router-Flux

Question

I'm using React-Native-Router-Flux (V. 3.37) to build an Android app and I'm trying to create nested scenes. Using the DefaultRenderer element I have been able to create a single nested scene, but I'd like there to be multiple and to be able to navigate through them.

My index.android.js looks something like this (within a Router and Scene key="root" element).

<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 Outer component is something like this:

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

Like this the Inner1 component will be properly nested within the smallContainer view in the Outer component. But I have no clue how to navigate to Inner2. If I simply hard code this.props.children[1] as the navigationState, it tells me "navigationState and onNavigate property should be not null."

If I put a TouchableHighlight in Inner1 with onPress={Actions.inner2}, it simply does nothing.

My instinct tells me that the answer lies with the onNavigate={this.props.onNavigate} attribute within the DefaultRenderer element in the Outer component, but I've been unable to find any information about that. I just copied the DefaultRenderer element from deep inside the example docs of React-Native-Router-Flux.

I've also looked into React-Native-Simple-Router, React-Native-Router, and React-Router-Native, but none of them were clearly any better.

cd3k cd3k · Accepted Answer · 2021-02-22T10:10:07

I've had this same issue. It doesn't look like the devs at react-router-flux have got a proper solution to this issue yet. Currently you have to first navigate to the parent component then navigate to it's children from there...

<Scene>
  <Scene key="scene1">
    <Scene key="scene2" hideNavBar component={Scene2}/>
  </Scene>
  <Scene key="scene3">
    <Scene key="scene4" hideNavBar component={Scene4}/>
    <Scene key="scene5" hideNavBar component={Scene5}/>
    <Scene key="scene6" hideNavBar component={Scene6}/>
  </Scene>
</Scene>

Say you're at scene2 you'd have to do the following to get to scene4:

Actions.scene3()
Actions.scene4()

This solution was copied from https://github.com/aksonov/react-native-router-flux/issues/1801#issuecomment-307559086

This is a pretty expensive way of doing it because you have to navigate to two components rather than just one but it looks like the only way of doing it for now.

Nested Scenes in React Native with React-Native-Router-Flux

1 Answers