react-native-dotenv で環境ごとの定数を設定

react-native-dotenv を使って、開発環境・本番環境で切り替わる定数の定義を行います。

ライブラリ

https://github.com/goatandsheep/react-native-dotenv

上記リポジトリの README に沿って設定すれば問題ないです。

インストール

まずはパッケージをインストールします。npm か yarn お好きな方で行いましょう。

npm install react-native-dotenv

babel の設定を追加

まずは babel の設定ファイルに設定を追加します。.babelrc とか babel.config.js などのファイルです。

    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
        },
      ],
    ],

定数ファイルを用意

.env.development と .env.production を用意します。中身は以下のように、定数の名前とその値を定義します。 環境によって有効になるファイルが切り替わるので、それぞれ開発用と本番環境用のパラメータを設定しましょう。

ANDROID_BANNER_AD_UNIT_ID=<Androidのバナー広告のユニットID>
IOS_BANNER_AD_UNIT_ID=<iOSのバナー広告のユニットID>

バナー広告のユニットIDを設定しています。この場合、開発環境用の.env.development にはテスト用広告IDを設定しておくことになります。

実装

moduleName で指定したパッケージ名としてインポートして定数を利用できます。

import {
  ANDROID_BANNER_AD_UNIT_ID,
  IOS_BANNER_AD_UNIT_ID,
} from "@env";

~~~

      <AdMobBanner
        adUnitID={Platform.select({
          ios: IOS_BANNER_AD_UNIT_ID,
          android: ANDROID_BANNER_AD_UNIT_ID,
        })}
      />

環境ごとにこの定数の中身が切り替わっています。 開発環境では .env.development の中身、本番ビルドでは .env.production の中身になっています。

型情報の用意

TypeScript の場合、@env の型情報がないため注意されます。 types/env.d.ts ファイルを作成して、以下のように定数の型情報を設定することで解決できます。

declare module '@env' {
  export const ANDROID_BANNER_AD_UNIT_ID: string;
  export const IOS_BANNER_AD_UNIT_ID: string;
}

手動で作成した型情報を使ったことがない場合は、tsconfig.json に型情報の場所を設定する必要があります。

{
    "typeRoots": ["./src/types"],
}

おわりに

簡単に環境ごとの定数を切り替えることができました。私は広告IDの切り替えや、APIのURL切り替えなどに利用しています。

似たようなことができるパッケージは他にもあるので好みに合わせて使ってみると良いです。