How to get the value from Async Storage getData function?

Question

I want to store username to local storage using @react-native-async-storage/async-storage in React Native. When I checked through console.log, username was saved successfully but while retrieving the data back to different screen using getData function, It says null. Help me to figure out the issue.

this is my storage.js file where I've kept all the Async Storage functions.

import AsyncStorage from '@react-native-async-storage/async-storage';


const storeData = async (key, value) => {
    try {
        await AsyncStorage.setItem(key, value)
    } catch (e) {
        console.log('Error on saving')
    }
}

const getData = async (key) => {

    try {
        const value = await AsyncStorage.getItem(key)
        if (value !== null) {
            console.log('Promise', value)
            return value
        }
    } catch (e) {
        // error reading value
    }
}

export { storeData, getData };

this is my Log In Screen file

import React, { Component, useState } from 'react';
import { View, Text, Button, ScrollView, TextInput, TouchableHighlight, StyleSheet } from 'react-native';
import * as yup from 'yup'
import { Formik } from 'formik'
import { storeData } from '../utils/storage';

const Login = (props) => {

    const handleLogin = (name) => {
        storeData('username',name)
        props.navigation.navigate('Home')
    }
    
    return (
        <Formik
            initialValues={{
                name: '',
                password: ''
            }}
            onSubmit={values => Alert.alert(JSON.stringify(values))}
            validationSchema={yup.object().shape({
                name: yup
                    .string()
                    .required('Please, provide your name!'),
                password: yup
                    .string()
                    .min(4)
                    .max(10, 'Password should not excced 10 chars.')
                    .required(),
            })}
        >
            {({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
                <ScrollView style={styles.scrollb}>

                    <View style={styles.container}>
                        <Text style={styles.title}>LOGIN PAGE</Text>
                        <Text style={styles.subtitle}>Welcome Back.</Text>
                    </View>

                    <View style={styles.container2}>
                        <TextInput
                            style={styles.tinput}
                            placeholder="Username"
                            value={values.name}
                            onChangeText={handleChange('name')}
                            onBlur={() => setFieldTouched('name')}
                        />
                        {touched.name && errors.name &&
                            <Text style={{ fontSize: 12, color: '#FF0D10' }}>{errors.name}</Text>
                        }
                    </View>
                    <View style={styles.container2}>
                        <TextInput
                            style={styles.tinput}
                            placeholder="Password"
                            value={values.password}
                            onChangeText={handleChange('password')}
                            placeholder="Password"
                            onBlur={() => setFieldTouched('password')}
                            secureTextEntry={true}
                        />
                        {touched.password && errors.password &&
                            <Text style={{ fontSize: 12, color: '#FF0D10' }}>{errors.password}</Text>
                        }
                    </View>

                    <View style={styles.container3}>
                        <TouchableHighlight
                            style={{
                                borderRadius: 10,
                            }}>
                            <Button
                                title="Login"
                                borderRadius={25}
                                containerViewStyle={{ borderRadius: 25 }}
                                buttonStyle={{ width: 145, height: 45, borderRadius: 25 }}
                                accessibilityLabel="Learn more about this button"
                                onPress={() => handleLogin(values.name)}
                                disabled={!isValid}

                            />
                        </TouchableHighlight>
                    </View>

                </ScrollView>
            )}
        </Formik>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 24,
        backgroundColor: "#61dafb",
    },
    container2: {
        flex: 1,
        paddingTop: 14,
        paddingHorizontal: 24,
        backgroundColor: "#61dafb",
    },
    container3: {
        flex: 1,
        paddingTop: 284,
        paddingHorizontal: 34,
        backgroundColor: "#61dafb",
        borderRadius: 40,
    },
    title: {
        marginTop: 16,
        borderRadius: 6,
        backgroundColor: "#61dafb",
        color: "white",
        textAlign: "center",
        fontSize: 50,
        fontWeight: "bold",
    },
    subtitle: {
        borderRadius: 6,
        paddingLeft: 33,
        backgroundColor: "#61dafb",
        color: "white",
        textAlign: "left",
        fontSize: 30,
        fontWeight: '400',
    },
    tinput: {
        height: 50,
        textAlign: "center",
        paddingVertical: 8,
        backgroundColor: "white",
        borderRadius: 27,
    },
    scrollb: {
        backgroundColor: "#61dafb",
    },
});

export default Login;

This is my Home screen file. Where I want to retrieve that username from Login Page via async storage.

import React, { Component, useEffect, useState } from 'react';
import { View, Text, ScrollView, TouchableHighlight, Image, StyleSheet } from 'react-native';
import { getData } from '../utils/storage';

const Home = (props) => {

  const [username, setUsername] = useState('');

  useEffect(() => {
    getData('username')
    console.log('useEffect',getData('username'))
  }, [])

  const CategoriesAr = [
    {
      name: "Business",
      path: "Business",
      imgURL: "https://img.icons8.com/clouds/100/000000/analytics.png",
    },
    {
      name: "Technology",
      path: "Technology",
      imgURL: "https://img.icons8.com/clouds/100/000000/transaction-list.png",
    },
    {
      name: "Science",
      path: "Science",
      imgURL: "https://img.icons8.com/clouds/100/000000/innovation.png",
    },
    {
      name: "Health",
      path: "Health",
      imgURL: "https://img.icons8.com/clouds/100/000000/client-company.png",
    }
  ]

  const GridItem = (gridProps) => {
    const { data } = gridProps;
    return (
      <>
        <TouchableHighlight onPress={() => props.navigation.navigate(data.path)}>
          <View style={styles.card}>
            <View style={styles.header}>
              <Text style={{ fontWeight: "bold", fontSize: 18 }}>{data.name}</Text>
            </View>
            <View style={styles.imgbody}>
              <Image
                style={styles.tinyLogo}
                source={{
                  uri: data.imgURL,
                }}
              />
            </View>
          </View>
        </TouchableHighlight>
      </>

    )
  }

  return (
    <ScrollView style={styles.sclb}>
      <Text style={styles.title}>Hi {username}</Text>
      <View style={styles.containerX}>
        {CategoriesAr.map((item) => <GridItem data={item} />)}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  title: {
    marginTop: 16,
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "white",
    textAlign: "center",
    fontSize: 50,
    fontWeight: "bold",
  },
  containerX: {
    flex: 1,
    flexWrap: "wrap",
    marginTop: 8,
    maxHeight: 400,
    backgroundColor: "#61dafb",

  },
  card: {
    height: 150,
    width: 150,
    backgroundColor: "white",
    alignItems: "center",
    borderRadius: 15,
    elevation: 10,
    padding: 10,
    margin: 22,

  },
  imgbody: {
    paddingTop: 20,
  },
  tinyLogo: {
    height: 90,
    width: 90,
  },
  header: {
    flexDirection: "row",
  },
  sclb: {
    backgroundColor: "#61dafb",
  }
});

export default Home;

Answer 1

useEffect(() => {
     CallMethod()
}, [])
    

const CallMethod = async() =>{
      await getData('username')
}

Answer 2

You need to put await before getData like this.

useEffect(() => {
    (async()=>{
         await getData('username')
         console.log('useEffect',await getData('username'))
    })();
}, [])