Native Modules An introduction about how to implement a native/bridge module for a React Native app João Fidelis 

João Fidelis @jgfidelis 2 

Basic Concepts 3 

They are libraries or components that allow you to write native code (Objective C/Swift or Java) and integrate them with your react native app. Also called Bridge Modules. What is a Native Module? 4 

- For when you need access to platform API - When you want to reuse code written in a native language - Using a third party library only available in native language - High performance, multi-threaded code (image processing, for example) Why use it? 5 

Use RN bridge library for ObjC/Java to export your module and expose it to JavaScript Import the native module as a library to your app and use methods, views and receive events Main Idea 6 

Roadmap ● Create module class ● Export static methods ● Export constants ● Export and implement view ● Export view properties ● Export view methods ● Export events ● Create your javascript library as a wrapper for the native module you just implemented, export the module and its methods and use it in your app 

Exporting Your Module ● iOS ○ Make a class implementing RCTBridgeModule protocol. ○ Use macro to export module ● Android ○ Create Package ○ Make a class extending ReactContextBaseJavaModule. ○ Implement getName() method. 

Android 

iOS and Android 

Using Module in JavaScript 

Exporting methods ● iOS ○ use macros like RCT_REMAP_METHOD or RCT_EXPORT_METHOD ● Android ○ use @ReactMethod directives ● takePicture example in RNCamera ○ receives a map of options, a number called reactTag and the promise to be resolved/rejected ○ reactTag is the key to the module view in the native view hierarchy map. 

iOS 

iOS continuation 

Android 

Using in Javascript ● After our wrapper is done, user can call: 'await camera.takePictureAsync(options);' 

Views and properties ● You can add views and make your RN wrapper render them ● Useful when you have a view written in native code ○ RNCamera: our view is the camera preview ○ Other example: Visa Checkout SDK ■ Visa checkout button with swiper ● Views can have props like usual react components ○ RNCamera has props like flashMode, type (front or back), white balance and many other 

No content

iOS 

iOS magic ● Your view (in our case RNCamera) should extend UIView ● layoutSubviews is a method of the UIView lifecycle called by iOS when laying our view. ● We use this opportunity to force our preview layer to be the whole view, by setting our frame's layer to the value of our bounds 

Android 

Android magic ● You need to implement the ViewManager and the View class ● onLayout is a method of Android view lifecycle called when the view is ready to be displayed ● We use this opportunity to set the size of our preview layer 

iOS props ● Use macro to export prop, telling its type (NSInteger for numbers, NSBool for booleans…) ● Call view's appropriate method 

Android props ● Use @ReactProp and tell the propName, on method, say its type (int for integer, boolean for bool…) 

Javascript ● requireNativeComponent will look for: ○ iOS, modules that extend RCTViewManager and have a view method (it will omit the Manager from the name automatically when searching). ○ Android, will look for ViewManager with that name 

iOS events ● You can create objective c property that holds a reference to a RCTDirectEventBlock, which can be used to send events back to JS. ● You can return a NSDictionary, which will be converted to a JS object, and each value inside the dictionary will be converted to its correspondant JS type. 

iOS events 

Android events ● Declare your event to be exported, implement getExportedCustomDirectEvent() to export them to JS ● Use react event library to dispatch event to JS ● Map is also converted to JS object and to JS types. 

Android events 

Android events 

Reacting to events 

Your wrapper... ● It does not need to be a React Component ● If your native module does not have a view, you can only export methods and constants ● Access your methods and constants with your manager/module (CameraManager) ● If you have a view, implement the react component render and lifecycle as normal and render your native component you required with the requireNativeComponent() method 

RNCamera Example 

Bridge Downsides... ● Need to implement in native language ● You need to implement the same logic twice ● Bridge can be slow to pass big amounts of data (like images as base64 strings) ● Need to be familiar with other IDEs like XCode and Android Studio ● Android 

- https://facebook.github.io/react-native/docs/nati ve-modules-ios.html - https://facebook.github.io/react-native/docs/nati ve-modules-android.html - https://github.com/react-native-community/reac t-native-camera - https://github.com/entria/react-native-visa-chec kout - http://blog.tylerbuchea.com/how-to-create-a-re act-native-ios-native-module/ - https://www.promptworks.com/blog/writing-nati ve-modules-for-react-native References 35 

Thanks :) 36