---
title: "Time To Display"
description: "Learn how to measure time to display with the Sentry React Native SDK."
url: https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display/
---

# Time To Display | Sentry for React Native

Sentry's React Native SDK package ships with a tracing feature that allows you to measure your application's [Time to Display](https://docs.sentry.io/product/insights/mobile/mobile-vitals.md#time-to-initial-display-and-time-to-full-display). This guide will show you how to use Sentry's React Native SDK to measure Time to Display in your application.

Time to Display consists of two parts, Time To Initial Display (TTID) and Time To Full Display (TTFD). TTID measures the time it takes to display the first frame, while TTFD measures the time it takes to display the full content for the user to interact with.

## [Automatic Time To Initial Display for React Navigation](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md#automatic-time-to-initial-display-for-react-navigation)

To automatically measure Time to Initial Display of React Navigation Screens, enable the `enableTimeToInitialDisplay` option in your instance of `Sentry.ReactNavigationInstrumentation`.

```jsx
import * as Sentry from "@sentry/react-native";
import { NavigationContainer, createNavigationContainerRef } from "@react-navigation/native";

const navigationIntegration = Sentry.reactNavigationIntegration({

  enableTimeToInitialDisplay: true,

});

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  integrations: [navigationIntegration],
})

function App = () => {
  const containerRef = createNavigationContainerRef();

  return (
    <NavigationContainer
      ref={containerRef}
      onReady={() => {

        navigationIntegration.registerNavigationContainer(containerRef);

      }}>
    </NavigationContainer>
  );
};
```

### [Notes](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md#notes)

* To learn more about Sentry's React Navigation integration, see the [Automatic Instrumentation page](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/automatic-instrumentation.md).

* The measured value of Time to Initial Display starts when React Navigation dispatches the navigation event and ends when the next frame after the native Screen component initialization is rendered.

* If the screen is animated, the measured value of Time to Initial Display will include the time it takes for the animation to complete (except for JavaScript driven animations on iOS).

* Time to Initial Display is only available for React Navigation version 5 and above.

### [Using Time to Display with TabNavigator](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md#using-time-to-display-with-tabnavigator)

When using React Navigation’s `TabNavigator` or other navigators that **preload or re-use routes**, automatic instrumentation with `enableTimeToInitialDisplay` may not always create a `TimeToInitialDisplay` span. This is because auto-TTID only records the first time a route is seen; on preloaded or already-visited routes, TTID may be skipped. Since `TimeToFullDisplay` depends on an active TTID span, this can result in missing TTFD spans in Sentry.

Recent versions of the React Native SDK have introduced fixes and fallbacks for some of these cases. However, Sentry’s mobile team has verified that **[custom/manual instrumentation](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/custom-instrumentation.md) remains the most reliable solution** today, particularly for tabbed navigation scenarios.

We recommend explicitly adding both components on screens within a `TabNavigator`:

```jsx
<TimeToInitialDisplay record={true} />
<TimeToFullDisplay record={isLoading === false} />
```

## [Time To Initial Display Overwrite](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md#time-to-initial-display-overwrite)

When the automatically captured Time to Initial Display doesn't meet your requirements, you can overwrite it by using `Sentry.TimeToInitialDisplay` component.

```jsx
import * as Sentry from "@sentry/react-native";
import * as React from "react";
import { View } from "react-native";

function MyComponent() {
  return (
    <View>

      <Sentry.TimeToInitialDisplay record={true} />

    </View>
  );
}
```

## [Time To Full Display](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md#time-to-full-display)

To measure the time when a screen is fully displayed, you can use the `Sentry.TimeToFullDisplay` component.

```jsx
import * as Sentry from "@sentry/react-native";
import { useState, useEffect } from "react";
import { View, Text } from "react-native";

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  const shouldRecordFullDisplay = data !== null;
  return (
    <View>

      <Sentry.TimeToFullDisplay record={shouldRecordFullDisplay} />

      {data ? <Text>{data}</Text> : <Text>Loading...</Text>}
    </View>
  );
}
```

## [Notes](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md#notes-1)

* The `Sentry.TimeToInitialDisplay` and `Sentry.TimeToFullDisplay` components behave the same as `<></>` when wrapped around other components.

* Any scheduled animations executed after the `Sentry.TimeToInitialDisplay` and `Sentry.TimeToFullDisplay` components are recorded won't be included in the measured Time to Display values.

* This guide assumes you are using a Sentry React Native SDK on version 5.20.0 or higher.

## [Troubleshooting](https://docs.sentry.io/platforms/react-native/tracing/instrumentation/time-to-display.md#troubleshooting)

* Time To Display is not available on Web yet.

* Time To Display supports Expo applications, but doesn't work for Expo Go. Build the native projects to test this feature.

* Time To Display requires Sentry's native components. When upgrading from older SDK versions, rebuild the native projects to ensure the native components are up to date.