React-native-router-flux: Replace does not work with Tabs scene

[die20]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.21 (v3 is not supported)
• react-native v0.47.1

Expected behaviour

I want to have the scene replaced (or reset - although reset doesn't work either) when I navigate to specific scenes.

Actual behaviour

The history stack is still available so users can swipe back on IOS and android users can use the hardware back button. I don't want to remove the back ability across the entire app, I just want to reset/replace the stack.

Steps to reproduce

I have tried the following implementations with no luck from the Landing scene (check below for code):
1) Actions.replace('SceneTabs')
2) Actions. SceneTabs({type:'replace'})
3) Actions. SceneTabs({type:Actions})
4) Actions. SceneTabs({type:ActionConst.REPLACE})
6) The below method transitions to the correct scene, but replace is not occurring.

    <Router>
        <Modal>
         <Stack key='root'>
              <Scene key='Landing' />
              <Tabs
                    key="SceneTabs"
                    hideNavBar={true}
                    tabBarStyle={styles.tabBarStyle}
                    activeBackgroundColor={'#fff'}
                    activeTintColor={'#000'}
                    inactiveBackgroundColor={'#000'}
                    showLabel={false}
                    type={ActionConst.REPLACE} //here
                >
                    <Stack
                        key="sceneATab"
                        title="SceneA"
                        tabBarLabel="SceneA"
                        icon={sceneAIcon}
                    >
                        <Scene
                            key="SceneA"
                            component={COMPONENTA}
                        />

                    </Stack>
                    <Stack
                        key="sceneBTab"
                        title="SceneB"
                        tabBarLabel="SceneB"
                        icon={sceneBIcon}
                    >
                        <Scene
                            key="SceneB"
                            component={COMPONENTB}
                        />

                    </Stack>
                    <Stack
                        key="sceneCTab"
                        title="SceneC"
                        tabBarLabel="SceneC"
                        icon={sceneCIcon}
                    >
                        <Scene
                            key="SceneC"
                            component={COMPONENTC}
                        />

                    </Stack>
                </Tabs>
           </Stack>
          </Modal>
       </Router>

6) Below is the example format (where a wrapper scene for the Tab is set) but this errors with 'There is no route defined for key SceneTabs.'

      <Router>
         <Modal>
           <Stack key='root'>
              <Scene key='Landing' />
             <Scene hideNavBar>
              <Tabs
                    key="SceneTabs"
                    hideNavBar={true}
                    tabBarStyle={styles.tabBarStyle}
                    activeBackgroundColor={'#fff'}
                    activeTintColor={'#000'}
                    inactiveBackgroundColor={'#000'}
                    showLabel={false}
                    type={ActionConst.REPLACE} //here
                >
                    <Stack
                        key="sceneATab"
                        title="SceneA"
                        tabBarLabel="SceneA"
                        icon={sceneAIcon}
                    >
                        <Scene
                            key="SceneA"
                            component={COMPONENTA}
                        />

                    </Stack>
                    <Stack
                        key="sceneBTab"
                        title="SceneB"
                        tabBarLabel="SceneB"
                        icon={sceneBIcon}
                    >
                        <Scene
                            key="SceneB"
                            component={COMPONENTB}
                        />

                    </Stack>
                    <Stack
                        key="sceneCTab"
                        title="SceneC"
                        tabBarLabel="SceneC"
                        icon={sceneCIcon}
                    >
                        <Scene
                            key="SceneC"
                            component={COMPONENTC}
                        />

                    </Stack>
                </Tabs>
            </Scene>
          </Stack>
         </Modal>
      </Router>

All of the above methods do not work. I tried them with reset as well and it doesn't work. In v3 I was able to do Actions.SceneTabs({type:'reset'}) without issue.

The below method does work for REPLACE only - still won't work with RESET.

      <Router>
         <Modal>
           <Stack key='root'>
             <Stack key='LandingStack'>
                   <Scene key='Landing' />
             </Stack>
              <Scene
                     key="SceneA"
                      component={COMPONENTA}
                     type={ActionConst.REPLACE}
                 />
          </Stack>
         </Modal>
      </Router>

UPDATE:

After looking deeper into closed PR's, it appears this fix https://github.com/aksonov/react-native-router-flux/pull/2344 was closed.

I don't fully understand all the implications of this PR but it might be worth taking another look at because I've seen numerous closed issues about replace/reset due to inactivity - I hope the issues didn't go inactive because people chose another router

[lalitindoria]

I am facing the same issue where a reset throws an error saying that no route was defined and a replace doesn't actually replace the current scene.

[c3098051]

Having same issue.

[Rootedy]

+1

[mm-goswami]

facing same issue

[dittmarconsulting]

Actions.<scene name>({  type: ActionConst.REPLACE  })

causes the following error:

Cannot read property 'map' of undefined

Here my env

"react": "16.3.0-alpha.1",
"react-native": "0.54.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-redux": "^5.0.7",
"redux": "^3.7.2"

[Blapi]

@dittmarconsulting downgrade RNRF to .27

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists