# Screen Loading

{% hint style="warning" %}

#### **Minimum Required SDK Version**

Screen Loading is supported starting Luciq SDK version 19.6.0
{% endhint %}

Screen Loading measures how long each screen takes to become interactive (TTID) and, optionally, fully loaded (TTFL). It supports an automatic flow that hooks into your navigator and a manual flow for custom or data-driven screens.

#### Enabling the feature

Make sure the SDK is initialized and use the below API to enable screen loading for your React Native app

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { APM } from '@luciq/react-native';

APM.setScreenLoadingEnabled(true);
```

{% endtab %}
{% endtabs %}

#### Automatic (React Navigation v6)

Tracks every navigation transition without per-screen code.

Create a `NavigationContainerRef` and wire both the listener and `onStateChange`:

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import Luciq from '@luciq/react-native';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  useEffect(() => {
    Luciq.setNavigationListener(navigationRef);
  }, [navigationRef]);

  return (
    <NavigationContainer ref={navigationRef} onStateChange={Luciq.onStateChange}>
      {/* ... */}
    </NavigationContainer>
  );
}
```

{% endtab %}
{% endtabs %}

* `setNavigationListener` starts the span on navigation dispatch.
* `onStateChange` ends the span when the new route is committed.

**Excluding Routes**

To opt specific screens out of automatic measurement:

{% tabs %}
{% tab title="JavaScript" %}

```javascript
APM.excludeScreenLoadingRoutes(['SplashScreen', 'Modal']);
APM.includeScreenLoadingRoutes(['Modal']); // omit the argument to clear all exclusions
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}

1. Do not also call `Luciq.reportScreenChange` for the same route, that double-counts the screen change.
2. For `react-native-navigation` (Wix), screen changes are reported via the component listener registered in the Repro Steps section. Use the manual flow below for screen loading instead
   {% endhint %}

#### Manual Approach (Component wrapper `LuciqCaptureScreenLoading`)

Use this when you do not use a supported navigator, render screens conditionally, or need a precise "screen is ready" signal that includes async data.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { LuciqCaptureScreenLoading } from '@luciq/react-native';

export function ProductScreen() {
  return (
    <LuciqCaptureScreenLoading
      screenName="ProductScreen"
      onMeasured={(ttidMs) => console.log('TTID:', ttidMs)}>
      {/* screen content */}
    </LuciqCaptureScreenLoading>
  );
}
```

{% endtab %}
{% endtabs %}

* The span starts at component construction and ends after first layout (TTID).
* Pass `record={false}` to skip measurement on a specific render. Nested wrappers are auto-ignored.

**Extend the active trace until data is ready (TTFL)**

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { APM } from '@luciq/react-native';

useEffect(() => {
  fetchProduct().then(() => {
    APM.endScreenLoading(); // marks "screen fully loaded" (TTFL)
  });
}, []);
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
`APM.endScreenLoading()` requires an active UI trace from either the automatic or manual approach running on the current screen. Call it once when the content is meaningfully visible to the user.
{% endhint %}

***

#### Disabling/Enabling Screen Loading

{% tabs %}
{% tab title="JavaScript" %}

```javascript
//Enable
APM.setScreenLoadingEnabled(true);
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="JavaScript" %}

```javascript
//Disable
APM.setScreenLoadingEnabled(false);
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.luciq.ai/react-native/setup-luciq-for-react-native/setup-application-performance-monitoring/screen-loading.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.