ItayLador
August 17, 2022
283 views
0 votes
2 Answers

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?

Answers

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
  }
};

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',

})

Please signup or login to give your own answer.

Click here to cancel reply.

Problem when trying to use AsyncStorage with react native

Answers

Solution

Full Code

Official Functions.

Setting Values

Getting Values