2020-08-02
Expoの設定(app.json)をtypescriptで動的に記述する
expo
react-native
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)