React Native Bridges Sibelius Seraphini

Sibelius Seraphini @sibelius @sseraphini 2

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? 3

- 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 them? 4

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 of a Bridge 5

- asynchronous - serializable - batched Bridge Architecture 6

- React Native returns a single JSON that lists mutations to perform. - [["createView", attrs], ["manageChildren", ...]] How does it works? 7

- shadow queue - where the layout happens - main thread - where UIKit/Android does it thing - Javascript thread - where your JS code is actually running - GCD queue - for each Native Module How it works? 8

Bridge initialization dependency graph 9

Bridge call cycle 10

- Native Modules - expose native API without a UI - e.g.: package that read calendar events - Native UI Modules - expose a UI widget - e.g.: RNCamera component Types of Native Modules 11

Why Bridge is hard - Need to implement in native language (know Java and Objective C) - 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

- asynchronous - hard to make sync APIs - serializable - unnecessary copying instead of directly sharing memory - batched - harder to call functions natively React Native Bridge Drawbacks 13

- Change threading model: enable synchronously on JavaScript - Async Rendering - rendering priorities - Simplifying - Faster and more lightweight React Native Bridge Future 14

- Shared memory owner: share between native and JavaScript - JSI - interop layer between JavaScript and native - Opt-in synchronous execution - UI responsiveness React Native Bridge Future 15

Resources 16 https://github.com/prscX/awesome-react-native -native-modules https://setemasters.imasters.com.br/conversas /is-react-native-native/

Resources 17 - https://facebook.github.io/react-native/docs/nati ve-modules-ios - http://facebook.github.io/react-native/blog/2018 /06/14/state-of-react-native-2018 - https://github.com/react-native-community/disc ussions-and-proposals/issues/4

I didn't mention 18 - How to really implement them (check this https://speakerdeck.com/jgfidelis/react-native-n ative-modules) - Deep dive on new native modules bridge structures