Expo React Native TypeScript Firebase v9でユーザー認証 ①【環境構築】

code
2022.11.27

はじめに

こちらの記事は、Expoでネイティブアプリを開発する際に、Firebase Authenticationで使用するFirebase SDKのfirebaseConfigオブジェクトに記載するAPIキーや、データベースのURLなどを.envファイルに記述する方法の備忘録です.

プロジェクトの環境構築についても触れていますが、本題の.envファイルに記述する方法についてだけ確認したい方はこちらへどうぞ.

Version情報

2022/11/28に作成時の情報です. 以下のライブラリのVersionが異なるとうまくいかない可能性があります. エミュレーターのインストールに関する手順は割愛しますので事前に調べてインストールをお願いします.

  • expo: ~47.0.8
  • React Native: 0.70.5
  • React Navigation: ^6.0.14
  • Firebase: 9.14.0

（ソースコードはこちら）

環境構築手順

expo-cliをインストール.

npm install expo-cli --global

initコマンドでプロジェクトを作成.

expo init <プロジェクト名>

blank (TypeScript)を選択すると、TypeScriptでインストールされます.

エミュレーターを起動し、React Navigation，dependencies into an Expo managed project，native stack navigatorをインストールします.　（React Navigationの公式ドキュメントはこちら）

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

最後にfirebaseをインストールします.

expo install firebase

環境構築は以上です.

次回はStack navigatorについてです.