How to get the value from Async Storage getData function? - react-native

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

You need to put await before getData like this.
useEffect(() => {
(async()=>{
await getData('username')
console.log('useEffect',await getData('username'))
})();
}, [])

Answer 2

useEffect(() => {
CallMethod()
}, [])
const CallMethod = async() =>{
await getData('username')
}