CODEWITHSUNDEEP
react-nativereact-navigationreact-native-router-flux
Firdous nath
Firdous nath

Reputation: 1587

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

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;

Upvotes: 5

Views: 701

Answers (2)

Firdous nath
Firdous nath

Reputation: 1587

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"
/>

Upvotes: 4

Mohammad Abbas
Mohammad Abbas

Reputation: 574

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 :)

Upvotes: 0

Related Questions