ExpoとReactNativeで環境変数を設定する

はじめに

ReactNative with Expo という構成で環境変数を設定しようと思ったら意外にハマったので備忘録

プラグインをインストール

色々な記事があって混乱しますが以下のプラグインが一番シンプルにできました。
babel-plugin-dotenv-import

$ npm install babel-plugin-dotenv-import

babel.config.js を修正

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    // pluginsに必要な情報を追記
    plugins: [
      [
        'dotenv-import', {
          'moduleName': '@env',
          'path': '.env',
          'blacklist': null,
          'whitelist': null,
          'safe': false,
          'allowUndefined': false,
        }],
    ],
    presets: ['babel-preset-expo'],
  };
};

.envファイルの作成

これはWEBの記法と何も変わりません。

.env

SAMPLE_EMAIL=[e-mail]
SAMPLE_URL=https://sample/sample

環境変数を読み込む

sample.js

import {SAMPLE_EMAIL, SAMPLE_URL} from '@env';

console.log(SAMPLE_EMAIL); // [e-mail]
console.log(SAMPLE_URL); // https://sample/sample