Management of Native Code and React Native at Shopify

Summary

Shopify’s Point of Sale team describes how its React Native strategy changed after limitations appeared in complex UI and background synchronization. The team kept complicated views in React Native, improving rendering with why-did-you-render, React DevTools Profiler, Application Performance Index measurements, memoization, lazy renders, and Reanimated 2 for drag-and-drop interactions. For background jobs, it built a native job manager with Kotlin Multiplatform Modules, sharing synchronization logic in common/ while isolating platform-specific file, database, networking, preferences, and threading code through libraries or wrappers and exposing it through React Native native modules. The resulting implementation shared approximately 95% of its code and reduced a medium-sized store’s initial sync from at least 30 seconds to 2–3 seconds, while the article notes KMM’s learning curve and recommends a separate library project for clearer boundaries and isolated sandbox testing.

Context

The team initially treated native code as something to use only when absolutely necessary, but complex React Native UI and increasing background jobs exposed performance and responsiveness limitations. Heavy network and native-module interactions made bridge communication expensive, while single-threaded JavaScript and UI threads contributed to an almost entirely unresponsive app during synchronization.

Approach / What changed

The team retained React Native for complex UI, using profiling, memoization, lazy renders, and Reanimated 2 to improve performance. For background synchronization, it created a Kotlin Multiplatform job manager with shared code in common/ and platform-specific wrappers or libraries for database access, GraphQL, file I/O, preferences, and threading. React Native native modules mediate between the app and the KMM library or framework.

Takeaways

• Complex views remained in React Native rather than being split into separate Android and iOS native components; reducing re-renders and using lazy renders produced higher FPS across platforms.
• The KMM sync manager contained 3,447 lines in common/, compared with 170 iOS lines and 178 Android lines, representing approximately 95% code sharing.
• A medium-sized store’s initial synchronization fell from at least 30 seconds with the original JavaScript implementation to 2–3 seconds with the new sync manager.

Related reading