AsyncStorageをreact-native-community版に移行する

react nativeにはAsyncStorageというデータの永続化に使用する機能がありますが、今後react nativeのコアから出されてreact-native-community下に移されるみたいです

github.com

そのため将来的にAsyncStorageを使用しているアプリはこのパッケージに移行しないといけないということで、現在仕事で作成しているrnアプリ(0.58.6)に導入してみましたのでそのメモ

install

以下のコマンドでasyncstorageのパッケージを取得します

# Install
yarn add @react-native-community/async-storage

# Link
react-native link @react-native-community/async-storage

先に当時の最新バージョンである0.59.6で動作を確認した時には上記の処理を行えば動作させることができました

Podを使っている場合

仕事で使っているアプリではPodを使っているのでios/Podfileに以下の設定を記述しpod installでライブラリを使用するように設定を行います

pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage

余談

作成中のrnアプリでは上記手順を行うと以下のようなエラーがでました

Loading dependency graph...jest-haste-map: @providesModule naming collision:
  Duplicate module name: react-native
  Paths: /Users/.../App/Finalv2/node_modules/react-native/package.json collides with /Users/.../App/Finalv2/ios/Pods/React/package.json

調べた所stackoverflowで以下の設定をPodfileに追加することで機能するようになりました

pod 'React', :path => '../node_modules/react-native'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

動作

react-native-communityのasyncstorageに変更してもドキュメントを見ている感じであれば、現在のasync storageからなくなっているものが無さそうなのでそのまま動くと思います。

実際に作成中のrnでも試してみましたが以下のようにimport文を書き換えるだけで移行が終了しました

// before
import {AsyncStorage} from 'react-native'

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