Tophatting React Native
Article Summary
Charles Zhang from Shopify reveals how they cut React Native code review time from minutes to seconds. The secret? Rethinking how JavaScript bundles get shared between developers.
Shopify built an internal tool that transforms their React Native code review process (called 'tophatting'). Instead of forcing reviewers to rebuild entire apps to test changes, the system stores JavaScript bundles in cloud storage and loads them on demand via QR codes or deep links.
Key Takeaways
- CI pipeline automatically uploads JS bundles to cloud storage on every PR
- Developers scan QR codes to instantly load peer changes without rebuilding
- Backend service manages bundle metadata and abstracts third party authentication
- Tool now used across nearly all React Native projects at Shopify
Shopify eliminated the tedious rebuild cycle for React Native code reviews by treating JavaScript bundles as downloadable artifacts, enabling instant peer testing through QR codes and deep links.
About This Article
At Shopify's scale, tophatting in React Native meant developers had to save their work, switch branches, rebuild apps, and verify changes. This multi-step process ate up significant development time, especially when handling billions in weekly transactions.
Shopify's Mobile Tooling team used React Native's JavaScript bundle artifact to build a component library. It registers a Tophat screen and URL listener, which lets developers inject the tool at the app root level. Bundles can then be downloaded via deep links.
The backend service stores bundle metadata in a SQL database instead of filenames. This approach scales better and supports features like confirmation steps and bundle querying by app ID or branch name. Teams don't need to change their CI pipelines across projects.