Expoの設定(app.json)をtypescriptで動的に記述する

Expoの設定ファイルについて

Expoではアプリのメタ情報や設定値をapp.jsonに記載します。

ただapp.jsonはstaticなJSONファイルのためそのままだと環境別(例えばdevelopment, staging, productionのように)に値を指定できません。

そこで、環境別に設定値を記述するにはどうしたらよいか説明します。

ファイル自体を環境別に分ける

expo startでサーバを起動する際に--configオプションで設定ファイルを指定できます。 app.dev.json, app.staging.json, app.production.json のように設定ファイルを環境別に用意しておき、以下のようなnpm scriptを用意してexpo startの引数で指定すれば環境別に起動できます。

"scripts": {
  "start:dev": "expo start --config app.dev.json",
  "start:staging": "expo start --config app.staging.json",
  "start:production": "expo start --config app.production.json"
}

ファイルを動的に記述する

Environment variables in Expo - Expo Documentation に記載がありますが、 設定ファイル名をapp.config.js のように拡張子を.jsにすることでjavascriptで動的に記載することができます。 またドキュメントには記載がないですが、ファイル名をapp.config.tsのように拡張子を.tsにすることでTypeScriptで記述することも可能です。

ファイルの中身は形式は以下のように記述します。

export default {
  expo: {
    name: "xxxxx",
    slug: "xxxxx",
    ...
  }
}

.env を読み込んで設定値として利用する

固有の設定値を.envに環境変数として指定している場合、dotenvを使えば設定ファイル内で読み込むことができます。

import dotenv from "dotenv"

dotenv.config({ path: "../../.env.dev" })

読み込んだ値はprocess.env.xxxxでアクセスできます。

export default {
  expo: {
    name: process.env.APP_NAME,
     ...
  }
}

アプリのコードからexpo-constantsを使って設定値にアクセスさせたい場合、以下のようにextraフィールドに指定します。

  extra: ["APP_NAME", "API_ENDPOINT"].reduce((envs, key) => ({
    ...envs,
    [key]: process.env[key],
  }), {})

コードからは以下ようにアクセスできます。

import Constants from 'expo-constants'

console.log("API_ENDPOINT:", Constants.manifest.extra.API_ENDPOINT)