react-native-router-flux Actions.{key} not recognized and causes error when called

Question

This code used to work on RN 0.57.4, but I needed to upgrade the project in order to get it on the play store and so the app has since been changed to 0.61.4. This is the main router we use:

<Router sceneStyle={styles.allSceneStyle} navigationBarStyle={styles.allSceneStyle} titleStyle={styles.allSceneStyle}>
<Scene key="root" navigationBarStyle={styles.allSceneStyle} >
    <Scene type="reset" key="login" transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forHorizontal })}>
        <Scene hideNavBar key="loginForm" component={LoginForm} initial />                            
    </Scene>                        
    <Drawer
        type="reset"
        hideNavBar
        key="drawer"
        contentComponent={DrawerContent}
        drawerImage={MenuIcon}
        drawerWidth={Dimensions.get('window').width}
        drawerPosition={'right'}
    >

        <Scene key='tabbar' transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forHorizontal })} >
            <Scene key="landing" type={ActionConst.REPLACE} component={Landing} title="" titleStyle={styles.centerText} initial />
            <Scene key='landing2' component={LandingComponent} title='Landing Dummy 2' titleStyle={styles.centerText} back={true} backTitle="Back" backButtonImage={newBackIcon} backButtonTextStyle={{ color: colors.white, paddingTop: 3 }} navigationBarTitleImage={{ uri: this.props.icons[constants.DUMMY_ICON] }} navigationBarTitleImageStyle={styles.navigationBarTitleImageStyle2} />
        </Scene>

    </Drawer>
    <Scene key="createAccount" component={CreateAccount} back={true} backTitle="Back" backButtonImage={newBackIcon} backButtonTextStyle={{ color: colors.white, paddingTop: 3 }} />
</Scene>

Once the app boots up we do successfully land in the login page, and can login and access the landing page, but whenever I try to log out I get stuck in an infinite loop. This is the relevant code for that:

    onLogout() {
        console.log("BEFORE initial call");
        this.props.dispatch(logoutUser());
        console.log("AFTER initial call");
    }

authActions:

export const logoutUser = () => {

    return (dispatch) => {
        console.log("Within logoutUser return dispatch");
        dispatch({
            type: 'LOGOUT_USER'
        });
        console.log("Within logoutUser PAST dispatch");
        Actions.login();
        console.log("Within logoutUser PAST login");
    };

};

authReducer:

case 'LOGOUT_USER':
    return {
        ...state,
        user: {},
        loading: false,
        error: '',
        email: '',
        password: ''
    };

If I run the app like this I see this in logcat:

[13:10:04] I | ReactNativeJS ▶︎ BEFORE initial call
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser return dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST login
[13:10:04] I | ReactNativeJS ▶︎ AFTER initial call
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser return dispatch
[13:10:04] I | ReactNativeJS ▶︎ Within logoutUser PAST dispatch
                             └ Within logoutUser PAST login

And then those last 3 keep repeating until the app crashes.

If I comment out Actions.login(); it doesn't do this loop so I believe the problem lies there. The linter does not recognize the login key, though it will recognize Actions.landing, landing2 and the other scenes within the key='tabbar' scene which I think is a big hint but I still can't figure it out.

I've tried Actions.loginForm() there too but that had no effect at all and wasn't recognized by the linter.

I am using "react-native-router-flux": "^4.0.0-beta.31" but I'd really like to fix this without changing the version number if I can. Doing so always introduces days worth of problems and once this is up on the play store the project will likely be never touched again.

Answer 1

Have you tried adding the REPLACE type to the login form? My guess is the component that you call logout from is not unmounting and continuously calling the logout action.

<Scene hideNavBar key="loginForm" type={ActionConst.REPLACE} component={LoginForm} initial />