Issue with Actions.reset() and <Modal/>

[phd13]

Version

Tell us which versions you are using:

• react-native-router-flux "git+https://github.com/aksonov/react-native-router-flux.git" (latest in master, obviously; also tried 4.0.0.24-beta, same result)
• react-native v0.50.3

Expected behaviour

My Router is currently configured like this

const App = () => (
   <Provider store={configureStore()}>
        <Router createReducer={reducerCreate}>
            <Overlay key="overlay">
                <Modal
                    key="modal"
                    transitionConfig={() => ({screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid})}
                >
                    <Stack key="root" hideNavBar>
                        <Scene
                            key="login"
                            component={Login}
                            initial
                            title="Login"
                            hideNavBar
                        />
                        <Scene
                            key="homeScreen"
                            navBar={() => <Hamburger scene={{}} isHome/>}
                            back={false}
                            component={Home}
                            panHandlers={null}
                        />
                        <Stack key="someKey">
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                        </Stack>
                        <Stack key="someKey">
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                        </Stack>
                        <Stack key="someKey">
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                            <Scene
                                key="someKey"
                                navBar={Hamburger}
                                back
                                component={SomeComponent}
                            />
                        </Stack>
                    </Stack>
                    <Scene
                        navBar={Hamburger}
                        back
                        key="hamburger"
                        component={HamburgerMenu}
                    />
                </Modal>
            </Overlay>
        </Router>
    </Provider>
);

export default App;

When I call for Modal window (that is implemented according to docs provided) is pops up from the bottom of the screen, then I close it and tap on Home or Settings icon in my TabBar which resets the navigation stack to the scene needed. Modal is strictly required in my project.

Actual behaviour

When I tap on on Home or Settings icon in my TabBar (and call for Actions.reset('myKeyName')) it shows me an error with following statement

There is no route defined for key homeScreen. Must be one of 'root','hamburger'.

Other actions like POP, Replace are working as expected but they don't fit my needs because they won't clear the routing stack.
If I delete the <Modal...> </Modal> part, RESET works totally as expected but I lose this nice transition from bottom of the screen. I nested it as explained in the docs, can't figure out what's wrong...

Steps to reproduce

Null

[aksonov]

It is not supported at this moment, PR is welcome. Probably you could add custom transitions with usual stack container instead: #2628

[riamon-v]

Hello @aksonov ! I actually have the same problem, you said reset stack and Modals are not supported yet.
Is this the case now ? Or is there any other work around, other than the one mentioned above ?

[Allyday]

@riamon-v If you have multiple sub-stacks instead of just Scene in your "root" Stack, try removing the wrapping stack.
So instead of:

<Modal>
  <Stack key="root" />
    <Stack key="auth" />
    <Stack key="app" />
  </Stack>
  <Scene key="modal" />
</Modal>

Try:

<Modal>
  <Stack key="auth" />
  <Stack key="app" />
  <Scene key="modal" />
</Modal>

This could be a hacky way and I'm not sure if it's the intended solution but at least it works for now.