Skip to content

SYSTEM Cited by 2 sources

React Native

React Native (RN) is Meta's open-source cross-platform mobile application framework — TypeScript/JavaScript application code running on top of native iOS and Android platform layers, with a bridge (legacy) or JSI + TurboModules + Fabric (New Architecture, reactnative.dev/architecture/landing-page) connecting JS to native UI and APIs. Lets a single codebase ship to both iOS and Android with a large shared surface area and targeted per-platform escape hatches where needed.

RN is governed by Meta as primary maintainer, with significant upstream contributions from partner companies including Shopify (co-release captains), Microsoft (React Native Windows / macOS targets), Amazon, Tesla, SpaceX, and Coinbase. The React Native Working Group — previously including Meta, Twitter, Coinbase, Microsoft — is restarting in 2025 under Shopify's leadership.

Architecture at a glance

  • JS / TypeScript application code runs in a JavaScript engine (Hermes is the current Meta-built default) inside the mobile process.
  • Native platform layer (UIKit on iOS, Android View system on Android) renders actual pixels and handles platform APIs.
  • Bridge (legacy) or JSI + TurboModules + Fabric (New Architecture) marshals calls between JS and native.
  • Hot reloading flips JS module bundles in the running app without restarting — the load-bearing devloop improvement over native (see concepts/hot-reloading-devloop).
  • Native modules (Objective-C / Swift / Kotlin / Java / C++) expose platform APIs to JS — 2D/3D scanning, on-device ML, background-job scheduling, widgets, Apple Watch complications, App Intents, Siri Shortcuts all require native code at some level.

Production evidence

Shopify's 2025-01-13 five-year retrospective (sources/2025-01-13-shopify-five-years-of-react-native-at-shopify) is the first-party disclosure that RN at consumer-app scale can hit <500ms (P75) screen loads and >99.9% crash-free sessions in the Shopify app and across Shopify's portfolio, after five years of migration on a per-team-per-app schedule. Shopify's closing posture: "native doesn't automatically mean fast, and React Native doesn't automatically mean slow." Canonical first-party validation that the bet is payable.

Failure modes the retrospective discloses

  • Framework upgrades are expensive. "Updating an app to each new version of React Native takes a significant amount of work and often requires restructuring the code base." Mitigated by rotating-team staffing (patterns/rotating-framework-upgrade-team) and expected to improve with the New Architecture.
  • Debugging is worse than native. "Debugging in React Native is flakey and configuring it correctly in VSCode takes some work. iOS and Android on the other hand have powerful debugging capabilities that just work." Meta's rewrite of the debugger stack (reactnative.dev/docs/react-native- devtools) is in progress with Shopify collaboration.
  • 3rd-party library reliance is higher than native. The framework is not as comprehensive as native, so more 3rd- party libraries are needed, increasing supply-chain attack surface + dependency-upgrade burden. Mitigated at Shopify via Dependabot-automated dependency updates + automated code scanning for malicious code.
  • Shared foundations come later, not earlier. The same Shopify retrospective discloses that RN adoption initially meant each team built things their own way — the years of shared-native-foundation work didn't carry over. Shopify started extracting common components (Identity, real- time monitoring, performance measurement) into shared libraries across all apps only by end of 2023 — three years into the RN bet. Canonicalised as concepts/shared-mobile-foundations.

Architectural posture at scale: native and RN, not or

Shopify's load-bearing architectural claim: "100% React Native should be an anti-goal." See patterns/mixed-native-plus-cross-platform-mobile-stack. The rule is "build most features once in RN; keep native for features where native is the best tool". Canonical native-is- best-tool categories from the Shopify retrospective:

  • Device hardware — 2D/3D scanning, on-device AI inference.
  • Memory-constrained surfaces — home-screen widgets, lock-screen widgets, Apple Watch apps and complications, App Intents, Siri Shortcuts.
  • Long-running background jobs — Shopify's Point of Sale app downloads + syncs data in the background so it can process transactions offline. "By leveraging native code, we were able to offload that work completely to the background, ensuring that it had no effect on app performance."

Shopify-stewarded RN ecosystem libraries

Shopify is one of RN's largest non-Meta ecosystem contributors and maintains several load-bearing open-source libraries:

  • FlashList — High-performance list component designed to replace FlatList for long lists (avoiding RN list-perf pitfalls that Meta has worked to eliminate).
  • React Native Skia — GPU graphics library exposing Google's Skia 2D rendering library to RN. Sponsored by Shopify.
  • Reanimated — high-performance animations library. Sponsored by Shopify.
  • Restyle — RN styling system (design-system-friendly style primitives).
  • Tophat — macOS app distribution tool for RN workflows.

New Architecture (Fabric + TurboModules + JSI)

Meta's ongoing rewrite of RN's native-JS bridge replaces the asynchronous-message-queue bridge with JSI (JavaScript Interface) for synchronous JS↔native calls, TurboModules for lazily-loaded native modules, and Fabric for the new renderer. See reactnative.dev/architecture/landing-page. Shopify is "stoked about the New Architecture and [is] committed to adopting it in our apps" — a separate 2025-09-12 Shopify post covers the migration itself.

Pillar summary

Pillar Old New
Renderer Paper (async, view-hierarchy mirrored into native) Fabric (synchronous, shared C++ shadow tree)
Native modules Bridge (async, JSON-serialised) TurboModules (synchronous, JSI-bound)
Layout Async layout Synchronous layout (measure before paint)

The new architecture adds state batching (multiple setState calls collapse into one render pass) and view flattening (unused intermediate views are elided from the native tree).

Migration failure modes (from Shopify's 2025-09-12 post)

Documented by sources/2025-09-12-shopify-migrating-to-react-natives-new-architecture:

  • State batching — components that relied on observing intermediate state values between setState calls break under batching. These need refactoring to not depend on specific state-update timing.
  • View flattening — <View ref={ref}> may be optimized out if flattening decides the view is "unnecessary" for the final layout; ref.current then resolves to null. Mostly seen on iOS because Android had view flattening in the old architecture too. Workarounds: add collapsable={false} on views with refs; Shopify auto-fixed the testID case with a Babel plugin that injects collapsable={false} whenever a component has a testID. (See patterns/babel-plugin-automatic-collapsable-false.)
  • Shadow-tree manipulation from native UIManagers — native modules that swap React-Native-declared views (e.g., WebView replacement) cause view-hierarchy desync: React Native and the native OS disagree on what the tree looks like, and tap gestures fail. Fix: move the hybrid component's lifecycle entirely to native code. (See patterns/native-side-lifecycle-for-hybrid-component.)
  • requiresMainQueueSetup: true deadlocks — legacy native modules that request main-queue setup can deadlock on iOS app launch when animations are running on the main thread. Fix: set requiresMainQueueSetup: false unless strictly necessary. (See concepts/legacy-native-module-main-queue-deadlock.)

TurboModules are not mandatory

A crucial operational finding: the new architecture can be enabled without converting any native modules to TurboModules. Conversion is a forward step for performance (no serialisation cost, synchronous JSI binding) but the two concerns are orthogonal. Shopify shipped the new architecture on 40+ legacy native modules and deferred TurboModule conversion for later review.

Dual-architecture compatibility during migration

Because the new architecture is a native binary property (not gated by a remote feature flag), migrating production apps requires a period where the same source tree builds under both old and new architectures. This is the forcing-function behind Shopify's dual-arch CI builds (see patterns/dual-architecture-ci-builds) and feature-flagged dual module implementations (see patterns/feature-flagged-dual-implementation). Shopify's FlashList v2 alpha also shipped with both-architecture support (see systems/flashlist).

Upgrade-first migration order

Shopify's operational guidance: upgrade to the latest RN version before starting the migration. The new architecture is under heavy active development; "the majority of bugs we encountered were fixed with version upgrades." Release the upgrade first to isolate the RN-version delta from the architecture delta — minimises concurrent-change blast radius when diagnosing regressions.

At-launch Fabric wins (Shopify, 2025)

Even without TurboModule conversion, moving to Fabric alone improved app-launch time ~10% on Android, ~3% on iOS. The delta comes from Fabric's more efficient view commit pipeline. Measure-before-paint simplified screen rendering (FlashList v2); batched state cut unnecessary re-renders, making tab switches snappier.

Adoption at other large consumer apps

From the Shopify retrospective: "The community is also thriving with several companies like Microsoft, Amazon, Tesla, SpaceX, and Coinbase using React Native and developers shipping high-quality 3rd party libraries and frameworks."

Seen in

  • sources/2025-09-12-shopify-migrating-to-react-natives-new-architecture — Shopify's migration of Shopify Mobile + Shopify POS; first detailed public account of a large-scale production new- architecture rollout with dual-arch CI, phased store-aware rollout, and explicit stability-tier response playbook. Immediate Fabric wins (~10% Android / ~3% iOS launch time), regressions (up to 20% slower on some complex components, ANR spikes from main-thread native modules), and upstream bug fixes contributed back to RN and Reanimated.
  • sources/2025-01-13-shopify-five-years-of-react-native-at-shopify — Mustafa Ali's five-year retrospective; first-party validation of P75 <500ms screen loads + >99.9% crash-free sessions at Shopify's consumer-app scale; canonical "native and RN, not or" architectural posture and shared-foundations-come-after-maturity timeline.
Last updated · 470 distilled / 1,213 read