Problem when trying to use AsyncStorage with react native

Question

I am new to react native and I tried to make my first app. I am in the process of making the login/signup pages. I am trying to use AsyncStorage to make the app remember the user. I tested out this code-

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView  } from 'react-native';
import React, {useState, useEffect} from 'react'
import { TextInput } from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';








export default function Login(props) {

  const message = props.navigation.getParam('message', null)
  const [ username, setUsername ] = useState("")
  const [ password, setPassword ] = useState("")

  setStringValue = async(value, user) => {
    try {
      
      await AsyncStorage.setItem( user, value)
    } catch(e){
      console.log(e)
    }
  }

  const getData = async (user) => {
    try {
      const value = await AsyncStorage.getItem(user)
      if(value !== null) {
        return value
      } else {
        return false
      }
    } catch(e) {
      console.log(e)
    }
  }

  

  const log = () => {

    fetch(`http://192.168.5.223:8000/home/login/`, {
      method: 'POST',
      headers: {
          "Content-Type": 'application/json'
         },
      body: JSON.stringify({ username: username, password: password}),
  })
  .then( res => res.json())
  .then( res => {
    console.log(res)
    
    if (res.valid === true){

      setStringValue(username, username)

      let ch = getData(username)

      console.log(ch)
      

      
      
      
      
      if (res.set === true){
        props.navigation.navigate("Home", {"user": username})
      } else {
        props.navigation.navigate("Profile", {"user": username})
      }
      
    } else {
      props.navigation.navigate("Login", {'message': "username/password are incorrect"})
    }
    

  })
  .catch( error => console.log(error))
  



  



  }

  const sign = () => {

    props.navigation.navigate("Signup")

  }

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scroll} >
      <View style={styles.main}>
      <Text style={styles.error}>{message}</Text>  
      <Text style={styles.label}>
        Username: 
      </Text>
      <TextInput style={styles.input} placeholder="Username" 
        onChangeText={ text => setUsername(text)} value={username}
        autoCapitalize={'none'}
         />
      
      <Text style={styles.label}>Password:</Text>
      <TextInput style={styles.input} placeholder="Password" onChangeText={ text => setPassword(text)}
        value={password} secureTextEntry={true} autoCapitalize={'none'}
      />

      
      <Button onPress={ () => log()} title="Login"></Button>
      </View>
      </ScrollView>
      <View style={styles.footer}>
        <Button onPress={ () => sign()} title="Don't have an acount? Sign up now" />
      </View>
      <StatusBar style="auto"/>
    </View>


  )


}

Login.navigationOptions = screenProps => ({
  headerLeft: () => null,
  gestureEnabled: false,
  headerStyle: {
    backgroundColor: 'black'
  },
  headerTintColor: 'white',

})

But the AsyncStorage logged -

Promise {

"_U": 0,

"_V": 0,

"_W": null,

"_X": null,

} How can I get this to work?

Without running the code, is there a reason you are not awaiting the fetch call? const log = async() => { await fetch /*...*/ }).then(...etc...)? — DSMTurboAWD
– DSMTurboAWD, Commented Aug 17, 2022 at 1:04
The object you're getting back is a pending promise. Async code has to be awaited or you can use .then syntax — Abe
– Abe, Commented Aug 17, 2022 at 1:25
You can find the solution here: stackoverflow.com/questions/64906396/… — limco
– limco, Commented Aug 17, 2022 at 2:32

poojan bhatt · Accepted Answer · 2022-08-17 09:10:11Z

getData and setStringValue are asynchronous functions. So you have to put await before calling them and also mark callback function as async.

so Please try this log function

const log = () => {

    fetch(`http://192.168.5.223:8000/home/login/`, {
        method: 'POST',
        headers: {
            "Content-Type": 'application/json'
        },
        body: JSON.stringify({ username: username, password: password }),
    })
        .then(res => res.json())
        .then( async (res) => {
            console.log(res)

            if (res.valid === true) {

                await setStringValue(username, username)

                let ch = await getData(username)

                console.log(ch)

                if (res.set === true) {
                    props.navigation.navigate("Home", { "user": username })
                } else {
                    props.navigation.navigate("Profile", { "user": username })
                }

            } else {
                props.navigation.navigate("Login", { 'message': "username/password are incorrect" })
            }

        })
        .catch(error => console.log(error))

}

Full Code

import { StatusBar } from 'expo-status-bar'
import React, { useState, useEffect } from 'react'
import { TextInput } from 'react-native-gesture-handler';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { StyleSheet, Text, View, FlatList, Image, Button, Pressable, ScrollView } from 'react-native';


export default function Login(props) {

    const message = props.navigation.getParam('message', null)
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")

    const setStringValue = async (value, user) => {
        try {

            await AsyncStorage.setItem(user, value)
        } catch (e) {
            console.log(e)
        }
    }

    const getData = async (user) => {
        try {
            const value = await AsyncStorage.getItem(user)
            if (value !== null) {
                return value
            } else {
                return false
            }
        } catch (e) {
            console.log(e)
        }
    }

    const log = () => {

        fetch(`http://192.168.5.223:8000/home/login/`, {
            method: 'POST',
            headers: {
                "Content-Type": 'application/json'
            },
            body: JSON.stringify({ username: username, password: password }),
        })
            .then(res => res.json())
            .then(async (res) => {
                console.log(res)

                if (res.valid === true) {

                    await setStringValue(username, username)

                    let ch = await getData(username)

                    console.log(ch)

                    if (res.set === true) {
                        props.navigation.navigate("Home", { "user": username })
                    } else {
                        props.navigation.navigate("Profile", { "user": username })
                    }

                } else {
                    props.navigation.navigate("Login", { 'message': "username/password are incorrect" })
                }

            })
            .catch(error => console.log(error))

    }

    const sign = () => {

        props.navigation.navigate("Signup")

    }

    return (
        <View style={styles.container} >
            <ScrollView style={styles.scroll} >
                <View style={styles.main}>
                    <Text style={styles.error}> {message} </Text>
                    < Text style={styles.label} >
                        Username:
                    </Text>
                    <TextInput style={styles.input} placeholder="Username"
                        onChangeText={text => setUsername(text)} value={username}
                        autoCapitalize={'none'}
                    />

                    <Text style={styles.label}> Password: </Text>
                    <TextInput style={styles.input} placeholder="Password" onChangeText={text => setPassword(text)}
                        value={password} secureTextEntry={true} autoCapitalize={'none'}
                    />


                    <Button onPress={() => log()} title="Login" > </Button>
                </View>
            </ScrollView>
            < View style={styles.footer} >
                <Button onPress={() => sign()} title="Don't have an acount? Sign up now" />
            </View>
            < StatusBar style="auto" />
        </View>
    )
}

Login.navigationOptions = screenProps => ({
    headerLeft: () => null,
    gestureEnabled: false,
    headerStyle: {
        backgroundColor: 'black'
    },
    headerTintColor: 'white',

})

I get "Unexpected reserved word 'await'." when I put await in front of the 'ch' variable and the setStringValue(...)

Shameel Uddin · Accepted Answer · 2022-08-17 02:27:52Z

A quick tip.

Whenever you receive a output like this:

Promise {

"_U": 0,

"_V": 0,

"_W": null,

"_X": null,
}

This means that the Promise has not been properly handled.

Try to use async/await to get the proper output out of the promise.

Solution

let ch = await getData(username)

but you will need to put async before the function

Full Code

const log = async () => {
  fetch(`http://192.168.5.223:8000/home/login/`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username: username, password: password }),
  })
    .then((res) => res.json())
    .then((res) => {
      console.log(res);

      if (res.valid === true) {
        setStringValue(username, username);

        let ch = await getData(username);

        console.log(ch);

        if (res.set === true) {
          props.navigation.navigate("Home", { user: username });
        } else {
          props.navigation.navigate("Profile", { user: username });
        }
      } else {
        props.navigation.navigate("Login", {
          message: "username/password are incorrect",
        });
      }
    })
    .catch((error) => console.log(error));
};

Official Functions.

Rather than to create your own functions, you can directly use the offifcial functions. Save them in your utils and use them whenever required.

Setting Values

_storeData = async () => {
  try {
    await AsyncStorage.setItem(
      '@MySuperStore:key',
      'I like to save it.'
    );
  } catch (error) {
    // Error saving data
  }
};

Getting Values

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

I get "Unexpected reserved word 'await'." when I put await in front of the 'ch' variable.

Collectives™ on Stack Overflow

Problem when trying to use AsyncStorage with react native

2 Answers 2

2 Comments

Solution

Full Code

Official Functions.

Setting Values

Getting Values

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Solution

Full Code

Official Functions.

Setting Values

Getting Values

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related