React Native at Instagram
Article Summary
Instagram stayed single-dex on Android while integrating React Native. Martin Bigio and the Core Client team reveal how they pulled it off without bloating their app.
In early 2016, Instagram began exploring React Native to boost developer velocity across iOS and Android. The challenge? Integrating it into a massive existing native app without sacrificing performance, binary size, or Instagram's single-dex status on Android.
Key Takeaways
- Selectively imported only needed view managers, adding just 3,500 methods to Android
- Achieved 85-99% code sharing across products like Post Promote and Comment Moderation
- Post Promote startup times dramatically improved over previous WebView implementation
- Leveraged Random Access Module Bundling and Inline Requires for performance gains
- Metrics showed neutral impact on crashes and out-of-memory errors
Instagram shipped features faster with React Native while maintaining their strict performance standards and single-dex Android build.
About This Article
Instagram's React Native startup was slow because JavaScript bundles had to be injected into JavaScriptCore and native modules needed to be instantiated. The team wanted to measure this against native implementations to understand the performance gap.
Instagram's Core Client team ported the Edit Profile view to React Native. They used React Native team infrastructure like Random Access Module Bundling, Inline Requires, and Native Parallel Fetching to speed up startup times.
The Save team built the iOS saved posts list in React Native. Post Promote achieved 99% code sharing between iOS and Android, with faster startup times and better user experience compared to WebView implementations.