React Native App Clip Development

9/5/2025

This post details Shopify's successful migration of its large mobile applications (Shopify Mobile and Shopify POS) to React Native's New Architecture. It outlines the guiding principles of minimizing code changes, maintaining dual architecture compatibility, and ensuring performance parity. The migration strategy involved dual architecture testing via TopHat, conditional functionality using feature flags, and updating dependencies. Key technical challenges and their solutions are discussed, including state batching, blank screen issues, shadow tree manipulation, view flattening, and legacy native module main thread usage. Animation performance concerns with Reanimated were also addressed. The post details a gradual rollout approach for both Android and iOS, along with an emergency response plan. The team deferred full TurboModule migration to focus on initial compatibility, making minimal app code changes and leveraging latest React Native versions.

1/13/2025

This post reflects on five years of React Native adoption at Shopify, detailing the reasons for the switch (write once, talent portability, ship more value), the successful outcomes (productivity, speed, stability), and key learnings. It highlights the performance achieved, the benefits of hot reloading and TypeScript, the continued importance of native developers and code, and the challenges faced in debugging, updates, and reliance on third-party libraries. The post also emphasizes the leverage gained from extracting shared foundations into common libraries and expresses optimism for the future of React Native and Shopify's continued contributions.

11/26/2021

This post details the technical challenges and solutions for building an App Clip with React Native. Key contributions include: identifying and addressing the significant size overhead of React Native in App Clips by explicitly defining native dependencies in the Podfile, demonstrating a 'Hello World' App Clip size reduction from 28MB to 4.3MB; outlining a proof-of-concept strategy for failing fast on technical feasibility; exploring and rejecting a full code-sharing approach for the order view due to complexity and risk to the App Clip's size limit; and proposing a compromise of sharing sub-components like `<ProductRow />` while managing native dependencies like `react-native-fast-image`.

7/16/2021

This post provides a multi-perspective view on React Native development at Shopify, featuring insights from web, Android, and iOS developers. It highlights the benefits of React Native for expanding web developer capabilities, accelerating native development, and fostering cross-team collaboration. Key technical discussions include the simplified building blocks of React Native UI components compared to web, the efficiency of the development feedback loop, the integration of native bridge modules, and the surprising quality of React Native apps. Challenges discussed include mobile-specific concerns, the complexity of the node ecosystem, and accessibility. The post also touches on tooling improvements, such as command-line abstractions for IDEs, and the positive impact of TypeScript.