React Nativeでreact-native-async-storageを使う

（１）作成のきっかけ

普段はソーシャルワーカーとして障がいをお持ちの方の支援をしており、IT技術を使用して事業所の運営や支援に役立つようなことが実現できたらなと思っています。

以前、モバイルアプリを作成してみたいと思い、アップルストアに年間使用料を払って登録したのですが、なかなか時間がなくて💦これはもったいないなと思い、集中して一カ月ほどreact-nativeを勉強して、なんとかストアに登録することができたので、使用したライブラリについてなんかを書いてみようと思います。

（２）作成したモバイルアプリ

指定難病についての情報にアクセスするためのモバイルアプリです。11月1日に新たに難病が追加されることもあり、実際に難病の方の支援をすることもあるので、自身の勉強のためにも作成してみました。

（３）使った技術

・react-native
・Expo
・react-navigation
・react-native-maps
・react-native-multi-selectbox
・react-native-async-storage

などなどです、react-nativeやExpoの情報はバージョンによって動く動かないがあるので苦労しました。

（３）useContext の値を端末にも保存

タイトルの通り、react-native-async-storageを使用して、useContextでの状態管理の値を端末に保存します

// ./ModesContext"

import React, { createContext, useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";

export const ModesContext = createContext();

export const ModesContextProvider = ({ children }) => {
  const [modes, setModes] = useState("");
  const saveModes = async (value) => {
    try {
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem("@modes-", jsonValue);
    } catch (err) {
      console.log("保存できませんでした", err);
    }
  };

  const loadModes = async () => {
    try {
      const value = await AsyncStorage.getItem("@modes-");
      if (value !== null) {
        setModes(JSON.parse(value));
      }
    } catch (err) {
      console.log("読み込めませんでした", err);
    }
  };

  const change = (mode) => {
    setModes(mode);
  };

  useEffect(() => {
    loadModes();
  }, []);

  useEffect(() => {
    saveModes(modes);
  }, [modes]);

  return (
    <ModesContext.Provider
      value={{
        modes,
        changeModes: change,
      }}
    >
      {children}
    </ModesContext.Provider>
  );
};

各画面で使うときは

// 包んであげてください
import { ModesContextProvider } from "./ModesContext";
<ModesContextProvider>
 <App>
</ModesContextProvider>

// 各画面で使うときは
import React, { useContext } from "react";
import { ModesContext } from "./ModesContext";

//　値を参照する
const { modes } = useContext(ModesContext);

// 値を変化させる
const { changeModes } = useContext(ModesContext);
changeModes((previousState) => !previousState);

端末に保存されているので次回起動時も設定が継続されます

（４）終わりに

アプリをストアに登録することで達成感がありました、Expoを使うことで簡単にストア登録ができたことは有難かったです。今回は自身の勉強とアプリを登録することを目的としましたが、次回はニーズに合わせたものを作りたいですね。いろいろ考えながら作っている時が一番楽しいですね