react native screen load function

Question

hi I wanna check if user not logged in navigate the user to the login screen but when the app first opens user will navigate to the login screen how run a code only if a screen loaded

componentDidMount(){


AsyncStorage.getItem('islogin', (err, result) => {
  console.log(result);
  if (result!==true){
    this.setState({login:false})

   }
  }); 
}

render() {
  if(this.state.login==false){

    const { navigate } = this.props.navigation;

    navigate('profile',{ name: 'cat' }) 
  }
}

Sinapcs · Accepted Answer · 2017-10-17 05:07:10Z

1

move your code into componentWillReceiveProps. on navigation, your component will receive new props and componentWillReceiveProps will be called. so here you can check AsyncStorage and navigate user.

componentDidMount(){
  AsyncStorage.getItem('islogin', (err, result) => {
    console.log(result);
    if (result!==true){
      this.setState({login:false})           
     }
   }); 
}

shouldComponentUpdate(nextProps, nextStates) {
  console.log(nextState)
  if(nextState.login == false)
    this.props.navigation.navigate('profile',{ name: 'cat' });
}
render() {

}

edited Oct 17, 2017 at 5:07

answered Oct 16, 2017 at 8:58

Sinapcs

2,7551 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Poorya Taghizade Over a year ago

i console logged in componentWillReceiveProps. but never trigger

Sinapcs Over a year ago

I thought you are using redux. shouldComponentUpdate will work for you. I added some code example

Poorya Taghizade Over a year ago

But react navigation tab change not remount component

Sinapcs Over a year ago

no it's not remount component. TabNavigator screens are mounted when you open application.

Poorya Taghizade Over a year ago

So how i should check user is logged in every time he enter my tab

|

Bhavan Patel · Accepted Answer · 2017-10-16 08:59:39Z

I am using react-native-router-flux for routing, You can do conditional state as described in code.

import React, {Component} from 'react';
import {AsyncStorage} from 'react-native';
import {Scene, Router} from 'react-native-router-flux';

//Splash
import Splash from '../splashscreen_component';


//Home
import HomeScreen from '../home_component/HomeScreen';

//Login
import Signin from '../login_component/Signin';

var KEY = 'isLIn';

export default class AppRoutes extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false,
      isLoading: true
    };
  }

  componentWillMount() {
    this._loadInitialState().done();
  }

  async _loadInitialState() {
    try {
      let value = await AsyncStorage.getItem(KEY);
      if (value !== null && value === 'true') {
        this.setState({isLoggedIn: true, isLoading: false});
      } else {
        this.setState({isLoggedIn: false, isLoading: false});
      }
    } catch (error) {
      console.error('Error:AsyncStorage:', error.message);
    }
  };

  _loginscreen() {
    return (
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="Signin" component={Signin} title="Signin" initial panHandlers={null}/>
        <Scene key="Home" component={HomeScreen} title="Home" panHandlers={null}/>

      </Scene>
    );
  }

  _homescreen() {
    return (
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="Home" component={HomeScreen} title="Home" initial panHandlers={null}/>

      </Scene>
    );
  }

  render() {
    if (this.state.isLoading === true) {
      return (<Splash/>);
    } else {
      if (this.state.isLoggedIn === true) {
        return (
          <Router>{this._homescreen()}</Router>
        );
      } else {
        return (
          <Router>{this._loginscreen()}</Router>
        );
      }
    }
  }
}

Collectives™ on Stack Overflow

react native screen load function

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related