React-native-router-flux: "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:
export default class App extends Component { 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. https://github.com/alexwasner/react-native-router-flux/commit/faf4e7439dc5a1db31d205e8bebf6f3e5346d4e9

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