---
title: "Our Solution for Measuring React Native Rendering Times"
description: "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."
---

# Our Solution for Measuring React Native Rendering Times

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Nov 24, 2022

**Type:** Tutorial

## 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.

**Tags:** [Monitoring](https://yomu.fyi/topic/monitoring), [Open Source](https://yomu.fyi/topic/open-source), [Performance](https://yomu.fyi/topic/performance), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Shopify](https://shopify.engineering/measuring-react-native-rendering-times)
- Source URL: https://shopify.engineering/measuring-react-native-rendering-times
- Ingested by Yomu: 2026-08-30T13:37:24.523Z

[Read original post](https://shopify.engineering/measuring-react-native-rendering-times)