From 4bfab22735f136f400158e745362e3c5d6ae07da Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 8 Jul 2026 14:06:29 +0200 Subject: [PATCH 1/2] docs(react-native): Add reportFullyDisplayed() imperative API Co-Authored-By: Claude Opus 4.6 --- .../instrumentation/time-to-display.mdx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx b/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx index 12853baae3807..2d93703e173db 100644 --- a/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx +++ b/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx @@ -59,7 +59,11 @@ function MyComponent() { ## Time To Full Display -To measure the time when a screen is fully displayed, you can use the `Sentry.TimeToFullDisplay` component. +To measure the time when a screen is fully displayed, you can use the `Sentry.TimeToFullDisplay` component or the imperative `Sentry.reportFullyDisplayed()` API. + +### Using the Component + +The `Sentry.TimeToFullDisplay` component records TTFD when its `record` prop becomes `true`. This is ideal when the fully-displayed state is tied to the component tree. ```jsx {17} {tabTitle: } import * as Sentry from "@sentry/react-native"; @@ -85,6 +89,19 @@ function MyComponent() { } ``` +### Using the Imperative API + +`Sentry.reportFullyDisplayed()` signals TTFD from anywhere in your code — stores, hooks, or callbacks — without needing to be inside the component tree. + +```javascript {tabTitle: reportFullyDisplayed()} +import * as Sentry from "@sentry/react-native"; + +// Call after your screen's content has fully loaded +Sentry.reportFullyDisplayed(); +``` + +If `reportFullyDisplayed()` is called before Time to Initial Display completes, the reported TTFD time is adjusted to match the TTID end time. If it isn't called within the 30-second deadline, the TTFD span is marked as `deadline_exceeded`. Subsequent calls for the same navigation are ignored. + ## Notes From 7cdae31b5d068cb004a798c33c97158445293308 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 10 Jul 2026 08:45:10 +0200 Subject: [PATCH 2/2] Add when to use which explanation --- .../common/tracing/instrumentation/time-to-display.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx b/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx index 2d93703e173db..fcef86dc360d9 100644 --- a/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx +++ b/docs/platforms/react-native/common/tracing/instrumentation/time-to-display.mdx @@ -61,6 +61,8 @@ function MyComponent() { To measure the time when a screen is fully displayed, you can use the `Sentry.TimeToFullDisplay` component or the imperative `Sentry.reportFullyDisplayed()` API. +**When to use which:** Use the component for the common case where the "fully displayed" state maps to a prop or state on a component. Use the imperative API when the signal lives outside the component tree — stores, effects, async callbacks — or when you need fine-grained control over timing. + ### Using the Component The `Sentry.TimeToFullDisplay` component records TTFD when its `record` prop becomes `true`. This is ideal when the fully-displayed state is tied to the component tree.