AsyncStorage not storing data and subsequently does not retrieve data - reactjs

Question

I am using expo and react-native
I am trying to use AsyncStorage to save 3 values in persistent storage
so I can get it from anywhere in the app,
but asyncstorage is not saving or retrieving,
I have rewritten the code several times and several diffrent ways and have tried a few tutorials, nothing works,
so here is the code for the page where i save the data (Login.js)
import React, { useState} from 'react'
import { View, Text,TextInput ,Button,SafeAreaView,Image,} from 'react-native'
import { ProgressDialog,Dialog } from 'react-native-simple-dialogs';
import AsyncStorage from '#react-native-community/async-storage';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
function Login ({navigation}){
const[alerted,isalerted]=useState(false)
const[authError,setAuthError]=useState(false)
const[accInactive,isAccInactive]=useState(false)
const[loginFail,didLoginFail]=useState(false)
const[login,didLogin]=useState(false)
const[email,setemail]=useState(email)
const[ClientID,setClientID]=useState(ClientID)
const[Password,setPassword]=useState(Password)
Here I am Trying to set the items for Asyncstorage
function LoginButton () {
AsyncStorage.setItem("MyEmail",email)
AsyncStorage.setItem("MyPassword",Password)
AsyncStorage.setItem("MyClientID",ClientID)
fetch('https://www.SITE.co.za/app-login.asp?ClientID='+ClientID+'&Username='+email+'&Pwd='+Password)
.then((response) => response.json())
.then((responseJson) => {
//Successful response from the API Call
if (JSON.stringify(responseJson).includes("Login Success")){
{isalerted(true),didLogin(false),isLoggedIn('Yes')}
}
else if (JSON.stringify(responseJson).includes("No Authentication Details Received"))
{
{setAuthError(true)}
}
else if (JSON.stringify(responseJson).includes("Account Not Active"))
{
{isAccInactive(true)}
}
else if (JSON.stringify(responseJson).includes("Login Details Incorrect"))
{
{didLoginFail(true)}
}
})
.catch((error) => {
console.error(error);
});
}
function navButton(){
navigation.navigate('Dashboard')
isalerted(false)
}
return (
<KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
<SafeAreaView>
<ProgressDialog
visible={didLogin}
activityIndicatorColor="#4994CF"
activityIndicatorSize="large"
animationType="slide"
title="Logging in"
message="Please, wait..."
/>
<Dialog
visible={alerted}
onTouchOutside={''} >
<View>
<Text style={{color:'green',fontSize:20, marginBottom:10 ,textAlign:"center"}}>Login Success</Text>
<Button
title="Continue To Dashboard"
onPress={navButton}
/>
</View>
</Dialog>
<Dialog
visible={authError}
onTouchOutside={''} >
<View>
<Text style={{color:'red',fontSize:20, marginBottom:10 ,textAlign:"center"}}>No Authentication Details Received</Text>
<Button
title="OK"
onPress={ ()=>setAuthError(false)}
/>
</View>
</Dialog>
<Dialog
visible={accInactive}
onTouchOutside={''} >
<View>
<Text style={{color:'red',fontSize:20, marginBottom:10 ,textAlign:"center"}}>Account Not Active</Text>
<Button
title="OK"
onPress={ () =>isAccInactive(false)}
/>
</View>
</Dialog>
<Dialog
visible={loginFail}
onTouchOutside={''} >
<View>
<Text style={{color:'red',fontSize:20, marginBottom:10 ,textAlign:"center"}}>Login Details Incorrect</Text>
<Button
title="OK"
onPress={()=> didLoginFail(false)}
/>
</View>
</Dialog>
<View style={{flexDirection:"row"}}>
<Image source={{uri: 'https://www.SITEe.co.za/images/smartpractice-logo-02.png'}}
style={{marginTop:35,paddingTop:10
, height: 80,width:360,flexWrap:'wrap',resizeMode:"contain" }} />
<Text style={{textAlign:'center',color:"#4994CF", marginTop:35}}>Beta</Text>
</View>
<View style={{width:'95%',alignContent:'center',marginLeft:10}}>
<Text style={{fontSize:20,color:'grey'}}>Welcome to the SmartPractice Beta App,
Please Login below with your SmartPractice login Details
</Text>
</View>
<View style={{marginTop:10,alignItems:"center"}}>
<View style={styles.Label}>
<Text style={styles.LabelText}>Email</Text>
</View>
<TextInput onChangeText={(text)=>setemail(text)} autoCompleteType='email' placeholder="Email" style={{width:'95%',height:40,backgroundColor:'#d8d8d8',marginBottom:3, paddingHorizontal: 10,marginTop:5}}/>
<View style={styles.Label}>
<Text style={styles.LabelText}>Password</Text>
</View>
<TextInput onChangeText={(text)=>setPassword(text)} autoCompleteType="password" secureTextEntry={true} placeholder="Password" style={{width:'95%',height:40,backgroundColor:'#d8d8d8',marginBottom:3, paddingHorizontal: 10,marginTop:5}}/>
<View style={styles.Label}>
<Text style={styles.LabelText}>ClientID</Text>
</View>
<TextInput onChangeText={(text)=>setClientID(text)} keyboardType="numeric" placeholder="ClientID" style={{width:'95%',height:40,backgroundColor:'#d8d8d8',marginBottom:3, paddingHorizontal: 10,marginTop:5}}/>
<View style={{marginTop:5,width:'95%'}}>
<View style={{width:'95%',alignContent:'center',marginLeft:10,marginBottom:10}}>
<Text style={{fontSize:15,color:'grey'}}>ClientID : Log into Smartpractice on the internet and use the 4 digit number at the end of your URL (internet Address) of your login screen
</Text>
</View>
<Button
title="Save"
onPress={LoginButton}
/>
</View>
</View>
</SafeAreaView>
</KeyboardAwareScrollView>
);
}
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop:5
},
Label: {
backgroundColor:'#A6A5A4',
color:"white",
textAlign: "center",
marginTop:2,
fontSize: 15,
width:'100%',
},
alertmessage:{
color:'green'
},
LabelText: {
backgroundColor:'#A6A5A4',
color:"white",
textAlign: "center",
fontSize: 20,
},
};
export default Login;
The here is where I am trying to retrieve some of the data (Dashboard.js)
import React, {Component } from 'react'
import { View, Text,Image,TouchableOpacity,StyleSheet,SafeAreaView,} from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import AsyncStorage from '#react-native-community/async-storage';
function Dashboard ({navigation}){
let MyClientID = AsyncStorage.getItem("MyClientID")
console.log(global.mail)
return (
<KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
<SafeAreaView style={styles.container}>
<View style={{flexDirection:"row"}}>
<Image source={{uri: 'https://www.site.co.za/images/smartpractice-logo-02.png'}}
style={{marginTop:5,paddingTop:10
, height: 80,width:360,flexWrap:'wrap',resizeMode:"contain" }} />
<Text style={{textAlign:'center',color:"#4994CF", marginTop:35}}>Beta</Text>
</View>
<Image source={{uri: 'https://www.site.co.za/images/logos/'+MyClientID+'/main-dashboard-logo.png'}}
style={{marginTop:5,paddingTop:10
, height: 70,width:'100%',flexWrap:'wrap',resizeMode:"contain",marginLeft:5 }} />
<View style={{justifyContent:"center", marginTop:6}}>
<Text style={styles.DateLabel}>Description</Text>
</View>
<TouchableOpacity style={styles.ImageButton}
onPress={() => navigation.navigate('Incidental Time')}
>
<Image style={{flexWrap:'wrap',resizeMode:"contain",maxHeight:120,maxWidth:120 }} tintColor='#4994CF' source={require('../../icons/time_log.png')} />
<Text style={styles.TextStyle}>Time Log</Text>
</TouchableOpacity>
</SafeAreaView>
</KeyboardAwareScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textInput: {
backgroundColor:'#A6A5A4',
color:"white",
textAlign: "center",
marginTop:5,
fontSize: 20,
marginBottom:5
,marginLeft:1
},
DateLabel: {
backgroundColor:'#A6A5A4',
color:"white",
textAlign: "center",
marginTop:2,
fontSize: 20,
paddingLeft:140,
paddingRight:140,
width:'100%',
marginBottom:10
},
ImageButton: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
TextStyle:{
color:"grey"
}
});
export default Dashboard;
I have tried setting the items in a useeffect wrapping the values in the setitems in STRING()
tried making functions and const with async attached and the await before the set/getitem
I have check SO for hours and none of the answers or questions have helped me with this
I seriously dont know what I am doing wrong
I followed the asynstorage docs and even copying the code from the docs does not work
I dont get errors, Its been 2 days of struggling with something as simple as local storage
Please help

Answer 1

Both getItem and setItem of AsyncStorage are Promise so you need to use await or callback.
For setItem, current usage is okay but for getItem, it is essential.
You also need to use getItem in useEffect and make MyClientID as a state.
Try the following code instead of your Dashborad.js:
import React, {Component} from 'react';
import {
View,
Text,
Image,
TouchableOpacity,
StyleSheet,
SafeAreaView,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import AsyncStorage from '#react-native-community/async-storage';
function Dashboard({navigation}) {
const [MyClientID, setMyClientID] = useState('');
useEffect(() => {
AsyncStorage.getItem('MyClientID').then((myClientID) => {
setMyClientID(myClientID);
});
}, []);
console.log(global.mail);
return (
<KeyboardAwareScrollView keyboardShouldPersistTaps="handled">
<SafeAreaView style={styles.container}>
<View style={{flexDirection: 'row'}}>
<Image
source={{
uri: 'https://www.site.co.za/images/smartpractice-logo-02.png',
}}
style={{
marginTop: 5,
paddingTop: 10,
height: 80,
width: 360,
flexWrap: 'wrap',
resizeMode: 'contain',
}}
/>
<Text style={{textAlign: 'center', color: '#4994CF', marginTop: 35}}>
Beta
</Text>
</View>
<Image
source={{
uri:
'https://www.site.co.za/images/logos/' +
MyClientID +
'/main-dashboard-logo.png',
}}
style={{
marginTop: 5,
paddingTop: 10,
height: 70,
width: '100%',
flexWrap: 'wrap',
resizeMode: 'contain',
marginLeft: 5,
}}
/>
<View style={{justifyContent: 'center', marginTop: 6}}>
<Text style={styles.DateLabel}>Description</Text>
</View>
<TouchableOpacity
style={styles.ImageButton}
onPress={() => navigation.navigate('Incidental Time')}>
<Image
style={{
flexWrap: 'wrap',
resizeMode: 'contain',
maxHeight: 120,
maxWidth: 120,
}}
tintColor="#4994CF"
source={require('../../icons/time_log.png')}
/>
<Text style={styles.TextStyle}>Time Log</Text>
</TouchableOpacity>
</SafeAreaView>
</KeyboardAwareScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textInput: {
backgroundColor: '#A6A5A4',
color: 'white',
textAlign: 'center',
marginTop: 5,
fontSize: 20,
marginBottom: 5,
marginLeft: 1,
},
DateLabel: {
backgroundColor: '#A6A5A4',
color: 'white',
textAlign: 'center',
marginTop: 2,
fontSize: 20,
paddingLeft: 140,
paddingRight: 140,
width: '100%',
marginBottom: 10,
},
ImageButton: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
TextStyle: {
color: 'grey',
},
});
export default Dashboard;

Answer 2

Not related to your Query but to be honest, based from my experience, Expo is the last thing you wanna use in your project. Especially if you'll be introducing Native dependencies later.
I know you can use ExpoKit then, but still... Don't use Expo
Instead of KeyboardAwareScrollView you can use Content from NativeBase.
For your query, all methods in AsyncStorage are Asynchronous. So remember to use await to get your values
async function fetchLocal(){
const persisted = await AsyncStorage.getItem("persisted");
if(persisted){
console.log(JSON.parse(persisted)); // Oh! the value for these persisted keys needs to be a string, so make sure to String()|.toString()|JSON.stringify objects you wanna serialize.
}
}