🙆

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

2024/05/30に公開

React Native

結論（注意部分）

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

この記事は、公式Docを自分的にわかりやすくまとめたものです。

環境

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でアプリが起動しているのか判別する参考にしてください。