title: React Native AsyncStorage async function return
body: <p>I have a helper function:</p>
  <pre><code>export async function isFavorite(id) {
    try {
      let favorites = await AsyncStorage.getItem(&quot;@rn-food-app:favorites&quot;);
      if (favorites) {
        return JSON.parse(favorites).includes(id);
      }
      return false;
    } catch (error) {
      return false;
    }
  }
  </code></pre>
  <p>which I'm calling like this:</p>
  <pre><code>class DetailScreen extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        recipe: null,
        isFavorite: false,
      };
    }
  
    componentDidMount() {
      const { route } = this.props;
  
      if (route.params &amp;&amp; route.params.recipeId) {
        const recipe = getRecipe(route.params.recipeId);
        this.setState(
          {
            recipe,
          },
          () =&gt; {
            this.checkIfFavorite();
          }
        );
      }
    }
  
    checkIfFavorite() {
      const { recipe } = this.state;
  
      console.log(isFavorite(recipe.id));
    }
  
  ... ... ...
  </code></pre>
  <p>but the <code>console.log()</code> returns something like this</p>
  <pre><code>Promise {
    &quot;_U&quot;: 0,
    &quot;_V&quot;: 0,
    &quot;_W&quot;: null,
    &quot;_X&quot;: null,
  }
  </code></pre>
  <p>instead of a <code>bool</code>.</p>
  <p>I can make it work like this:</p>
  <pre><code>export async function isFavorite(id) {
    try {
      return await AsyncStorage.getItem(&quot;@rn-food-app:favorites&quot;);
    } catch (error) {
      return false;
    }
  }
  </code></pre>
  <p>and then in the <code>DetailScreen component</code></p>
  <pre><code>  checkIfFavorite() {
      const { recipe } = this.state;
  
      isFavorite(recipe.id)
        .then((res) =&gt; {
          const favorite = JSON.parse(res).includes(recipe.id);
          console.log(favorite);
        })
        .catch((err) =&gt; console.log(err));
    }
  </code></pre>
  <p>This works but why doesn't the approach above work? I wanted to extract all this logic into a helper function so I can simply call <code>isFavorite: bool</code> inside my components without extra logic.</p>