Ask For Help: how to Switch to another scene with Switch

[jacobcyl]

It is not an issue.

I create a scene like below:

<Scene
    key="userAuth"
    component={connect(state=>({auth:state.auth}))(Switch)}
    tabs={true}
    unmountScenes
    selector={props=>props.auth.type ? "login" : "signUp"}
    >
    <Scene key="signUp" component={SignUp}/>
    <Scene key="login" component={Main}/>
</Scene>

I want to switch to another scene, for example a profile scene base on user`s auth status(It does not work):

<Scene
    key="profile"
    component={connect(state=>({profile:state.profile}))(Switch)}
    tabs={true}
    unmountScenes
    selector={props=>props.profile.sessionID ? "profile" : "userAuth"}
    >
    <Scene key="profile" component={Profile}/>
    <Scene key="userAuth" /> <!-- this auth scene is defined on 1st step -->
</Scene>

Does any solution to solve this problem? Thks.

[CoteViande]

Why do you have two scenes with key set to profile ?

[CoteViande]

Also, I would try with one switch and 3 sub groups with a (not so much) more complex switch condition.

[coreyphillips]

If I understand this correctly, I would move this logic out of <Scene> and into the componentDidMount of the SignUp component. So that it looks like the following:

componentDidMount() {
    this.props.sessionID ? Actions.main() : false;
}

The above example will navigate the user to the necessary view when within the appropriate component. Placing the logic in the <Scene> component as you initially proposed would risk the condition overriding the app and always direct the user back to the Main component.

The logic that you might want to consider inserting in the component where <Scene> is declared is the following:

componentDidMount() {
    if (!this.props.sessionID) {
        Actions.signUp({type: 'reset'});
        //Perform additional actions...
    }
}

This will re-route the user back to the SignUp component no matter where they are in the app if their sessionId has expired.
Hope this helps!

[jacobcyl]

@CoteViande @coreyphillips sorry, my fault, my question had update. I mean if I want to access main access I have to check if I logged in. If not it will switch to userAuth scene to login or signUp. Thanks for your answers.

[jaredmahan]

The switch documentation is outdated. Had to look at the source code to get the correct syntax The following code should work. Keep in mind I am utilizing typescript so you will have to remove the static typing stuff. Also, the ConnectedSwitch should prob be moved out of the render method.

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { Router, Scene, Switch } from 'react-native-router-flux';

// Your internal components
import Authentication from '../features/authentication';
import Main from '../features/main';

export class App extends Component<any, any> {
    render() {
        const ConnectedSwitch = connect((state: any) => {
            return {
                selector: () => { return state.authentication.get('isAuthenticated') as boolean ? 'main' : 'auth' },
                unmountScenes: true,
            };
        })(Switch as any);
        return (
            <Router>
                <Scene key="root" component={ConnectedSwitch} tabs={true}>
                    <Scene key="auth" title="Login" component={Authentication} />
                    <Scene key="main" title="Dashboard" component={Main} />
                </Scene>
            </Router>
        );
    }
}