ReactNativeでdotenvを利用する(react-native-dotenv)

ReactNativeでdotenvを利用する(react-native-dotenv)

公式：https://github.com/goatandsheep/react-native-dotenv

概要

react-native-dotenv を利用して環境別にAPIキーやURIを切り替える仕組みを導入します。
※上記で切り替えられるのはjs,ts側のみとなります。ネイティブ側は切り替えできません。

環境

OS: Windows10
Node.js: 16.13.1

※iOSの動作環境が手元になかったため、Androidのみで確認しました。

導入

react-native-dotenv を追加します。

yarn add react-native-dotenv

babel.config.jsのpluginsに 'module:react-native-dotenv' を追加します。

// babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    plugins: [
      [
        'module:react-native-dotenv',
        {
          envName: 'APP_ENV',
          moduleName: '@env',
          path: '.env',
          safe: true
        }
      ]
    ],
    ...
  }
}

プロジェクトのルートディレクトリに .env ファイルを作成し、設定を追加します。

API_KEY=hogehoge

これで .env に記述した定数を以下のようにして読み込めます。

import { API_KEY } from '@env'

各js,tsファイルから上記のように読み込むことは出来ますが、.env ファイルの内容を変更してもbabelのキャッシュが残ってしまい反映されません。
最新の設定値を反映するために @env をimportしているファイル全てを更新する必要がありますが、数が多くなると面倒です。
そこで、すべての設定値を読み込むConfigファイルのようなものを用意し、 .env ファイルを書き換えたらそのConfigファイルのみを更新することで対応します。

// env.js

import { API_KEY } from '@env'

export default { API_KEY }

.env ファイルの内容を変更したときは一度metro bundlerを停止し、env.jsファイルを更新してから起動します。

Unknown option: .name. エラーでビルドできない場合

babelで API_KEY のような環境変数を置き換えるため、オブジェクトの省略記法で実装するとエラーとなるようです。
詳細は調べていないので分かりませんが、ひとまず以下のように省略せずに実装することで対応しました。

// env.js

import { API_KEY } from '@env'

export default { API_KEY: API_KEY } // 追加
// export default { API_KEY }