The Shopify Experiment: How React Native is Reshaping Mobile Development

This week, through my travels in the digital wilderness, I stumbled across a super insightful case study into Shopify’s five-year migration to React Native (RN) – published straight from Shopify Development HQ. Finding such a tech-heavy case study “genuinely fascinating” probably says a lot about me (nerd alert), but Shopify has long been an active contributor to the React Native community, so diving into their journey was like opening a treasure trove of insights.

For context, Shopify has an impressive roster of native apps, including ShopPay and my personal favourite, Point of Sale – a powerful tool for store owners to manage orders, products, and inventory. These are widely used and deeply embedded in Shopify’s ecosystem. Understanding their journey in navigating such a significant shift in tech stack was kind of interesting, but hearing about how and why they’ve become such a contributor to the framework was probably the more compelling aspect.. so this article is a little bit of column A and column B.

A brief history

Back in 2020, Shopify made waves by announcing React Native as the future of their mobile development. Until then, they had been maintaining separate codebases for iOS and Android, a common yet labour-intensive approach. To streamline this, they embraced hybrid app development with RN for three key reasons:

1. Write it Once – Instead of building the same feature twice, RN allows developers to write code once and deploy it across iOS and Android.
2. Talent Portability – Developers could now work seamlessly across web, iOS, and Android, making teams more flexible and collaborative.
3. Ship More Value – With fewer resources spent on maintaining feature parity, they could focus on delivering value to users faster.

Shopify was no stranger to RN’s potential. Their 2018 acquisition of Tictail, a React Native-first company, offered insights into how far the framework had come. Coupled with Shopify’s expertise in React on the web and Meta’s ongoing improvements to RN, it was clear the timing was right for this bold move.

So what happened.. how did it go?

The results of Shopify’s transition to React Native have been overwhelmingly positive. Their engineers achieved impressive milestones, proving that RN is a viable solution for building world-class apps:

• Improved Productivity: Engineers no longer had to build the same features twice, saving time and boosting efficiency.
• Seamless Collaboration: The ability for developers to work across web and mobile unlocked new growth opportunities and increased team flexibility.
• Faster Shipping: Maintaining feature parity between iOS and Android became a non-issue, allowing more focus on shipping new features.
• Blazing Fast Apps: Shopify achieved sub-500ms screen loads and over 99.9% crash-free sessions across their apps.
• Native Where Needed: They continue to use native development where it’s the best tool for the job, proving that RN doesn’t require an all-or-nothing approach.

Developer lessons from the journey

Shopify’s engineers shared candid learnings throughout their React Native experiment. From the developer’s perspective, here are the highs and lows:

The positives

• React Native Apps Are Fast
  Shopify achieved world-class app performance with React Native, boasting sub-500ms screen loads. While performance requires careful optimisation and good practices, their results show RN is more than capable of delivering lightning-fast apps.
• Hot Reloading Speeds Up Development
  RN’s hot reloading allows developers to see code changes reflected instantly, eliminating long compile times. This accelerates development and keeps developers in the flow, especially when working on large codebases.
• Typescript Unlocks Talent Portability
  By using Typescript, Shopify enabled developers to transition between web and mobile easily. This flexibility allowed teams to share code, collaborate seamlessly, and make the most of their talent.

The challenges

• Debugging Can Be Tricky
  Debugging in RN isn’t as straightforward as in native iOS and Android environments. Setting it up in VSCode requires extra effort, though Meta’s recent updates to the debugging stack look promising.
• Updates Require Work
  Updating to new versions of RN can be time-intensive and sometimes requires restructuring codebases. Shopify mitigated this by dedicating a rotating team to handle updates (must be nice).
• Reliance on Third-Party Libraries
  RN often requires third-party libraries for features that native platforms handle out of the box. While the ecosystem has matured, this adds maintenance overhead and a potential surface for security risks. Shopify addressed this by automating dependency updates and code scanning.

Kudos to Shopify

React Native—and the developer community at large – owes a lot to Shopify. Their contributions have strengthened RN in countless ways, from open-source projects to funding transformative tools. Libraries like Reanimated, Flashlist, and React Native Skia have revolutionised what’s possible with animations and performance. Any of our client’s who enjoy the nice little animations built into their Apps have Shopify’s Reanimated library to thank.

However on a slightly more impactful scale, we’ve leveraged Shopify’s Flashlist in almost all of our apps. Flashlist plays a key role in ensuring the smooth performance of apps we’ve built, particularly include on-demand, high performance apps such as Tipagram and TIPR. Shopify’s involvement has been a game-changer for RN enthusiasts and developers like us, and we’re grateful for their leadership and generosity.

Whether you’re looking to streamline development, improve team flexibility, or deliver faster, more dynamic apps, React Native might just be the tool you’ve been searching for. And thanks to companies like Shopify, the framework continues to evolve—opening doors to new possibilities for everyone in the digital ecosystem.

Thank you Shopify xo