Our Solution for Measuring React Native Rendering Times

Summary

Shopify needed a reliable way to measure React Native rendering times and verify that mobile apps remained as fast as native while adopting React Native. The open-source @shopify/react-native-performance library measures app startup, navigation, and screen re-render times by timing from native startup, a user action, or a UI event until a screen is fully rendered and interactive. It uses an invisible marker view with a native counterpart to capture end-to-end timing, including React Native-to-native bridge communication, and models incremental rendering as interactive or non-interactive render passes in a state machine. Reports can be sent through onReportPrepared to analytics tools such as Amplitude, where percentile TTI dashboards compare screens over time, expose bottlenecks, and help catch regressions; Shopify also uses screen-level Apdex internally.

Takeaways

1. 1

   The library defines Time To Interactive as the time until a screen is rendered on the native side and becomes interactive, including React Native-to-native bridge communication.

2. 2

   RenderPassReport records details such as time to render, sourceScreen, destinationScreen, and flowInstanceId, while an uncompleted interactive pass can indicate that a user backed out before the screen was usable.

3. 3

   Amplitude dashboards can show percentile TTI by screen and day, allowing comparisons, bottleneck analysis, and monitoring for performance regressions.