Get save data in different page by async saveToStorage(userData) - react-native

Question

I am creating a react native app and doing the login and profile page. I have used the "async saveToStorage(userData)" for save the user data. Now i want to get the same data in the profile page.
I want to use this
getData = async () => {
try {
const value = await AsyncStorage.getItem('#storage_Key')
if(value !== null) {
// value previously stored
}
} catch(e) {
// error reading value
}
}
But how to use this in my profile page to Show this.
I saved this in the login page
async saveToStorage(userData){
if (userData) {
await AsyncStorage.setItem('user', JSON.stringify({
isLoggedIn: true,
authToken: userData.auth_token,
id: userData.user_id,
name: userData.user_login
})
);
return true;
}
return false;
}
And in the Profile page i have to display the name only. So how can use that.
import AsyncStorage from '#react-native-community/async-storage';
export default class Profile extends Component {
constructor(props){
super(props)
this.state={
userEmail:'',
userPassword:'',
}
}
var uservalue = await AsyncStorage.getItem('user');
home() {
Actions.home()
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}></View>
<Image style={styles.avatar} source={{uri: 'https://bootdey.com/img/Content/avatar/avatar6.png'}}/>
<View style={styles.body}>
<View style={styles.bodyContent}>
<Text style={styles.name}>Robert Vadra</Text>
<Text style={styles.info}>Total Token: 30 {uservalue.name}</Text>
<Text style={styles.description}>Lorem ipsum dolor sit amet, saepe sapientem eu nam. Qui ne assum electram expetendis, omittam deseruisse consequuntur ius an,</Text>
<TouchableOpacity style={styles.buttonContainer} onPress={this.home} >
<Text style={styles.buttonText}>Play Now</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
In the place of "Robert Vadra", i want to display the stored value in it. Please help in this. Thanks in advance.
My Login page
export default class LoginForm extends Component<{}> {
constructor(props){
super(props)
this.state={
isLoggedIn:false,
userEmail:'',
userPassword:'',
}
}
login = () =>{
this.state.validating = true;
const {userEmail,userPassword} = this.state;
let reg = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
if(userEmail==""){
this.setState({email:'Please enter Email address'})
}
else if(reg.test(userEmail) === false)
{
this.setState({email:'Email is Not Correct'})
return false;
}
else if(userPassword==""){
this.setState({email:'Please enter password'})
}
else{
fetch('http://mojse.com/wetest/userlogin.php',{
method:'post',
header:{
'Accept': 'application/json',
'Content-type': 'application/json'
},
body:JSON.stringify({
email: userEmail,
password: userPassword
})
})
.then((response) => response.json())
.then((responseJson)=>{
let data = responseJson.data;
if (this.saveToStorage(data)){
/* Redirect to home page */
Actions.profile()
} else {
alert("Wrong Login Details");
}
})
.catch((error)=>{
console.error(error);
});
}
Keyboard.dismiss();
}
render(){
return(
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor = "#ffffff"
selectionColor="#fff"
keyboardType="email-address"
onChangeText={userEmail => this.setState({userEmail})}
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
secureTextEntry={true}
placeholderTextColor = "#ffffff"
ref={(input) => this.password = input}
onChangeText={userPassword => this.setState({userPassword})}
/>
<TouchableOpacity style={styles.button} onPress={this.login} >
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
)
}
async saveToStorage(userData){
if (userData) {
await AsyncStorage.setItem('user', JSON.stringify({
isLoggedIn: true,
authToken: this.state.authToken,
id: this.state.userid,
name: "KKKKKK"
})
);
return true;
}
return false;
}
}

Answer 1

You can get user data in the componentDidMount and save it to a state like this:
constructor(props){
super(props)
this.state={
userEmail:'',
userPassword:'',
userName:'',
}
}
componentDidMount() {
AsyncStorage.getItem('user').then((uservalue)=>{
uservalue = JSON.Parse(uservalue)
this.setState({userName: uservalue.name})
})
}
Now, you can use userName like this:
<Text style={styles.name}>{this.state.userName}</Text>
EDIT
First, please check that server response is correct ( maybe console.log(data) before save). Second, you are calling an async function so you have to wait until save function finish its work. also in save function, double check your data. my suggestion:
fetch('http://mojse.com/wetest/userlogin.php',{
method:'post',
header:{
'Accept': 'application/json',
'Content-type': 'application/json'
},
body:JSON.stringify({
email: userEmail,
password: userPassword
})
})
.then((response) => response.json())
.then(async (responseJson) => { // this is an async function
let data = responseJson.data;
console.log(data) // check and validate data correction
let res = await this.saveToStorage(data)
if (res){
/* Redirect to home page */
Actions.profile()
} else {
alert("Wrong Login Details");
}
})
.catch((error)=>{
console.error(error);
});
saveToStorage = async (userData) => {
if (userData) {
let model = { // full model with received data. this.state. authToken is not valid because we do not have a state called authToken.
isLoggedIn: true,
authToken: userData.authToken,
id: userData.userid,
name: userData.name
}
await AsyncStorage.setItem('user', JSON.stringify(model))
return true;
}
return false;
}
this is what i thik may be wrong and i did not test it. double check your code please.
I hope this can help you.