Need help storing and getting data from Asyncstorage React Native

Question

Hey I'm new to React Native so I'm sorry if this is a stupid question. I'm trying to store the email input during the login so that I can get it on a different page but when I console log the value I get from Asyncstorage I get the following:

Promise {
  "_U": 0,
  "_V": 0,
  "_W": null,
  "_X": null,
}

Here is the relevant code where I store the value:

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (email) => {
    try {
      await AsyncStorage.setItem('loginEmail', email)
    } catch (e) {
      console.log(e);
    }
  }

 <Form
          initialValues={{ email: "", password: "" }}
          onSubmit={storeData, handleSubmit}
          validationSchema={validationSchema}
        >
          <ErrorMessage error="Invalid email and/or password." visible={loginFailed} />
          <FormField
            autoCapitalize="none"
            autoCorrect={false}
            icon="email"
            keyboardType="email-address"
            name="email"
            placeholder="Email"
            textContentType="emailAddress"
          />
          <FormField
            autoCapitalize="none"
            autoCorrect={false}
            icon="lock"
            name="password"
            placeholder="Password"
            secureTextEntry
            textContentType="password"
          />
          <SubmitButton title="Login" />
 </Form>

And here this is where I'm trying to get the value from Asyncstorage on a different file:

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('loginEmail')
    if(value !== null) {
      // value previously stored
      return value;
    }
  } catch(e) {
    // error reading value
    console.log(e)
  }
}

function AccountScreen({ navigation }) {
  const { user, logOut } = useAuth();

  const emailInfo = getData();

  console.log(emailInfo);

If there's any info I need to add or clarify please let me know.

try this https://stackoverflow.com/a/64155553/9444013 – shammi Dec 06 '21 at 17:40 — shammi, Dec 06 '21 at 17:40

score 0 · Answer 1 · answered Dec 07 '21 at 04:46

Your getData is an Async function. It returns a promise. So to get data from the promise you can use then function on getData or you can use await keyword like this:

Using then

function AccountScreen({ navigation }) {
  const { user, logOut } = useAuth();

  getData().then((emailInfo) => {
    console.log(emailInfo);
  })
}

Using await

// To use await keyword in your function, your function should be async
async function AccountScreen({ navigation }) {
  const { user, logOut } = useAuth();

  const emailInfo = await getData();

  console.log(emailInfo);
}

Need help storing and getting data from Asyncstorage React Native

1 Answers1