React Native wait for AsyncStorage to get value

Question

Its a common problem, React Native trying to render before the values have been fetched from AsyncStorage. I've seen solutions for this in several places but for some reason it just doesn't work at all for me. Maybe its because I'm using React Native 25.1? It just gets stuck on 'Loading...' indefinitely. If I run a console log on render to show isLoading (without the if method) it returns false and then true so theoretically it should be working. But with the if method enabled its stuck on 'Loading' forever and also the log only returns false.

import React, { Component } from 'react';

import {
  Text,
  View,
  AsyncStorage
} from 'react-native';

  class MainPage extends Component {
   constructor(props: Object): void {
   super();
   this.state = {
     isLoading: false,
   };
 }

  componentWillMount() {
    AsyncStorage.getItem('accessToken').then((token) => {
      this.setState({
        isLoading: false
      });
    });
  }

  render() {
    if (this.state.isLoading) {
      return <View><Text>Loading...</Text></View>;
    }
    // this is the content you want to show after the promise has resolved
    return <View/>;
  }

});

Answer 1

Hey try this...

import React, { Component } from 'react';

import {
  Text,
  View,
  AsyncStorage
} from 'react-native';

class MainPage extends Component {

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

  componentWillMount() {
    AsyncStorage.getItem('accessToken').then((token) => {
      this.setState({
        isLoading: false
      });
    });
  }

  render() {
    if (this.state.isLoading) {
      return <View><Text>Loading...</Text></View>;
    }
    // this is the content you want to show after the promise has resolved
    return <View/>;
  }
}

Let me know if you need more clarifications...