Akinn Rosa
@akinncar @akinncar
Fullstack Developer
Slide 3
Slide 3 text
Overview
Slide 4
Slide 4 text
Current Architecture
Slide 5
Slide 5 text
React "Native"
Slide 6
Slide 6 text
Native Component
Slide 7
Slide 7 text
Native Component: Color View
ColorViewManager.java
Slide 8
Slide 8 text
Native Component: Color View
ColorPackage.java
lic class ColorPackage implements ReactPackage {
@Override
public List createNativeModules(ReactApplicationContext reactContext
return Collections.emptyList();
}
@Override
public List createViewManagers(ReactApplicationContext reactContext)
return Arrays.asList(new ColorViewManager());
}
Slide 9
Slide 9 text
Native Component: Color View
App.js
import { requireNativeComponent } from 'react-native';
export const ColorView = requireNativeComponent('ColorView');
export default function App() {
return (
);
}
Slide 10
Slide 10 text
Native Module
Slide 11
Slide 11 text
Native Module: Sum
SumModule.java
Slide 12
Slide 12 text
Native Module: Sum
ColorPackage.java
lass SumPackage implements ReactPackage {
rride
ic List createNativeModules(@NonNull ReactApplicationContext reactCo
List modules = new ArrayList<>();
modules.add(new SumModule(reactContext));
return modules;
rride
ic List createViewManagers(@NonNull ReactApplicationContext reactCont
return Collections.emptyList();
Slide 13
Slide 13 text
Native Module: Sum
App.js
import { NativeModules } from 'react-native';
const { SumModule } = NativeModules;
export default function App() {
return (
Result: {SumModule.sum(2, 2)}
);
}
Slide 14
Slide 14 text
Threads
Slide 15
Slide 15 text
Threads
Slide 16
Slide 16 text
Threads
Slide 17
Slide 17 text
Threads
Slide 18
Slide 18 text
Threads
Slide 19
Slide 19 text
Threads
Slide 20
Slide 20 text
Problems
Slide 21
Slide 21 text
Current ScrollView
Slide 22
Slide 22 text
Turbo Modules
Is the new generation of React Native Modules. It aims to work with native
functions like browsers, exposing native functions using JSI and improving
module performances.
Slide 23
Slide 23 text
Browser Native Function
Slide 24
Slide 24 text
Javascript Interface (JSI)
JSI is an engine-independent API to interact with Javascript from C++. It
allows to call functions and hold references on these two languages, without
the need for any serialization.
Slide 25
Slide 25 text
Sum Module Header (Objective-C++)
Sum.h
#import
#import "react-native-sum.h"
@interface Sum : NSObject
@property (nonatomic, assign) BOOL setBridgeOnMainQueue;
@end
Slide 26
Slide 26 text
Sum Module (Objective-C++)
Sum.mm
Slide 27
Slide 27 text
Sum Module Header (C++)
react-native-sum.h
#include
#include
void installSum(facebook::jsi::Runtime& jsiRuntime);
Slide 28
Slide 28 text
Sum Module (C++)
react-native-sum.cpp
Slide 29
Slide 29 text
Sum Module (Javascript)
App.js
export default function App() {
return (
Result: {global.sum(2, 2)}
);
}
Slide 30
Slide 30 text
Libraries implemented using JSI
react-native-reanimated
react-native-vision-camera
react-native-mmkv
react-native-quick-sqlite
Slide 31
Slide 31 text
Fabric
Is the new React Native renderer. With Fabric, the UI operations are exposed
to Javascript with JSI. This new UI can create and update native components
passing information without using the bridge.
Slide 32
Slide 32 text
Current Architecture
Slide 33
Slide 33 text
New Architecture
Slide 34
Slide 34 text
New Architecture + Codegen
Slide 35
Slide 35 text
Codegen (react-native-codegen)
Automation to compatibility JS and Native code. It's a generator that will
define your classes and functions in C++ base on types with Typescript and
Flow, to avoid data validation every time.
Slide 36
Slide 36 text
What should I do?
Slide 37
Slide 37 text
What's next?
Slide 38
Slide 38 text
References
The New React Native Architecture Explained
David Vacca - The state of React Native
Parashuram N - React Native's New Architecture
Emily Janzer - The New React Native
React-native JSI module
React Native JSI: Part 1 - Getting Started
Bringing the Fabric renderer to the “Facebook” app
React Native in H2