Bringing the New React Native Architecture to the OSS community

At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app.

Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system.

But migrating an entire ecosystem to a New Architecture is no easy task.

To support the whole community in this endeavor, we lined up a set of tools and materials that will help both app and library developers to join us in this journey.

In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.

Transcript

2. Bringing the New React Native Architecture to the OSS community Nicola Corti he/him @cortinico
3. he/him Android @ React Native twitter.com/cortinico 
 
 github.com/cortinico 
 
 ncorti.com Nicola Corti
4. React Native New Architecture
5. Parashuram N - React Native's New Architecture React Conf 2018 53K views 3 years ago Joshua Gross - The New React Native: 
 Bringing the Fabric renderer to the “Facebook” app RNEU 2021 15K views 2 years ago 2.5K views 6 months ago Emily Janzer - The New React Native RNEU 2019 React Native New Architecture
6. Parashuram N - React Native's New Architecture React Conf 2018 53K views 3 years ago Joshua Gross - The New React Native: 
 Bringing the Fabric renderer to the “Facebook” app RNEU 2021 15K views 2 years ago 2.5K views 6 months ago Emily Janzer - The New React Native RNEU 2019 React Native New Architecture
8. 2018 Q2 2019
9. 2018 Q2 2019 2020 2021
10. 2020 2021 2022 2023
11. Why
12. Why Why
13. Why • The Bridge • Shared C++ Implementation • Sharing of platform-specific 
 optimizations • Type Safety • New Capabilites
14. Pillars Fabric TurboModule Codegen Bridgless
15. Codegen
16. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native';
17. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native'; export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; }
18. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native'; export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; } export default TurboModuleRegistry.getEnforcing<Spec>('NativeAnswerSolver');
19. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native'; export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; } export default TurboModuleRegistry.getEnforcing<Spec>('Na
20. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native'; export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; } export default TurboModuleRegistry.getEnforcing<Spec>('Na
21. Codegen
22. Codegen public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule { }
23. Codegen public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule { public NativeAnswerSolverSpec(ReactApplicationContext reactContext) { super(reactContext); } }
24. Codegen public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule { public NativeAnswerSolverSpec(ReactApplicationContext reactContext) { super(reactContext); } @ReactMethod(isBlockingSynchronousMethod = true) @DoNotStrip public abstract double answerTheUltimateQuestion(String input); }
25. Codegen public abstract class NativeAnswerSolverSpec extends ReactContextBaseJav implements ReactModuleWithSpec, TurboModule { public NativeAnswerSolverSpec(ReactApplicationContext reactContext) { super(reactContext); } @ReactMethod(isBlockingSynchronousMethod = true) @DoNotStrip public abstract double answerTheUltimateQuestion(String input); }
26. Codegen
27. Codegen @protocol NativeAnswerSolverSpec <RCTBridgeModule, RCTTurboModule> - (NSNumber *)answerTheUltimateQuestion:(NSString *)input; @end namespace facebook { namespace react { /** * ObjC ++ class for module 'NativeAnswerSolver' */ class JSI_EXPORT NativeAnswerSolverSpecJSI : public ObjCTurboModule { public: NativeAnswerSolverSpecJSI(const ObjCTurboModule :: InitParams &params); }; } // namespace react } // namespace facebook
28. Codegen @protocol NativeAnswerSolverSpec <RCTBridgeModule, RCTTurboModule> - (NSNumber *)answerTheUltimateQuestion:(NSString *)input; @end namespace facebook { namespace react { /** * ObjC ++ class for module 'NativeAnswerSolver' */ class JSI_EXPORT NativeAnswerSolverSpecJSI : public ObjCTurboModule { public: NativeAnswerSolverSpecJSI(const ObjCTurboModule :: InitParams &params); }; } // namespace react } // namespace facebook
29. Build Tools • C++ - CMake files • Java/Kt - React Native Gradle Plugin • To replace react.gradle in the future • Custom logic in Ruby Gradle ocoaPods
30. Hermes • Currently recommended 
 for the New Architecture • 0.69 to consume a Bundled Version of Hermes • 0.70 to have Hermes as the default engine
31. Modern Languages • Now supported by the Codegen • Currently fully supported in RN • react-native-website#3018 • Expect Template to be updated in the future • We’re looking into it Typescript Swift Kotlin
32. Timeline & Versions
33. Timeline 68 69 70 71 • New Architecture Support • React 18 Support • Bundled Hermes • Hermes as default • Android NewArch Autolinking • CMake Support • Unified Codegen Config • To the infinity… 72 • Simplified Templates • (More to come…)
34. React 18 & React Native React Native .67 React Native .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
35. React 18 & React Native React Native .67 React Native .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
36. React 18 & React Native React Native .67 React Native .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
37. React 18 & React Native React Native .67 React Native .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
38. React 18 & React Native React Native .67 React Native .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
39. Docs & Material
40. It’s all about Docs…
41. It’s all about Docs…
42. Official Docs
43. Official Docs
44. Official Docs
45. Deep Dives
46. Deep Dives
47. New App Template $ npx react-native init MyAwesomeApp
48. New App Template $ pod install
49. New App Template $ RCT_NEW_ARCH_ENABLED=1 pod install
50. New App Template $ RCT_NEW_ARCH_ENABLED=1 pod install $ npx react-native run-ios
51. New App Template # android/gradle.properties # Use this property to enable support to the new architecture. # This will allow you to use TurboModules and the Fabric render in # your application. You should enable this flag either if you want # to write custom TurboModules/Fabric components OR use libraries that # are providing them. newArchEnabled=false
52. New App Template $ npx react-native run-android # android/gradle.properties # Use this property to enable support to the new architecture. # This will allow you to use TurboModules and the Fabric render in # your application. You should enable this flag either if you want # to write custom TurboModules/Fabric components OR use libraries that # are providing them. newArchEnabled=true
53. New App Template
54. New App Template
55. New Architecture Working Group
56. New Architecture Working Group
57. New Architecture Working Group
58. App Sample Repo
59. App Sample Repo
60. App Sample Repo
61. Library Sample Repo
62. Library Spotlight react-native-slider: Migrated react-native-reanimated: Migrated 
 In the process of testing and profiling for performances react-native-template-new-architecture: Migrated. 
 Gradually adopting/testing more fellow Libraries react-native-template-typescript: Migrated react-native-webview: Started react-native-navigation: Ongoing react-native-pager-view: Ongoing react-native-screens: Migrated react-native-gesture-handler: Migrated
63. React Native New Architecture
64. React Native New Architecture Migrating your whole React Native App to the New Architecture 5 mins read https:// blog.awesomecompany.com/ Lessons Learned from using Fabric and TurboModules in production 7 mins read https:// blog.anotherwesomecompany.com/ How we approached the New Architecture at YAC 5 mins read https:// blog.yetanothercompay.com/
65. Tell us your migration story
66. Nicola Corti @cortinico Thank You & Contribs are Welcome