Writing a Native Module for React-Native

TLDR: Unlike in Nativescript, where you call the Android APIs directly from JS, in React Native, you need to create your own Native wrappers around Android/IOs APIs, which you then annotate to indicate to React Native that these Native methods can be called from JS.

Use Case: Let’s say we would like to be able to create a toast message from JavaScript.

  • Create Native Module
    • We start by creating a native module. A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript.
    • Our goal here is to be able to write ToastAndroid.show('Awesome', ToastAndroid.SHORT); from JavaScript to display a short toast on the screen.
  • Implement Common Interface in native code that’ll be invoked from JS
    • Eg. ReactContextBaseJavaModule requires that a method called getName is implemented. The purpose of this method is to return the string name of the NativeModule which represents this class in JavaScript. So here we will call this ToastAndroid so that we can access it through React.NativeModules.ToastAndroid in JavaScript.
      @Override public String getName() { return “ToastAndroid”; }
    • To expose a method to JavaScript a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).
    • Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the RCTDeviceEventEmitter which can be obtained from the ReactContext as in the code snippet below. JavaScript modules can then register to receive events by addListenerOn using the Subscribable mixin.
    • Sample Tutorial: https://www.sitepoint.com/access-platform-apis-with-react-native-modules/

Use Case: Native UI Components

  • There are tons of native UI widgets out there ready to be used in the latest apps – some of them are part of the platform, others are available as third-party libraries
  • it’s quite easy to wrap up these existing components for seamless integration with your React Native application.
  • read: https://facebook.github.io/react-native/docs/native-components-ios.html
  • SIMPLE CUSTOM COMPONENT: https://github.com/crazycodeboy/react-native-check-box
    • Here, we see that in examples folder, in index.js, the <CheckBox> Component is used.
    • Note that the android and iOS directories in the examples folder contain the native code that sits behind the <Checkbox> 
    • Simarly, here you see that HOW a property on Camera Component, called captureTarget is FIRST DEFINED IN JAVA AND iOS and later used in .js file: https://github.com/lwansbrough/react-native-camera/search?utf8=%E2%9C%93&q=captureTarget 
    • See other COMPONENTS HERE: https://github.com/jondot/awesome-react-native

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s