How can I store multiple data using asyncstorage in React Native? - react-native

Question

I have used the asyncstorage for storing the data but I think it's storing only one entry at a time that's because when I tried to print the value it only showed the last signup details and the too only on console instead of screen.
What I want:
Store data of all the users.
Print all the details on the screen.
Due to formatting issue I was not able to attach the code. Please check my code on this link.

Answer 1

Async storage isnt really meant for state management. Its for having data that will persist between app opens and closes. Some examples of this is using it to save a user auth token, or to keep track of the user defined settings.
Here's a quick demo
import { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { TextInput, Button } from 'react-native-paper';
import Constants from 'expo-constants';
import AsyncStorage from '#react-native-async-storage/async-storage';
const someDataKey = '#someData';
export default function App() {
const [someData, setSomeData] = useState({
token: null,
userId: null,
expiresAt: '',
});
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const submit = () => {
// fake server call to get token
setSomeData({
token:getRandomChars(50),
userId:Math.floor(Math.random()*1000)+1,
expiresAt:Date.now()+60*60*24*4
})
};
useEffect(() => {
const getData = async () => {
const dataAsString = await AsyncStorage.getItem(someDataKey);
if (dataAsString) setSomeData(JSON.parse(someData));
};
getData();
}, []);
useEffect(()=>{
AsyncStorage.setItem(someDataKey,JSON.stringify(someData))
},[someData])
return (
<View style={styles.container}>
{!someData.token ? (
<>
<TextInput
value={email}
label="Enter email"
onChangeText={setEmail}
style={styles.input}
dense
/>
<TextInput
value={password}
label="Password"
onChangeText={setPassword}
style={styles.input}
dense
/>
<Button onPress={submit}>Login</Button>
</>
) : (
<>
<Text>Last session retrieved</Text>
<Text>Token:{someData.token}</Text>
<Text>User ID:{someData.userId}</Text>
<Button onPress={()=>{
setSomeData({})
}}>Reset data</Button>
</>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
input: {
marginBottom: 10,
},
});
const getRandomChars = (len=20)=>{
const chars = 'abcdefghijklmnopqrstuvwxyz0123456789'
let str =''
while(str.length <len){
const index = Math.floor(Math.random()*chars.length)
str+=chars[index]
}
return str
}
Before the data was saved to storage, reloading the page would show the login form; but once the data is set, the data is retrieved, omitting the login part