Search code examples
javascriptreactjsreact-nativereact-native-router-flux

There is no route defined for key auths

I'm working on an application where i'm using react-native-router-flux for navigation but getting this error

enter image description here

Here's my Router

<Router navTransparent>
            <Lightbox>
                <Scene key="root" tintColor="#fff" style={{position: 'absolute'}} hideNavBar>
                    <Scene key="redirect" component={EnsureAuthentication}/>
                    <Scene key="auth" navBar={CustomNavBar}>
                        <Scene key="loginSignUp" component={Login} hideNavBar/>
                        <Scene key="login" component={LoginForm} title={I18n.t('loginTitle')} />
                        <Scene key="signUp" component={SignUpForm} title={I18n.t('signUpTitle')}/>
                        <Scene key="googleLogin" component={GoogleLogin}/>
                    </Scene>
                    <Drawer hideNavBar key="app" contentComponent={DrawerContent} drawerWidth={300} drawerOpenRoute="DrawerOpen" drawerCloseRoute="DrawerClose" drawerToggleRoute="DrawerToggle">
                        <Scene key="main" navBar={CustomNavBar}>
                            <Scene key="MapSearch" component={MapSearch}/>
                            <Scene key="ScanQr" hideNavBar component={ScanQr} />
                            <Scene key="searchList" hideNavBar component={SearchList}/>
                            <Scene key="editUserProfile" component={EditUserProfile} title={I18n.t('update')} />
                            <Scene key="stallDetails" hideNavBar component={StallDetails}/>
                            <Scene key="customise" hideNavBar component={Customise}/>
                            <Scene key="cart" hideNavBar component={Cart}/>
                            <Scene key="favourites" hideNavBar component={Favourites}/>
                        </Scene>
                    </Drawer>
                </Scene>
                <Scene key="overlay"/>
                <Scene key="orderOverlay" hideNavBar component={OrderOverlay}/>
                <Scene key="confirmOverlay" hideNavBar component={ConfirmOverlay}/>
                <Scene key="forgotPasswordOverlay" hideNavBar component={ForgotPasswordOverlay}/>
                <Scene key="forgotPwdSuccessOverlay" hideNavBar component={ForgotPwdSuccessOverlay}/>
            </Lightbox>
        </Router>

I'm calling Actions.reset('auths');

There is another strange behavior if i call Actions.auths() instead of Actions.reset('auths'); & make some changes in same file where i'm calling this method, app reloads everything works well.

Solution

  • the error is caused by a typo. the key value of your Action is not called exactly as declared in your Scene. calling Action.auth() should work as intended and resolves the error.

    i can see that you are trying to reset the Scene. you can also do that by declaring reset as a prop in your Router. in this way, navigating to the Scene should trigger reset every time.

    <Scene key="auth" navBar={CustomNavBar} type={ActionConst.RESET}>

    if you are trying to set up a stack of scenes for authentication process flow, you can try setting up a stack to have the initial prop. i've added a code snippet here for testing:

    <Stack key="auth" navBar={CustomNavBar} initial>
  <Scene key="loginSignUp" component={Login} hideNavBar/>
  <Scene key="login" component={LoginForm} title={I18n.t('loginTitle')} />
  <Scene key="signUp" component={SignUpForm} title={I18n.t('signUpTitle')}/>
  <Scene key="googleLogin" component={GoogleLogin}/>
</Stack>