react-nativeで環境ごとに定数を切り替える(react-native-config)
2019-03-01

react-nativeで環境ごとに定数を切り替える(react-native-config)

まぁ、よくあるdevelopment/statging/productionの定数切り替えです。

いくつかライブラリを選定したのですが、最終的にreact-native-configを使うことにしました。理由はNativeModuleを使っていて、双方で定数を共有したいからです。

NativeModuleを使っていなければreact-native-dotenvでも大丈夫だと思います。

導入にあたりNative側にも設定が必要だったので、設定するにあたりある程度の困難はあると思っていたのですが、結構大変だったのでその辺りを中心に紹介します。

基本的な導入方法

公式ドキュメントにもあるとおり、npm installしてreact-native linkをすると導入自体は終わります。

npm install --save react-native-config
react-native link react-native-config

設定ファイルの記述方法や基本的な環境の切り替えからなどは、dotenvと同じなので、使ったことがある人はそれほど苦労しないはず。

次のような.envファイルを準備します。

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

react-native側では次のように取得します。

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

Native側については設定がもう少し必要ですが、公式ドキュメントの内容にしたがってやってみるといいと思います。
で、ここまでが良く見かける記述。Googleで検索すると良く出てくるのでサラッと流します。

NativeModuleを使っている場合は、さらにここからドキュメントにない設定が必要です。ここからが本番です。

トラブルシュート

自分が遭遇したトラブルについて残しておきます。

Android側でBuildConfigが見つからない

Android側で定数を受け取るサンプルで良くあるのが、MainApplication.javaなどのアプリのPackageNameと同じパッケージだけでやっている場合。
これだとNativeModuleを使っているケースでトラブルになります。

PackageNameがjp.sample.mitsuruogだったとして、NativeModuleをjp.sample.mitsuruog.custom.hogeなど異なるパッケージに置いたとします。

package jp.sample.mitsuruog.custom.hoge;

  ...

  public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL); // error: cannot find symbol
  }

BuildConfigはPackageNameと同じパッケージに生成されるので、packageをインポートする必要があります。

package jp.sample.mitsuruog.custom.hoge;

+ import jp.sample.mitsuruog.BuildConfig;

  ...

  public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL); // 'https://myapi.com'
  }

swiftで使うための設定

swiftで使いたいですが。。。残念ながら、公式やほどんどのサンプルがObjective-cで実装されているものです。

swiftで使うためには、まずBridgeファイルにreact-native-configのHeaderを登録します。

// Bridging-Header.h
#import "React/RCTBridgeModule.h"
+ #import "ReactNativeConfig/ReactNativeConfig.h"

swiftでは次のように使います。

import ReactNativeConfig

...

あとで足すからちょっと待って

xcodeでビルドでエラー

xcode上でのエラーが消えたので、実機で試そうかと思ってビルドしたらエラー。ReactNativeConfigが見つからない。

…え?

原因はreact-native linkがなんらかの理由で正しくreact-native-configを設定できていないためでした。

まず、xcodeのプロジェクトビューのLibrariesグループの中にReactNativeConfig.xcodeprojがあることを確認します。もしなければ、次の手順にしたがって手動でリンクを直してください。

プロジェクトの「Build Settings > Header Search Paths」には$(SRCROOT)/../node_modules/react-native-config/iosを追加します。

まとめ

日本語や英語のreact-native-configについての記事は、どれもここまで踏み込んだ内容ではなかったので、導入は少し面倒でした。
導入した結果、複数の環境で定数を分けることができたので結果には満足しています。

が。。。

react-nativeの外部ライブラリの設定周り、こんなに不安定でいいのか!?

このブログはiOS側で複数の環境を構築する手順が載っていてわかりやすいです。