Skip to content

NOTE React Native Native Modules

Jump to bottom
Yilin Gao edited this page Dec 11, 2017 · 1 revision

Setting Up React Native iOS and Android Native Modules for Development

It took me, a web developer and first-time mobile developer, quite some time to set up the development environment for React Native iOS and Android Native Modules. The documentation on Native Modules iOS and Native Modules Android are apparently written for people already familiar with native app development. The documentation lacks a centralized introduction about managing a project with multiple sub-projects and linking stuff together.

In this article, I'll talk about setting up the development environment for React Native iOS and Android Native Modules. I'll start with XCode for iOS.

You have just setup a react native project named MyApp using react-native init MyApp. I'll use / to denote the root folder of this project. Inside the root folder, you should find /ios/ and /android/.

React native is great, but it is still young, and not everything is there to use. So you decide to build an iOS and/or Android Native Module for native functionality not yet in React Native. Let's name the functionality HelloNative. For easier git management during development, you decide to put the native module in /HelloNative.

XCode

An XCode project is essentially a *.xcodeproj file, which contains project information such as reference to all other files. You can use XCode to open MyApp.xcodeproj and then you see the project.

To create a HelloNative native module, create the folder /HelloNative/ios, and use XCode to create a new project in /HelloNative/ios using the template Cocoa Touch Static Library. You can now close this newly created project.

Then in the opened MyApp XCode project, right click the Libraries directory in the left directory tree view, and choose Add Files to "MyApp"..., and select /HelloNative/ios/HelloNative.xcodeproj. Now HelloNative is imported by reference as a sub-project.

The last step is to follow the Manual Linking iOS Guide, and note that we've already done step 1 here.

Finally you can follow the Native Modules iOS Guide and put all the *.h and *.m files inside the HelloNative XCode project.

Android

For Android, if you tell Android Studio to create a project, it creates a whole lot of files. So for simplicity, follow the directory structure of this react-native-sensor and put only the necessary stuff in /HelloNative/android/, note the AndroidManifest.xml file needs to be modified for the main package name.

Then it is time to fire up Android Studio. File -> New -> Import Project... and choose the /android folder to open the project of your main application. Then follow react-native-video Android linking to manually link your own native module, with some modifications to file paths and class names to suit your own module. I'll illustrate the three manual linking steps below.

  1. /android/settings.gradle: an Android app is built with the Gradle build tool. Gradle uses settings.gradle to manage a multi-project build, and you can include sub-projects by calling include. So here what we need to add is:
include ':hello-native'
project(':hello-native').projectDir = new File(rootProject.projectDir, '../HelloNative/android')

After you do this, refresh Android Studio and you can see the HelloNative sub-project showing up in the same workspace.

  1. /android/app/build.gradle: this is the config for the main application. You may need to add your own react native module to the main application as compile time dependency:
dependencies {
   ...
   compile project(':hello-native')
}
  1. /android/app/src/main/java/com/myapp/MainApplication.java: yes you have to modify the source code to link a native module.
import yourpackage.HelloNativePackage;
...
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new HelloNativePackage()
    );
}

This HelloNativePackage class resides inside your own native module at the path /HelloNative/android/src/main/java/yourpackage/HelloNativePackage.java. To know about what should be the content of this HelloNativePackage, refer to the Native Modules Android Guide.

After this, you can finally happily follow the Native Modules Android Guide to write Java code inside your own native project.

Key Point

The key point of the setup is: if you want to develop the native module, you have link it with a react-native main application and fire up the main app (or root project) to develop the native module. Because in XCode, the native module sub-project requires dependencies on the RCT* libraries; in Android, the gradle sub-project requires dependencies on com.android.library and com.facebook.react:react-native. These dependencies are conveniently available in the XCode or Gradle main application.

From Development to an Independent Native Module NPM package

To npm package this native module, just go to /HelloNative/, do npm init, fill the necessary package information, and package it like every other npm package.

Then after the consumer installs this npm package, he can run react-native link to automatically link the native module. (If it doesn't work magically, he may have to manually link it.) The react-native link performs the linking exactly the same as the manual linking process described above, the only difference is that it automatically search in node_modules/for the native module declared as dependencies in package.json.

Clone this wiki locally