Migrating our Largest Mobile App to React Native

Summary

Shopify’s largest mobile app, Shopify Mobile, had 300 screens per platform and more than six years of development, making a full rewrite impractical because it could take at least three years and halt feature work. The team first adopted React Native incrementally, but migration was projected to take four to five years while requiring three design-system implementations, three architectures, and costly native interoperability. It then switched to “Iterative Porting”: engineers were trained through the five-milestone RN Accelerator, surfaces were inventoried and prioritized with a RICE-based score, and eligible features were migrated behind flags, tested, monitored for two weeks, then completed by removing the native version. The effort also introduced Native Routes, modal deeplink handling on iOS, and component-level Safe Area fixes; with root screens ported and infrastructure in place, the team reports that ports are accelerating, although substantial work remains.

Context

Shopify Mobile was stable and met merchants’ needs, but its size—300 screens per platform and over six years of development—made a full rewrite impractical. Incremental React Native adoption was initially useful for learning and feature delivery, but it would have taken four to five years, required parallel Android, iOS, and React Native architectures, duplicated design-system changes, and made native interoperability time-consuming.

Approach / What changed

The team adopted “Iterative Porting,” building all new features in React Native while migrating existing features in parallel. It trained engineers through the five-milestone RN Accelerator, inventoried migration surfaces with a custom script, prioritized them using a RICE-based score, and migrated eligible features behind feature flags. Each port was tested, monitored for two weeks, then finalized by deleting the native version and removing the flag. Supporting work included Native Routes, iOS modal deeplinks, and component-level Safe Area fixes.

Takeaways

• The initial incremental strategy supported feature delivery and React Native experimentation, but made migration slow and non-deterministic and required maintaining three architectures until completion.
• The team used Reach, Impact, Confidence, and Effort to calculate RICE scores, stack-rank migration targets, schedule ports, and track their status across development cycles.
• Native Routes enabled React Native navigation to native screens while removing backing view controllers and fragments; on iOS, deeplinks were changed to open the target screen as a modal rather than rebuilding the navigation stack.

Related reading