Redirection not working on componentWillMount() react-native-router-flux

Question

componentWillMount() {
    var user = UserService.findAll();
    if (user.length > 0) Actions.home();
  }

where 'home' is Scene key in my router.js.

On the other hand

    onButtonPress() {
        var user = UserService.findAll();
        if (user.length > 0) Actions.home();
      }

worked like a charm !

My router.js

const RouterComponent = () => {
  return (
    <Router showNavigationBar={false}>
      <Stack key="root">
        <Scene key="auth" hideNavBar={true}>
          <Scene key="login" component={Login} />
        </Scene>

        <Scene key="home" component={Home} hideNavBar={true}/>
        <Scene key="pdf" component={Pdf} hideNavBar={true} />
      </Stack>
    </Router>
  );
};

export default RouterComponent;

Are you getting any error messages when the `componentWillMount` fires? — Mohammad Abbas, Dec 21 '18 at 01:40
no error, I tried timeout and it worked but its not what i won't because it render the screen — Firdous nath, Dec 21 '18 at 06:34
To be able to help it'd be great if you can explain the flow of your process. If this is the start of the application (launch) and a user is directed to home if logged-in or auth if they need to login then i suggest moving the logic outside of your home component into a launch screen that does that check while app is intialising and directs the user to the right scene. — Mohammad Abbas, Dec 21 '18 at 12:07
I am doing this on my launch screen only... I mean I don't have any splash screen. I either have log-in or home as an starting point. To sum up, here launch screen is login screen — Firdous nath, Dec 24 '18 at 05:14

Firdous nath · Accepted Answer · 2019-02-26T10:03:41.177

4

on props did the trick for me

I need conditional navigation, so I used success and failure attributes with names of scenes to navigate

I am posting my code below, hope it helps someone

<Scene
    key="login"
    component={Login}
    on={() => UserService.findAll().length > 0}
    success={()=>
       Actions.replace("home")
    }  
    failure="login"
/>

edited Feb 26 '19 at 10:03

answered Jan 04 '19 at 13:15

Firdous nath

1,487
1
14
38

Mohammad Abbas · Answer 2 · 2018-12-24T23:45:44.690

Okay from what I can assume you are trying to fetch or check local storage for user data in your UserService. What I would suggest is not to try and stop the component from rendering or "mounting" using the lifecycle hook componentWillMount. Instead you can render an ActivityIndicator while the UserService.findAll() is finding the user (controlled by the state) since you do not want to the component to render until the UserService is done with the user finding process.

something like that

In you constructor assign a value that will be used to either render an ActivityIndicator or the component (I'm assuming the login component). Let's call it searching for example:

// in your constructor
this.state = {
  searching : true;
}

// assuming it is an async function
async componentWillMount(){
  var user = await UserService.findAll();
  if (user.length > 0) {
    Actions.home({type : ActionConst.REPLACE}); // no need to update the state here as we will navigate to another screen resetting the navigation stack
  }else {
    this.setState({
      searching : false
    });
  }
}

// other methods etc

render(){
  return this.state.searching ? <ActivityIndicator /> : <Login />
}

of course that's an abstract of the render method but you get the gist :)

thank you for you answer, but Userservice.findAll() is not taking any time. Its synchronous method. When I put my debugger on this line : `if (user.length > 0) Actions.home();` I get `Actions` undefined. @Mohammad Abbas, I will try your code and will update you — Firdous nath, Dec 25 '18 at 06:07
no, it didn't work :( anyways thank you so much for the help — Firdous nath, Jan 04 '19 at 10:58

Redirection not working on componentWillMount() react-native-router-flux

2 Answers2