"There is no route defined for key "a" in beta.12-15

[alexwasner]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0.beta.12+
• react-native v.44.0

Expected behaviour

I should be able to navigate from E to A

Actual behaviour

I get an error thrown

Steps to reproduce

I have an app set up with the following structure:

    render() {
        return (
            <Provider {...stores}>
                <Router createReducer={reducerCreate}
                                      navBarTintColor= {'white'}
                                      navBarButtonColor= {'white'}
                                      tintColor= {'white'} >
                  <Scene key="modal"  hideNavBar modal
                                      navTransparent={true}
                                      drawUnderNavBar={true}
                                      navBarTintColor= {'white'}
                                      navBarButtonColor= {'white'}
                                      tintColor= {'white'}
                                      navigationBarStyle={styles.navBar}
                                      titleStyle={styles.titleStyle}>
                    <Scene key="root"
                                      navBarTintColor= {'white'}
                                      navBarButtonColor= {'white'}
                                      tintColor= {'white'}>
                        <Scene key="a" title="A" component={A} type='reset' />
                        <Scene key="b" title="B" drawUnderNavBar={false} component={B} type='reset' />
                        <Scene key="c" title="C" component={C} />
                        <Scene key="d" title="D" onLeft={Actions.C}
                                          left={<TouchableOpacity onPress={()=>{Actions.G()}}><Image source={{uri:'iconHere'}} style={[styles.headerIcon,styles.leftIcon]}/></TouchableOpacity>}
                                          component={D}/>
                        <Scene key="e" title="E" component={E} initial />
                    </Scene>
                    <Scene key="f"  hideTabBar
                                    navBarTintColor= {'white'}
                                    navBarButtonColor= {'white'}
                                    tintColor= {'white'}>
                        <Scene key="g" leftTitle="Cancel" onLeft={Actions.pop} title="G" component={G}
                                    navBarTintColor= {'white'}
                                    navBarButtonColor= {'white'}
                                    tintColor= {'white'} />
                    </Scene>
                  </Scene>
              </Router>
          </Provider>
        )
    }
}

When launching the app, I got to E which runs a few checks to determine where to navigate to next in componentDidMount. It calls Actions.a() which should navigate. Instead, I get There is no route defined for key a. Must be one of 'root','f'. I tried with a bunch of more routes and still get the same error

[aksonov]

reset fully clears stack, please try to use 'replace' instead or ActionsConsts.POP_AND_PUSH.

[m-vdb]

using RESET worked for me!

[alexwasner]

@aksonov Didn't work as I'm not using a reset here. I have an intermediary screen that calls

LocalStorage.getItem('@UserStore.authenticated').then((val) => {
			if (val && val.isLoggedIn) {
				Actions.a()
			} else {
				Actions.b()
			}
		})```

[alexwasner]

Oh on the actual Scene itself. Gotcha. That fixed it. Why does reset crash it though?

[m-vdb]

Have you tried using Actions.a({type: ActionConst.RESET})? It will force reseting the navigation stack. I had a similar issue than you I guess, since my user navigated from logged-out state to logged-in state, and I have 2 separate trees for the two states.

Also @asokol don't you think it's worth documenting that somewhere? It's pretty useful and almost every app will implement login/logout

[aksonov]

PR is welcome.

[alexwasner]

So @aksonov How do I have two routes that can perform a reset? I also tried POP_AND_PUSH and it seems to just do a push. I need to clear the entire stack when logging out and its not doing anything

[alexwasner]

Here's a gif of whats happening with the following setup:

1. Login calls Actions.home({type:ActionConst.REPLACE}) and it does a hard cut without animation.
2. Clicking Logout on Home calls this.props.navigation.navigate(login{type:ActionConst.REPLACE}) and it does a PUSH.
3. I am able to swipe back to Home
4. Upon second login, the exact same Actions.home({type:ActionConst.REPLACE}) looks like a POP
   

[aksonov]

@alexwasner Please send me link to repo, it is difficult to say something

[alexwasner]

I can't share this repo as it's work related and had to remove a bunch of styles just to get that gif to show. If I get time in the next few days, I can strip it down to the bare bones and send a link to that

[alexwasner]

@aksonov Here is an example of the navigation bug from the gif above. alexwasner@faf4e74

If you launch the app, you can follow exactly with the gif I provided. If you click the "Go to Launch page" on the Home page, and try to click on the the links, you will see the original bug I listed.

[aksonov]

@alexwasner Looks like it happens because react-navigation doesn't have normal 'replace' - i.e. push & pop previous scene. I implement 'replace' with their 'reset' action but it is not real 'replace'.

Now I implemented it as PUSH & POP_PREVIOUS, check now.

P.S. If you use react-navigation navigate it will not do replace, because it is not supported.

[aksonov]

Should be fixed within latest master

[hassanelsherpiny]

Actions.pop() will do what you want