Bridges to react native
Crossing the gap by writing native modules
hello!
Florian Rival
Software engineer @
Developer of
and
@florianrival
4ian
you've said
Bridges?
Let's see how they do
Node.js?
Java?
emscripten?
react native?
xamarin?
✅ node-gyp
✅ Embind/WebIDL
✅ JNI
✅ C# bindings generators
✅ The bridge
COCOS2d-JS
✅ Bindings with SpiderMonkey
react native
Bridge
in a nutshell
Quick recap
$ ls
android
ios
package.json
index.android.js
index.ios.js
exchanging over the bridge
Native app
JS engine
thread
Bridge
Asynchronous messages or events (sent on a queue)
Main thread
Native module thread
When calling a native method from JS
messages and arguments
from native to js
Arguments sent internally as JSON
Module id, method id and arguments queued
All useful types are supported 💪
Number, String, Function, Array, Object, even Promises
write a
how to
native module
start by coding in your app
Go read facebook.github.io/react-native/docs/native-modules-ios.html
Open XCode
Add an Objective-C file
Write your methods
Expose them with RCT_EXPORT_METHOD and RCT_EXPORT_MODULE
import { NativeModules } from 'react-native';
var MyModule = NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');
Relaunch to recompile your app 🚀
iOS
Expose methods with @ReactMethod
Go read https://facebook.github.io/react-native/docs/native-modules-android.html
Open Android Sutdio
Add a ReactPackage
Add a ReactContextBaseJavaModule
import { NativeModules } from 'react-native';
var MyModule = NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');
Relaunch to recompile your app 🚀
Android
create a module
Bootstrap an empty native module
Set up a blank React Native app
Use `file:../` in your example app to have your test bed app use the module that is in the parent directory.
npm publish
PROTIP
bootstrapping a module
https://github.com/bamlab/generator-module-react-native
https://github.com/frostney/react-native-create-library
https://github.com/peggyrayzis/react-native-create-bridge
Kotlin & Swift support!
doing native? use native tooling too!
Console output
NSLog(@"Yup, I'm working");
System.out.printLn("Howdy");
Good way to warn about missing/bad configurations:
native debuggers
View inspectors
View inspectors
Bridge profiler
https://github.com/jondot/rn-snoopy
MessageQueue.spy
Memory profiler
things that
hurt
💔
handling exceptions
😅
too much data over the bridge
rn-snoopy is a good way to check if that's the case or why
"congestion" on the bridge
data too big over the bridge
Don't send files over the bridge 😜
Keep working with filepaths
Write large chunks of data (processed images, large computation results...) in cache if needed
breaking changes
Follow semver
Changes in the native code of React Native (headers, interfaces...) may force you to only support latest versions
Upgrade the major version when a breaking change in the interface is done
Tools like commitizen can help
stay up-to-date with rn
thank you!
:
)
@florianrival
4ian
.tech
_lab
@
Bridges to React Native
By Florian Rival
Bridges to React Native
Talk at ReactNext 2017 and React Native EU
- 3,639