Management of Native Code and React Native at Shopify
Article Summary
Shopify went all-in on React Native, but quickly learned that sometimes you need to break the rules. Here's when they write native code anyway.
A year after betting on React Native, Shopify's mobile team shares hard-won lessons about when JavaScript isn't enough. They tackled complex UI performance and background job issues in their Point of Sale app.
Key Takeaways
- Complex drag-and-drop grid UI stayed in React Native using Reanimated 2
- Background sync rewritten in Kotlin Multiplatform: 95% code sharing across platforms
- Native sync reduced initial sync time from 30+ seconds to 2-3 seconds
- Only 348 lines of platform-specific code versus 3,447 lines of shared code
Shopify keeps UI in React Native even for complex views, but moved heavy background processing to Kotlin Multiplatform for massive performance gains.
About This Article
Shopify's React Native app would freeze during background sync. The issue was that JavaScript runs on a single thread, and when native libraries tried to handle network requests and database work through the bridge, it blocked the UI.
Colin Gray's team built a job manager using Kotlin Multiplatform Module (KMM). This gave them access to native threading on both platforms and let them share 95% of the code between Android and iOS.
The new sync manager cut initial synchronization time from over 30 seconds down to 2-3 seconds for medium-sized stores. They kept the architecture clean with just 348 lines of platform-specific code.