Migrating to React Native's New Architecture

Shopify successfully migrated two of its largest apps, Shopify Mobile and Shopify Point of Sale (POS) to React Native's New Architecture while maintaining weekly releases and serving millions of merchants. This migration involved a complex codebase with hundreds of screens and native modules, extensive custom components, and deep integration with first-party libraries like FlashList.

Shopify logo
Shopify
•
Thiago Magalhaes
•14 min read•advanced•
--
•View Original
BabelReact

Overview

This article discusses Shopify's successful migration of their apps, Shopify Mobile and Shopify Point of Sale (POS), to React Native's New Architecture. It details their migration strategy, key outcomes, technical challenges faced, and lessons learned, providing valuable insights for other teams considering similar transitions.

What You'll Learn

1

How to maintain development velocity during a migration to React Native's New Architecture

2

Why minimizing code changes initially can prevent build issues during migration

3

How to identify and solve common migration issues at scale

4

When to implement phased rollouts for app updates

Prerequisites & Requirements

  • Familiarity with React Native and mobile app development
  • Experience with large-scale app migrations(optional)

Key Questions Answered

What are the key principles for migrating to React Native's New Architecture?
The key principles include minimizing code changes initially, maintaining dual architecture compatibility during development, and ensuring performance and stability parity with the old architecture. These principles help streamline the migration process while minimizing disruptions.
What common migration issues did Shopify face during their transition?
Shopify encountered issues such as state batching exposing component problems, blank screens due to TurboModules, and view flattening side effects. Solutions included refactoring components, isolating problematic modules, and adjusting component properties to prevent optimization issues.
How did Shopify manage their rollout strategy for the new architecture?
Shopify implemented a gradual rollout strategy, starting with Android at 8% and gradually increasing to 100% over three days. This approach allowed them to monitor stability and performance effectively, especially given the differences in rollout control between the App Store and Play Store.
What performance improvements were observed post-migration?
Post-migration, Shopify noted a 10% improvement in app launch times on Android and a 3% improvement on iOS. Additionally, the new architecture reduced unnecessary re-renders, leading to snappier tab switching and smoother screen loads.

Key Statistics & Figures

App launch time improvement on Android
10%
Observed post-migration
App launch time improvement on iOS
3%
Observed post-migration
Target crash-free sessions for the Shopify app
99.95%
Stability target established for the release

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Framework used for building the mobile applications
Backend
Turbomodules
New architecture feature aimed at improving performance
Frontend
Reanimated
Library used for navigation animations
Frontend
Flashlist
Optimized list component integrated into the apps

Key Actionable Insights

1
Focus on dual architecture testing to ensure continuous integration during migration.
By generating builds for both architectures on every pull request, teams can catch breaking changes early, preventing disruptions in the development workflow.
2
Utilize feature flags for third-party dependencies that do not support both architectures.
This allows developers to conditionally disable features in development, reducing the risk of integration issues while migrating to the new architecture.
3
Prioritize upgrading to the latest React Native version before starting migration.
This ensures that teams benefit from upstream bug fixes and performance improvements, reducing the likelihood of encountering known issues during migration.
4
Implement a phased rollout strategy to mitigate risks associated with app updates.
Gradually increasing the rollout percentage allows teams to monitor stability and address issues without impacting all users at once.

Common Pitfalls

1
Failing to audit dependencies early can lead to compatibility issues during migration.
Identifying incompatible libraries before starting the migration process helps prevent delays and technical debt later on.
2
Neglecting to maintain dual architecture compatibility can disrupt development.
Supporting both architectures during migration allows for continuous testing and reduces the risk of regressions.
3
Overlooking performance tuning post-release can lead to degraded user experiences.
Some components may require adjustments after migration to address performance issues that were not evident during testing.

Related Concepts

React Native Architecture
Mobile App Development Best Practices
Performance Optimization Techniques
Phased Rollout Strategies