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

Made with Slides.com

Bridges to React Native

Talk at ReactNext 2017 and React Native EU

  • 3,474

More from Florian Rival