TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

React Native App Clip Development

7 posts · Oct 2019 – Sep 2026

What this trail covers

Shopify has transitioned its mobile applications from React Native to native development (Swift and Kotlin) by 2026. This decision is driven by advancements in AI coding models, which have significantly reduced the cost of maintaining parity between platforms. While React Native was successful in enabling cross-stack development and feature sharing, AI agents can now effectively implement features, translate between platforms, and assist with testing and review, diminishing the primary advantage. Helix is a toolset developed to facilitate this migration by breaking down the process into small, reviewable checkpoints and enforcing strict quality gates, including behavior tests, visual reviews using Gemini, and adversarial code reviews, before engineer approval.

All Shopify trails
  1. Helix: The internal tool powering our Shopify app's native migration (2026) - ShopifyIntroduced Helix, a toolset and skills framework designed to accelerate the migration of React Native mobile app features to native Swift and Kotlin. Helix breaks down the migration into small, reviewable checkpoints, each subjected to rigorous gates: behavior tests, visual review by Gemini, adversarial code reviews, and final engineer approval. This iterative process ensures high-quality, maintainable native code by learning from feedback and automating more steps as the migration progresses. Helix can also operate autonomously for extended periods.
  2. Migrating Shop app from React Native to native (2026) - ShopifyThis post details the migration of the Shop app from React Native to native iOS (SwiftUI) and Android (Jetpack Compose) development, driven by advancements in AI coding agents. It highlights the proof of concept, the achieved improvements in startup time (23% on iOS, 50% on Android), session stability (10x reduction in crashes), app size (109MB smaller on Android), and runtime performance. It also discusses the agentic development workflow, the use of tools like Tardis for debugging and parity reviews, and the essential role of native expertise.
  3. Native is now the future of mobile at Shopify (2026) - ShopifyThis post details Shopify's strategic shift from React Native to native mobile development (Swift and Kotlin) by 2026, driven by significant advancements in AI coding models. It explains the rationale behind the initial React Native adoption and the new decision, highlighting how AI agents can now effectively bridge the cost gap in maintaining parity between platforms. The post introduces Helix, a system designed to facilitate a greenfield migration with AI assistance for implementation, testing, and review. It also outlines the future of Shopify's open-source React Native libraries (React Native Skia, FlashList, Restyle) and the migration strategy for their major mobile apps, emphasizing a focus on performance, stability, and accessibility.
  4. Migrating to React Native's New Architecture (2025) - ShopifyThis post details the successful migration of Shopify Mobile and Shopify Point of Sale (POS) to React Native's New Architecture. It outlines the migration strategy, focusing on minimizing code changes, maintaining dual architecture compatibility, and ensuring performance and stability parity. The post details the technical process, including native module strategy (not migrating to TurboModules initially, using feature flags), dependency management, upgrading to the latest React Native version, and minimal app code changes. It also highlights common migration issues such as state batching exposing component issues, the 'blank screen of doom' often related to TurboModules, shadow tree manipulation changes impacting UI, view flattening side effects with refs, and legacy native modules blocking the main thread on iOS. Performance concerns with Reanimated are discussed, along with the collaborative effort to address them. Finally, a detailed rollout strategy for Android and iOS is presented, along with an emergency response plan.
  5. Five years of React Native at Shopify (2025) - ShopifyThis post details Shopify's five-year journey with React Native (RN) for mobile development, highlighting its success in achieving productivity gains, talent portability, and faster value delivery. Key learnings include RN's performance capabilities, the benefits of hot reloading and TypeScript for talent portability, the crucial role of native developers and native code for specific use cases, and the challenges in debugging and RN updates. The post also discusses the increased reliance on third-party libraries and the importance of shared foundations for leverage. The future outlook emphasizes the adoption of RN's New Architecture and continued contributions to the RN community. The company's strategy has evolved from a 'React Native first' approach to a 'native and React Native' hybrid model, leveraging native code for cutting-edge features and background jobs while using RN for the majority of features.
  7. Migrating our Largest Mobile App to React Native - ShopifyThis post details the challenges and evolution of migrating the Shopify Mobile app to React Native. Initially, a gradual adoption strategy was employed, where new features were built in React Native and existing parts were migrated as needed. This proved slow and led to maintaining three architectures and complex interoperability. The strategy shifted to 'Iterative Porting,' building all new features in React Native and migrating existing ones in parallel. This involved an internal RN Accelerator training program, a RICE scoring framework for prioritizing migration, and a focus on improving UX during the porting process. The post highlights the benefits of reduced implementation differences between iOS and Android, increased developer velocity by unifying mobile teams, and simpler, declarative UI code. It concludes by stating that all four root screens of the Shopify Mobile app are now in React Native.
  8. Building a Form with Polaris - ShopifyThis post introduces the Polaris design system and its React components, demonstrating how to build a basic form for adding a product using these components. It covers importing Polaris components, the necessity of the AppProvider, using FormLayout for spacing, and examining HTML and React component structures in developer tools. The tutorial also touches upon basic React state and event handling for form functionality.
  9. Building an App Clip with React Native - ShopifyThis post details the initial exploration and proof-of-concept for building an iOS App Clip using React Native. It highlights the challenges of the 10MB size limit, the need for explicit native dependency management in the Podfile, and the decision to share sub-components rather than entire views between the main Shop app and the App Clip to maintain autonomy and manage size constraints. The initial 'Hello World' App Clip was 28MB, reduced to 4.3MB by explicit dependency management. A scrappy functional version reached 6.5MB, indicating feasibility.
  10. Reusing Code with React Native Packages at Shopify - ShopifyThis post details the adoption of a monorepo strategy for managing shared React Native packages at Shopify. It outlines the considerations between multi-repo and monorepo approaches, favoring monorepo for reduced maintenance costs and lower entrance barriers. The setup involves using TypeScript with project references, Yarn Workspaces, and Lerna for package management and publishing. It also describes the fixture app setup for local testing and hot-reloading, standardized CI pipelines, and code generation using PlopJS for bootstrapping new packages. Documentation is auto-generated with Gatsby. The release process uses Lerna with lifecycle scripts for updating changelogs and generating READMEs, with plans to automate releases via GitHub Actions and conventional commits.
  11. Perspectives on React Native from Three Shopify Developers - ShopifyThis post shares perspectives from three Shopify developers (web, Android, and iOS) on their experiences with React Native. It details the benefits of React Native for web developers transitioning to mobile, for native developers seeking wider reach, and for fostering cross-disciplinary collaboration. It also discusses surprises encountered, such as the simplified building blocks in React Native compared to the web, the ease of creating native bridge modules, and the high quality of React Native apps. Challenges highlighted include the uncertainty of mobile-specific concerns, the complexity of the Node.js ecosystem, and the need for better accessibility support. The post also offers advice for web developers to guide their native colleagues and for native developers to leverage their platform expertise.
  12. Shipit! Presents: How We Write React Native Apps - ShopifyThis post details best practices for building performant React Native apps at Shopify, covering accessibility, theming (Restyle, Polaris), typography, flexible sizing, state management (treating React Native state as Source of Truth, with exceptions for POS app's SQLite), and testing (Jest for unit/integration tests). It also mentions the use of Reanimated 2 in production and Buildkite for CI builds. The post acknowledges that while React Native was valuable, the company is moving towards native development due to AI advancements.
  13. Management of Native Code and React Native at Shopify - ShopifyThis post details Shopify's experience with React Native, highlighting challenges with complex UI components (drag-and-drop grids with animations and gestures) and background processes (database synchronization leading to poor app responsiveness due to single-threaded JS and UI threads). It explains the decision to "go all in" on React Native meant reaching for native code solutions when applicable. For UI, they leaned further into React Native, optimizing rendering performance with tools like `why-did-you-render` and Reanimated 2. For background jobs, they experimented with Kotlin Multiplatform Modules (KMM) to write a native job manager, achieving ~95% code sharing and reducing initial sync time from 30+ seconds to 2-3 seconds. It also provides guidance on integrating KMM into a React Native project.
  14. 5 Ways to Improve Your React Native Styling Workflow - ShopifyThis post details the development of the Restyle library and associated styling best practices for React Native development. It outlines five key principles: creating a design system (defining spacing, color palettes, semantic colors, and text variants), defining a theme object, supplying the theme via React's Context API, breaking the system into reusable components (Box and Text), and using responsive style properties with breakpoints. It also emphasizes enforcing these practices with TypeScript for compile-time validation and autocompletion.
  15. Creating Native Components That Accept React Native Subviews - ShopifyThis post details how to create a native Android component that can render React Native subviews. It covers setting up a React Native project with Kotlin, creating a `ViewGroupManager` to expose the native component, inflating XML layouts, handling views passed from React Native, and adding gesture-based functionality to a bottom sheet component. It also discusses the trade-offs of using native code when cross-platform React Native solutions are not feasible.
  16. React Native is the Future of Mobile at Shopify - ShopifyThis post announces Shopify's strategic decision to move away from React Native for new mobile app development and return to native iOS and Android development. The rationale is based on the company's historical technology adoption strategy, the increasing importance of mobile commerce, and lessons learned from early React Native experiments. The post highlights the productivity gains observed with React Native, the high code-sharing percentages achieved, and the successful rewrites of the Arrive (now Shop app) and Point of Sale (POS) apps. It also outlines scenarios where React Native will not be the default choice and discusses the future investment in React Native similar to other core technologies like Ruby, Rails, and Kubernetes.
  17. How to Write Fast Code in Ruby on Rails - ShopifyThis post details strategies for writing faster code in Ruby on Rails, focusing on Active Record performance (lazy evaluation, selecting fewer columns, avoiding query cache, indexing), Rails performance (caching, throttling, background jobs, dependency management), and Ruby performance (sparing use of metaprogramming, understanding O(n) vs O(1) complexity, minimizing object allocations). It provides specific code examples and references tools like LHM, rack-attack, Sidekiq, and benchmark-ips.