Measuring React Native Rendering Times
Article Summary
Shopify went all-in on React Native, but had one critical question: Is it actually as fast as native? They needed proof, not assumptions.
When Shopify committed to React Native across all mobile apps, they built an open-source performance library to measure what matters: Time To Interactive (TTI). Senior Production Engineer Elvira Burchik explains how they track rendering times end-to-end, including bridge communication delays.
Key Takeaways
- Library measures three scenarios: app startup, navigation, and screen re-renders
- Uses invisible marker views to track actual native rendering, not just React completion
- State machine models multiple render passes before screens become truly interactive
- Integrates with analytics tools like Amplitude in one line of code
- Companion packages available for React Navigation, FlatList, and FlashList profiling
The @shopify/react-native-performance library gives teams concrete TTI metrics to prove React Native performance matches native apps and catch regressions before users notice.
About This Article
Shopify wanted to measure Time To Interactive (TTI) for React Native apps using the same Apdex standard as their native and web teams. The challenge was that React Native's render completion didn't actually mean the app was ready to use. Bridge communication delays meant there was a gap between when React finished rendering and when users could actually interact with the UI.
Elvira Burchik's team created @shopify/react-native-performance, which uses invisible marker views to detect when the UI actually appears in the native window. This captures the full performance picture, including the time it takes for bridge communication. The tool works across three different measurement scenarios.
Teams now see 0.99 percentile TTI for each screen on their dashboards, broken down by day. They catch performance regressions as they happen and calculate Apdex scores to compare which screens are falling behind their historical performance.