Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Architecture in 2021
Search
Akinn Rosa
October 16, 2021
Technology
0
210
React Native Architecture in 2021
Slides for talk about React Native Re-architecture on React Conf Brazil 2021
Akinn Rosa
October 16, 2021
Tweet
Share
More Decks by Akinn Rosa
See All by Akinn Rosa
React Native Universal Apps
akinncar
0
3
Aplicativo Móvel para gestão de fidelidade de clientes
akinncar
0
24
Developing 3D multiplatform games with three.js in React Native
akinncar
0
120
Other Decks in Technology
See All in Technology
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.1k
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
Lazy application authentication with Tailscale
bluehatbrit
0
170
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
370
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
350
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
290
怖くない!はじめてのClaude Code
shinya337
0
380
Featured
See All Featured
KATA
mclloyd
30
14k
We Have a Design System, Now What?
morganepeng
53
7.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Building Adaptive Systems
keathley
43
2.7k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Side Projects
sachag
455
42k
Typedesign – Prime Four
hannesfritz
42
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
BBQ
matthewcrist
89
9.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Transcript
React Native Architecture in 2021 Akinn Rosa
Akinn Rosa @akinncar @akinncar Fullstack Developer
Overview
Current Architecture
React "Native"
Native Component
Native Component: Color View ColorViewManager.java
Native Component: Color View ColorPackage.java lic class ColorPackage implements ReactPackage
{ @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) return Arrays.<ViewManager>asList(new ColorViewManager()); }
Native Component: Color View App.js import { requireNativeComponent } from
'react-native'; export const ColorView = requireNativeComponent('ColorView'); export default function App() { return ( <View style={{ flex: 1 }}> <ColorView color="#32a852" style={{ flex: 1 }} /> </View> ); }
Native Module
Native Module: Sum SumModule.java
Native Module: Sum ColorPackage.java lass SumPackage implements ReactPackage { rride
ic List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactCo List<NativeModule> modules = new ArrayList<>(); modules.add(new SumModule(reactContext)); return modules; rride ic List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactCont return Collections.emptyList();
Native Module: Sum App.js import { NativeModules } from 'react-native';
const { SumModule } = NativeModules; export default function App() { return ( <View style={{ flex: 1 }}> <Text>Result: {SumModule.sum(2, 2)}</Text> </View> ); }
Threads
Threads
Threads
Threads
Threads
Threads
Problems
Current ScrollView
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.
Browser Native Function
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.
Sum Module Header (Objective-C++) Sum.h #import <React/RCTBridgeModule.h> #import "react-native-sum.h" @interface
Sum : NSObject <RCTBridgeModule> @property (nonatomic, assign) BOOL setBridgeOnMainQueue; @end
Sum Module (Objective-C++) Sum.mm
Sum Module Header (C++) react-native-sum.h #include <jsi/jsilib.h> #include <jsi/jsi.h> void
installSum(facebook::jsi::Runtime& jsiRuntime);
Sum Module (C++) react-native-sum.cpp
Sum Module (Javascript) App.js export default function App() { return
( <View style={{ flex: 1 }}> <Text>Result: {global.sum(2, 2)}</Text> </View> ); }
Libraries implemented using JSI react-native-reanimated react-native-vision-camera react-native-mmkv react-native-quick-sqlite
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.
Current Architecture
New Architecture
New Architecture + Codegen
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.
What should I do?
What's next?
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
Be my Patreon: https://www.patreon.com/akinncar
Thanks! @akinncar @akinncar