React native-How to return item from AsyncStorage to use outside of async function?

Question

I'm trying to use an item from AsyncStorage, stored as a variable created in an async function, however, when it is returned, it returns as undefined.

import React from 'react';
import {View,Text,TouchableOpacity,StyleSheet}from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
function App(){
  async function save() {
    let info = ['space']
    AsyncStorage.setItem('key', JSON.stringify(info))
  }
  async function show1() {
    try {
      let show = await AsyncStorage.getItem('key');
      show = JSON.parse(show)
      console.log('item:', show)
      return show;
    } catch (error) {
      console.log(error)
    }
  }
  const read=(show)=> {
    console.log(show)
  }
  show1();

The function read is called by a button and logs 'undefined' instead of ['space'].In the async function it correctly logs show as ['space'], but doesn't seem to return it. Is it possible to use an aysnc item outside of an async function or am i missing something.

Answer 1

By defining

const read=(show)=> { console.log(show) }

you are declaring a function that takes a parameter, that will be referred as show in the scope of that function.

What you should be doing is:

const read = show1();
console.log(read);`

or

const read = () => {
 console.log(show1());
}
read();

What you should remember is that when you declare a variable in a function, it is not accessible outside the scope of this function.

So if you do:

function myAssign() {
let a = 10;
console.log(a) // 10
}
console.log(a) // undefined

Answer 2

Using AsyncStorage directly is too complicated. Maybe you can consider using react-native-easy-app . Through it, you can access AsyncStorage in the form of assignment and value, and it supports string, object and boolean data access, Sample project page Storagecontroller.js

  import { XStorage } from 'react-native-easy-app';
  import { AsyncStorage } from 'react-native';
  // or import AsyncStorage from '@react-native-community/async-storage';

   export const RNStorage = {
       token: undefined, 
       isShow: undefined, 
       userInfo: undefined
   };

  const initCallback = () => {

       // From now on, you can write or read the variables in RNStorage synchronously

       // equal to [console.log(await AsyncStorage.getItem('isShow'))]
       console.log(RNStorage.isShow); 

       // equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
       RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 

       // equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
       RNStorage.userInfo = {name: 'rufeng', age: 30}; 
  };

  XStorage.initStorage(RNStorage, AsyncStorage, initCallback);