React Native - Refresh screen -

i have following app:

main -> login -> favourites

on main screen, can click on button called "favourites" which:

1) if signed in, show favourites

2) if not signed in, show login screen

let's not logged in , sign in application, set's key api , returns alert saying "you signed in.."

upon going main screen after logging in, if click on "favourites" still show them login screen. have close app down , restart app login take effect.

what optimal way of making sure not have keep logging in?

here main file:

  renderview() {       if(this.state.token != null)     {         var data = this.getdata();     }else{         console.log("token " + this.state.token);         this.refs.nav.navigator.push({           title: "login",           component: login,           rightbuttontitle: 'cancel',           passprops: {nav: navigator},           onrightbuttonpress: () => { this.refs.nav.navigator.pop(); }         });     }    }   render() {     return (        <navigatorios           ref="nav"           style={styles.container}           initialroute={{               title: 'home',               component: main,               rightbuttontitle: this.rendericon(),               onrightbuttonpress: () => {                   this.renderview();               }            }} />      );    }  getdata() {    var query = urlforqueryandpage('token', this.state.token, 1);    fetch(query)     .then(response => response.json())     .then(json => this._handleresponse(json.response))     .catch(error =>       this.setstate({         isloading: false,         message: 'something bad happened ' + error     })); } 

this main file , checks if token exists, navigate favourites or else navigate login.

my handle login inside login.js:

    handlelogin(reply) {        if(reply.body.response == 'true')       {           this.setserverkey(reply.body.key);           alertios.alert(               "login",               "you signed in. please go access favourites!"           );       }else{          alertios.alert(             "login",             "wrong username/password. please try again!"         );        }    } 

as can see, login pop up. need refresh somehow main screen in order make sure favourites show without user having re-login again.

avoid re-login after logged in

let token;  constructor(props) {   super(props);   this.checktoken(); }  async checktoken() {   try {     const value = await asyncstorage.getitem('@mysuperstore:token');     if (value !== null){       token = value;     }    } catch (error) {     // error getitem asyncstorage   } }  renderview() {   if(token != null) {     var data = this.getdata();   } else {     //re-check because constructor run once     this.checktoken();     if (token) {       have data!! therefore getdata() , redirect favourites page     } else {       this.refs.nav.navigator.push({         title: "login",         component: login,         rightbuttontitle: 'cancel',         passprops: {nav: navigator},         onrightbuttonpress: () => { this.refs.nav.navigator.pop(); }       });     }   } } 

---

if can save token in persistent way instead of in volatile state can retrieve value , check after first time obtain it.

in mind, have 2 ways can save token in persistent way.

1. asyncstorage

first, check if token exists in asyncstorage

try {   const value = await asyncstorage.getitem('@mysuperstore:token');   if (value !== null){     // have data!! therefore redirect favourites page   } else {     // call getdata() , handlelogin()     // remember setitem token asyncstorage     await asyncstorage.setitem('@mysuperstore:key', token);   } } catch (error) {   // error retrieving data or setitem asyncstorage } 

2. redux , redux-persist

you can retrieve token redux store persisted redux-persist, might time-consuming if want understand , implement redux it's worth it.