Setting Up React Native Build Environments Using NativeModules

Ken Shimizu ·

React Native is an emerging platform in the mobile space that allows developers to write native apps in Javascript without having to learn Java or Swift. It’s great conceptually, but developers end up having to write NativeModules (for iOS and Android) anyway because it lacks the tools that other frameworks generally provide. In this blog post, we’ll show you how to pass your build environment from the native environment to your javascript environment. In the process, you should get a better idea of how to build simple NativeModules.

Setting Up Your Environment in iOS

I used this blog post to set up my iOS environment. I won’t duplicate this explanation here. Just come back after you’ve followed these steps!

Setting Up Your Environment in Android

By wiring up our Android NativeModule correctly we can leverage the work we have already done on the iOS side. We’ll be taking a similar strategy to the iOS work we just did. We’ll create build types, and when the app compiles, they will make make a buildEnvironment property available to the javascript application.

NOTE: You’ll need to have Android Studio set up, so please do so if you haven’t already.

First, we’ll need to edit our build.gradle file to be able to create different builds. Add buildTypes within android and add whatever environments you need. debug and release are available by default.

The initWith(buildTypes.debug) is there to duplicate the debug environment. release apps need to be signed by default, but we didn’t need that level of security in test or acceptance on my project.

Note that you cannot use the name test for a buildType, which is why we went with uiTest. It shouldn’t make a difference in the end.

Click the Sync Project with Gradle Files button (looks like a green Pokeball) at the top of Android Studio so it generates the proper build file.

Create a NativeModule

Now we’ll create our NativeModule so our Javascript can access the buildEnvironment. First, create an RNConfig class and paste in the code below. You can put this class anywhere; I put mine in java/com/example/app/modules.

RNConfig.java

The code above is creating a new NativeModule. The name defines how the import will be defined in javascript. Constants is a set of properties that you can assign to a NativeModule. To learn more about NativeModules, you can check out the docs.

Next, we’ll create a package file that wraps this class. In java/com/example/app/packages, create an RNConfigPackage class and add the code below. Again, you can put this anywhere inside java/com/example/app.

RNConfigPackage.java

Finally, in MainApplication.java, add the package to the getPackages() list.

MainApplication.java

That’s it! Now we can run the app with different schemes (iOS) or build variants (Android) and map different api url’s, etc, to the different environments.

Run different schemes (iOS)

You can select different schemes in the top left corner of XCode.

If you want to create a build for a specific scheme from the command line, cd into the ios directory and use this command:
xcodebuild -sdk iphonesimulator9.3 -project .xcodeproj -scheme '' -destination "platform=iOS Simulator,name=iPhone 6,OS=9.3" -derivedDataPath build

Run different build variants (Android)

build_variants

Select the build variants tab in the bottom left corner of Android Studio on the left-hand side. Then select whatever build variant you’d like. You have had to gradle sync after editing your build.gradle configuration for your build variants to appear in this list.

If you need a command line build, cd into the android directory and use this command:
./gradlew clean assembleUiTest (or assemble)

If you’re having trouble finding the command, you can use ./gradlew tasks to list out all possible build tasks.

Conclusion

Build environments are a powerful configuration tool that allow us to specify the services we need in different contexts without making. Utilizing NativeModules, we can have access to our build environment in React Native as well.

In my next blog post, I’ll show you how to set up UI Tests for your React Native app leveraging the environments that we created today.