Expoで実装したアプリでデータを永続化する（react-native-async-storage編） 📱

blog.kimizuka.org

前回はiOSアプリのみ使える方法を検証しましたが、今回はAndroidアプリやウェブアプリにも対応できる方法を検証します。

実現方法をざっくり調べると、かつては AsyncStorage を使った方法が主流だったようです。

reactnative.dev

しかし、現在は非推奨になっているので、公式ページからのリンクを辿り、ライブラリの選定から始めました。

で、検討の結果、まずは react-native-async-storage を試してみることにしました。

react-native-async-storage.github.io

理由としては、スター数が多いことと、対応しているプラットフォームが一番幅広いことです。
（Android、Expo Go、iOS、macOS、Web、Windowsに対応 ※ 2022年4月現在）

導入方法

今回はExpoで使いたいため、

expo install @react-native-async-storage/async-storage

で導入します。

react-native-async-storage.github.io

ざっくりとした使い方

インポート

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

値の取得

async function getData(): string { // 保存されている値がJSONの場合はパースして使います
  try {
    const value = await AsyncStorage.getItem(key);

    return value;
  } catch (err) {
    console.error(err)
  }

  return '';
}

値の保存

文字列の保存

async function storeData(value: string) {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (err) {
    console.error(err)
  }
}

オブジェクトの保存

async function storeData(value: any) { // 型は適宜設定します
  try {
    const json = JSON.stringify(value);

    await AsyncStorage.setItem(key, json);
  } catch (err) {
    console.error(err)
  }
}

といった感じです。

react-native-async-storage.github.io

実装例

アプリの起動回数を保持したい場合、

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect, useState } from 'react';
import { Text } from 'react-native';

export default function App() {
    const [ count, setCount ] = useState(0);

    useEffect(() => {
      (async () => {
        const count = await AsyncStorage.getItem('count'); // 保存されたcount（文字列）の取得

        setCount(Number(count || 0) + 1); // Numberにキャストしてインクリメント
      })();
    }, []);

    useEffect(() => {
      if (count) { 
        AsyncStorage.setItem('count', String(count)); // Stringにキャストして保存
      }
    }, [count]);

    return <Text>{ `${count}` }</Text>; // countの表示
}