react nativeで環境別にAPI_URLを出し分けしたいときにはbabel-plugin-transform-inline-environment-variablesを使えばネイティブをいじらずに簡単にできるよ的なお話

react-nativeでアプリ開発をしているときに直面するconfig的な定数の出し分け。
APIなど環境ごとに変わらないような簡単なアプリでは必要ないんだけど、がっつりと作り込んだアプリの場合に直面するやつ。
Expoだとapp.jsonのextra部分に好きなkey-valueを埋め込むことができ、buildやpublish時に--configでapp.jsonを指定することができるので何も深く考える必要がなかったり。

ちなみにreact native 環境変数とかで調べると大体の記事がreact-native-configで、次点でreact-native-dotenvという感じになる。
react-native-configはネイティブ部分にも環境変数を渡したいとかそういうときになるんだろうけど、ぶっちゃけそんな使うことある？って思ってしまう。
react-native linkするのも面倒だしましてやgradleをいじったりもかなり面倒だったり。
react-native-dotenvは.envとして中にkey=value形式で記述した環境変数をimport {Hoge} from 'react-native-dotenv'みたいな感じで呼び出すことができるんだけど、個人的に定数に関してはjsonで管理したいなぁっていう気持ちがあったり。
それに複数値を環境変数として定義するよりも、1つのAPP_ENVみたいな変数を見て読み込むファイルを変更する方がいいんじゃないかと。

ということで今日は簡単に環境ごとに読み込む定数を変更したい的なお話をば。

タイトルにも書いてある通りbabel-plugin-transform-inline-environment-variablesを使えばよい。

ざっくり述べるとbabelを通す際にprocess.env.APP_ENVみたいになっている部分を書き換えちゃおうっていう感じのやつ。
そのためにまずはインストールして.babelrcを設定する必要がある。

$ npm install babel-plugin-transform-inline-environment-variables --save-dev

// .babelrc
{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

こんな感じで設定してあげればよい。
で、そしたら適当にconfigっていうディレクトリを作って中に色々と定数を設定したjsonを設定してあげて、index.jsを作ってあげればよい。

// config/index.js

import development from './config.development.json';
import production from './config.production.json';

const config = process.env.APP_ENV === 'production' ? production : development;

export default config

こんな感じで行えばAPP_ENVがproductionのとき/developmentのときと分割することができたり。
もちろん条件を増やしたかったらswitch文なりで工夫してあげたり。

BitriseではBirtiseのEnv VarsにAPP_ENVっていうのをworkflowごとにいれてあげればよく、ローカルで色々と試したい場合は.envrcなんかで調整してあげたりすればよいかと。
ちなみにローカルで試す際にはnpm run start --reset-cacheとして環境変数を変更するごとに再起動して上げる必要があるので要注意。

ネイティブをいじるというのは個人的には面倒な作業だし、できたらやりたくなかったりするし、そもそもネイティブ自体に環境変数渡さなくてもいいじゃん派なのでこのやり方が一番しっくりくる。
それに環境変数は用意すればするほど面倒なことになるので、切り替え用の1つの環境変数を用意する方が楽なんじゃないかと。
ってな分けでこんな感じで行えば気軽にjs部分のみで設定用の値を色々と変更できるよ的なみたいな。