Shopify moved Shopify Mobile and Point of Sale onto React Native's New Architecture while shipping weekly, and watched production reveal cracks its internal testing never did.

Shopify Mobile and Shopify Point of Sale are two of the company’s largest apps: hundreds of screens, extensive custom components, more than 40 native modules, deep integration with first-party libraries like FlashList, and millions of merchants using them. They ship weekly.

All of that was built on React Native’s Old Architecture, and it worked. The New Architecture changes the foundation underneath — a synchronous rendering model, batched state updates, updated native module interfaces — which is exactly why moving to it is not a version bump you can hide behind a remote feature flag.

Shopify measured performance extensively and optimized before rollout. The real-world impact was still more significant than anticipated, and it only became apparent at production scale.

Session stability — crash-free sessions — dropped from the 99.95% target and took a couple of weeks of bug fixing to recover. Load times on some complex components increased by up to 20%. ANR crashes, where the app stops responding, rose on both platforms, some of them caused by Shopify’s own Reanimated and React Native patches that had fixed other performance problems. On iOS, legacy native modules loading on the main thread during launch deadlocked against running animations and crashed the app — an “App Hang” that barely reproduced in development but showed up as numerous crash events in production.

The New Architecture batches state updates together instead of processing them individually. Components that had quietly depended on intermediate state values — values that no longer exist once updates are batched — broke. View flattening optimizes away components it decides the layout doesn’t need, which meant a <View ref={ref}> could be flattened out and leave its ref permanently null, breaking anything downstream that used it, and leaving Appium unable to find views in the end-to-end suite. Native code that manipulated React Native’s shadow tree directly went out of sync with what React Native believed the view hierarchy was, so tap gestures stopped landing and WebViews failed to load or crashed outright.

The strategy had three principles: make only the minimum changes needed to enable the New Architecture and refactor later; keep both architectures working simultaneously during development so regressions surfaced early; and match or beat the old architecture on time-to-interactive and crash-free sessions before shipping. TopHat generated builds for both architectures on every pull request, so new breaking changes couldn’t merge. Feature flags forked module implementations and conditionally disabled functionality where a third-party dependency couldn’t support both architectures on one version.

They upgraded to the latest React Native version first, on the reasoning that the New Architecture was under intense development and the majority of bugs they hit were fixed by version upgrades rather than by their own work. They migrated no modules to TurboModules — with 40+ modules, only the ones that were actually broken got touched. Concrete fixes followed the concrete failures: collapsable={false} on views with refs, a Babel plugin to apply it automatically to anything with a test identifier, requiresMainQueueSetup set to false on legacy native modules, and Mobile Bridge’s WebView pulled out of React Native entirely to be managed natively.

App launch times improved by about 10% on Android and 3% on iOS. Batched state reduced unnecessary re-renders, making things like tab switching snappier. Measure-before-paint let them simplify screen rendering. Development velocity held: weekly releases continued throughout, with zero feature development disruption. FlashList was rebuilt from scratch, and the performance fixes Software Mansion and Meta produced for Shopify’s Reanimated frame-rate drops are being pushed upstream for everyone.

The debts remain visible. Low-occurrence crashes still surface deep in React Native and third-party code. Shopify’s own summary is characteristically flat: given this was a fundamental change to their most important framework, “it could have been much worse.”

A framework migration doesn’t introduce most of the bugs it exposes — it just withdraws the specific behavior your code had been silently relying on, and production is the only place that bill arrives in full.