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.

Context

Shopify needed performance measurements for its React Native apps to verify that user experience remained as high as in native apps. The team wanted a React Native equivalent of the performance monitoring used by its native and web applications, using Time To Interactive as the mobile application response-time metric.

Approach / What changed

The library measures app startup, navigation, and screen re-render times. It starts timers from native lifecycle events or user and UI actions, then stops them when a native counterpart confirms that the screen has moved to the window. A state machine represents mounted, rendered, and unmounted stages, while render passes distinguish interactive from non-interactive states. Reports can be forwarded to analytics systems through onReportPrepared.

Takeaways

• 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.
• 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.
• Amplitude dashboards can show percentile TTI by screen and day, allowing comparisons, bottleneck analysis, and monitoring for performance regressions.

Related reading