Software engineer @
Developer of
and
@florianrival
4ian
โ node-gyp
โ Embind/WebIDL
โ JNI
โ C# bindings generators
โ The bridge
โ Bindings with SpiderMonkey
$ ls
android
ios
package.json
index.js
Native app
JS engine
thread
Bridge
Asynchronous messages or events (sent on a batched queue)*
Main thread
Native module thread
* Will likely change soon to be synchronous :)
Arguments sent internally as JSON
Module id, method id and arguments queued
Number, String, Function, Array, Object, even Promises
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 Studio
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
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
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!
NSLog(@"Yup, I'm working");
System.out.printLn("Howdy");
https://github.com/jondot/rn-snoopy
MessageQueue.spy
๐
๐
rn-snoopy is a good way to check if that's the case or why
"congestion" on 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
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
We're working on a large-scale rearchitecture of React Native to make the framework more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps
(emphasis mine)
https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
it will be possible to call synchronously into JavaScript on any thread for high-priority updates while still keeping low-priority work off the main thread to maintain responsiveness
(emphasis mine)
https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
allow multiple rendering priorities and to simplify asynchronous data handling
https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
[...] simplifying our bridge to make it faster and more lightweight; direct calls between native and JavaScript are more efficient
https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
@florianrival
4ian