(New) Architecture

2022 is going to be was the year of the New Architecture in open source

Processes (single-threaded)

• UI (main): mount host (native) views
• JS: logic -> render: React Elements (tree) -> React Shadow Nodes (C++) tree
• Bg: calc (yoga) React Shadow Tree -> promote/mount to UI

C++ State update skip (React) renders

• React Native New Architecture Working Group

• Blog
• New Architecture (Kotlinization)
• Architecture Overview (rendering w Fabric)

• RNNewArchitectureApp
• RNNewArchitectureLibraries

• Deep dive into React Native’s New Architecture

• How JSI powers the most advanced Camera library (VisionCamera Frame Processing) RN EU 21
• The New React Native: Bringing the Fabric renderer to the Facebook app RN EU 21
• The New React Native RN EU 19

• 👓 Transparency
  • CodeGen Discussion
  • JSI (JavaScript Interface) & JSC (JavaScript Core) Discussion
  • TurboModules (NativeModules Re-architecture)
    • Turbo Modules + Developer Scenarios
  • React Native Fabric (UI-Layer Re-architecture)
• 📚 Guide: Getting Started with The New Architecture (a.k.a. the Playbook)

https://github.com/facebook/react-native/tree/main/ReactCommon/jsi

https://github.com/facebook/react-native/tree/main/packages/react-native/ReactCommon/jsi/jsi

https://github.com/facebook/hermes/tree/main/API/jsi/jsi

Old 🌉

• Native Modules intro (then Android/iOS/npm)
• Native Components (Android/iOS/Direct Manipulation)

Processes (single-threaded)

• UI (main) ... JS ... Bg ...
• RN modules: platform API (via 🌉)
• [RN render (Android L 5.0 to draw UI w OpenGL)]

JS (browser) ➰

---

Building for iOS Intel x86_64 Architecture

Rosetta 2: for running on Apple Silicon machines, while emulating Intel behaviour

rm -rf /Users/<user>/Library/Developer/Xcode/DerivedData

cd ios
arch -x86_64 pod install
..
arch -x86_64 yarn ios

Or patching ndk-build pre-CMake

Excluding arm64

# project.pbxproj
# ...
- "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
+ "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
# ...
- "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
+ "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
# ...

Open Xcode 13 using Rosetta or iTerm

Details

---

React Native > Feature requests