@react-native-async-storage/async-storage を使うsample

Target (目標)

@react-native-async-storage/async-storage. ← use 🙂
@react-native-community/async-storage ← can’t use anymore (I get an error)

Environment (動作環境)

Expo (version 45.0.8)
React Native (version 0.68.2)
Typescript (version 4.3.5)
Nodejs (version 16)

npm install

Install @react-native-async-storage/async-storage. (@react-native-async-storage/async-storageをインストールします。)
you can use expo for installation. (インストールにはexpoを利用できます。)
expo install @react-native-async-storage/async-storage.

Directory structure (ディレクトリ構成)

[project directory]
├── src
│   ├── components
│   │   └── Storage.tsx
└── App.tsx

Sample code (サンプルコード)

Display the saved data when the screen is displayed. (画面を表示させた時に、保存したデータを表示させます。)
Also, when the button is pressed, the saved data is displayed. (また、ボタンを押したときに、保存したデータを表示させます。)

Main screen code (メイン画面のコード)

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {storeData, getData} from './src/components/Storage';

export default function App() {
  const [textA, setTextA] = useState("");
  const [jsonA, setJsonA] = useState<any>({});
  let data_:any = {};
  let obj:any = {};

  useEffect( () => {
    (async() => {
      const aaa = {"aaa": "5555"};  // 保存するデータ
      await storeData("dataA", aaa) // データを保存する
      data_ = await getData("dataA")  // 保存されたデータを取得する
      console.log("dataA ... " + JSON.stringify(data_))
      obj = JSON.parse(data_);
      console.log("obj.aaa ... " + obj.aaa)
      setJsonA(JSON.parse(data_))
    })()
  }, []);

  const buttonPush = async() => {
    data_ = await getData("dataA") // データを取得する
    console.log("dataA ... " + JSON.stringify(data_)) 
    console.log("dataA ... " + data_.aaa) // ここは、undefinedになる。JSON.parseしていないのが原因。
    const obj = JSON.parse(data_); // JSON.parseする
    setTextA(obj.aaa)
  }

  return <>
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>最初に画面を読み取った時にデータを取得する : {jsonA.aaa}</Text>
      <Text>ボタンを押すことでデータを取得する:{textA}</Text>
      <TouchableOpacity style={styles.button} onPress={() => buttonPush()}>
        <Text style={{textAlign: 'center'}}>ボタン</Text>
      </TouchableOpacity>
    </View>
  </>; 
}

const styles = StyleSheet.create({
  button: {
    borderColor: 'black', 
    borderWidth: 1, 
    borderRadius: 10, 
    margin: 20, 
    padding: 10, 
    width: '50%', 
    backgroundColor: 'white',
    shadowColor: "gray",
    shadowOffset: {
      height: 5,
      width: 5
    },
    shadowRadius: 2,
    shadowOpacity: 0.5,
  }
})

components of storage (storageのコンポーネント)

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

// データを保存する
export const storeData = async (key:string, value:any) => {
  try {
    //const jsonValue = JSON.stringify(value)
    //await AsyncStorage.setItem('@storage_Key', jsonValue)
    await AsyncStorage.setItem(key, JSON.stringify(value))
  } catch (e) {
    // saving error
  }
}

// 保存したデータを取得する
export const getData = async (key:string) => {
  try {
    const value = await AsyncStorage.getItem(key)
    if(value !== null) {
      console.log("getData " + key + " ... " + value);
    }
    return value
  } catch(e) {
    // error reading value
    return
  }
}
Happily, Happily (めでたし、めでたし)