React Native AsyncStorage : blank page error

Question

I'm trying to save my data locally with AsyncStorage but there seems to be an issue when I use getData

const storeData = async (value: string) => {
  //storing data to local storage of the device
  try {
    await AsyncStorage.setItem("@storage_Key", value);
  } catch (e) {}
};
const getData = async () => {
  try {
    const value = await AsyncStorage.getItem("@storage_Key");
    if (value !== null) {
      // value previously stored
    }
  } catch (e) {}
};

...

<View>
            <TextInput
              editable
              value={value}
            />
            {storeData(value)}
            {getData()}
</View>

I thought I would have my value back but I got a blank page. Any idea of how to use AsyncStorage ? I used https://react-native-async-storage.github.io/async-storage/docs/usage/ .

Answer 1

Instead of calling storeData function in the return, you should bind your async storage function to the textinput component. Below is an example code on how to use it.

// AsyncStorage in React Native to Store Data in Session
// https://aboutreact.com/react-native-asyncstorage/

// import React in our code
import React, { useState } from 'react';

// import all the components we are going to use
import {
  SafeAreaView,
  StyleSheet,
  View,
  TextInput,
  Text,
  TouchableOpacity,
} from 'react-native';

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

const App = () => {
  // To get the value from the TextInput
  const [textInputValue, setTextInputValue] = useState('');
  // To set the value on Text
  const [getValue, setGetValue] = useState('');

  const saveValueFunction = () => {
    //function to save the value in AsyncStorage
    if (textInputValue) {
      //To check the input not empty
      AsyncStorage.setItem('any_key_here', textInputValue);
      //Setting a data to a AsyncStorage with respect to a key
      setTextInputValue('');
      //Resetting the TextInput
      alert('Data Saved');
      //alert to confirm
    } else {
      alert('Please fill data');
      //alert for the empty InputText
    }
  };

  const getValueFunction = () => {
    //function to get the value from AsyncStorage
    AsyncStorage.getItem('any_key_here').then(
      (value) =>
        //AsyncStorage returns a promise so adding a callback to get the value
        setGetValue(value)
      //Setting the value in Text
    );
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text style={styles.titleText}>
          AsyncStorage in React Native to Store Data in Session
        </Text>
        <TextInput
          placeholder="Enter Some Text here"
          value={textInputValue}
          onChangeText={(data) => setTextInputValue(data)}
          underlineColorAndroid="transparent"
          style={styles.textInputStyle}
        />
        <TouchableOpacity
          onPress={saveValueFunction}
          style={styles.buttonStyle}>
          <Text style={styles.buttonTextStyle}> SAVE VALUE </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={getValueFunction} style={styles.buttonStyle}>
          <Text style={styles.buttonTextStyle}> GET VALUE </Text>
        </TouchableOpacity>
        <Text style={styles.textStyle}> {getValue} </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: 'white',
  },
  titleText: {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingVertical: 20,
  },
  textStyle: {
    padding: 10,
    textAlign: 'center',
  },
  buttonStyle: {
    fontSize: 16,
    color: 'white',
    backgroundColor: 'green',
    padding: 5,
    marginTop: 32,
    minWidth: 250,
  },
  buttonTextStyle: {
    padding: 5,
    color: 'white',
    textAlign: 'center',
  },
  textInputStyle: {
    textAlign: 'center',
    height: 40,
    width: '100%',
    borderWidth: 1,
    borderColor: 'green',
  },
});

export default App;