Getting started Expo

最近 Expo と Firebase を試し始めたので、そのメモを残しておこうと思います。

ykokw/chat-demo

Expo便利

  • Tunnelモードでアプリをデバッグするのが確実にクライアントアプリで実行できる
  • VS Codeとクライアントアプリだけでいいのはほんとうに便利
  • けどFirebase使うならReact Native Firebaseも気になる

画面の実装

  • 画面遷移は React Navigationを利用
  • キーボード使う画面はKeyboardAvoiddingView を利用

    • キーボードが表示されたときの見た目を調節できる
    • behaviorをpositionにするとスタイルを別で指定できるから一番便利かなと思った
  • styleがstyled-componentsっぽいけど使えるスタイルが限られてるので大変

Firebase の初期設定

Firebase でプロジェクトを作成すると、API Key やプロジェクト ID が発行されます。 Expo プロジェクト側でも Firebase の Javascript SDK を用意しておき、 SDK の初期化を行います。

今回のプロジェクトでは、複数箇所で Firestore(リアルタイムで同期される NoSQL 型データベース)機能を利用するために Firestore のインスタンスを services/db.js に切り出しています。

// service/db.js
import firebase from "firebase";
import "firebase/firestore";

const config = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID
};

firebase.initializeApp(config);

const dbSettings = { timestampsInSnapshots: true };

export const db = firebase.firestore();
db.settings(dbSettings);

Firebaseの設定(省略可).env ファイルで API Key を設定する

Firebase の API Key は Web ブラウザの開発者ツールなどで第 3 者に読み取られても問題ないですが、 (そのためにユーザー権限に基づくデータアクセス設定が必要) そもそもソースコードに API Key など設定値がベタ書きされるのが好きではなかったので 上の SDK 初期化では.env ファイルで設定できるようにしています。

babel-plugin-inline-dotenv をインストールする

yarn add --dev babel-plugin-inline-dotenv

babel.config.js を用意

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["inline-dotenv"] // 追加
  };
};

.env ファイルを用意

API_KEY="YOUR_API_KEY"
AUTH_DOMAIN="YOUR_DOMAIN"
DATABASE_URL="YOUR_DATABASE_URL"
PROJECT_ID="YOUR_PROJECT_ID"
STORAGE_BUCKET="YOUR_STORAGE_BUCKET"
MESSAGING_SENDER_ID="YOUR_SENDER_ID"

Cloud Functions でasync / awaitを使う

functions/package.json に以下を追加することでnodeバージョン指定ができます。 (stackoverflowで見つけたのでtipsみたいです)

"engines": {
  "node": "8"
},

prettierとESLint