Amplify Gen2 + React Native(Expo)で環境構築する

結論（注意部分）

• Amplify Gen2からExpo Goはサポートされなくなった
• npx expo prebuild をする必要あり
• npx expo runでローカル実行
  • npx expo startをするとAmplifyが動かない
    • Cognitoが認証エラー出て進まなかった
      

この記事は、公式Docを自分的にわかりやすくまとめたものです。
https://docs.amplify.aws/react-native/start/quickstart/#create-backend

環境

• Amplify Gen2
• Apple M2 Sonoma　ver 14.3.1（23D60）

create

npx create-expo-app my_amplify_app -t expo-template-blank-typescript
cd my_amplify_app

npx expo prebuild
npm create amplify@latest

npx ampx sandbox

npm install

npm add \
  @aws-amplify/ui-react-native \
  @aws-amplify/react-native \
  aws-amplify \
  @react-native-community/netinfo \
  @react-native-async-storage/async-storage \
  react-native-safe-area-context \
  react-native-get-random-values \
  react-native-url-polyfill

npx pod-install

実行

npx expo run

５分以上かかるので1~2曲聞いておく。

注意

npx expo start

npx expo startを使うと、AmplifyのCognitoの画面で「An unknown error has occurred」というエラーが出るので、npx expo runを使うようにする。

補足

ちなみに、npx expo startだとExpo Goでアプリが立ちあがり（Amplify Gen2に対応してない）、npx expo runだとネイティブinstall?されてAmpligyを正常に使うことができる。下に画像を貼るので、今Expo Goでアプリが起動しているのか判別する参考にしてください。

npx expo runした時の画面(native install?)

npx expo startした時の画面(Expo Goを使った実行)

以上でローカルでReact Native＋Amplify Gen2が動くところまで行きました。

参考

https://docs.amplify.aws/react-native/start/quickstart/#create-backend

追記

「公式Docsに起動コマンド載ってるやつ」
「起動コマンドはDocsに書けばいいのに…」
「もうエラーで悩む人はいないじゃない」

2024/05/30