React Native - Native Modules

An introduction to React Native's Native Module based on the react-native-camera package

Transcript

1. Native Modules An introduction about how to implement a native/bridge module for a React Native app João Fidelis
2. João Fidelis @jgfidelis 2
3. Basic Concepts 3
4. 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
5. - 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
6. 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
7. 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
8. 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.
9. Android
10. iOS and Android
11. Using Module in JavaScript
12. 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.
13. iOS
14. iOS continuation
15. Android
16. Using in Javascript • After our wrapper is done, user can call: 'await camera.takePictureAsync(options);'
17. 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
19. iOS
20. 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
21. Android
22. 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
23. iOS props • Use macro to export prop, telling its type (NSInteger for numbers, NSBool for booleans…) • Call view's appropriate method
24. Android props • Use @ReactProp and tell the propName, on method, say its type (int for integer, boolean for bool…)
25. 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
26. 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.
27. iOS events
28. 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.
29. Android events
30. Android events
31. Reacting to events
32. 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
33. RNCamera Example
34. 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
35. - 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
36. Thanks :) 36