Screen Loading

Measure how long each React Native screen takes to become interactive with TTID and optional TTFL, using the automatic navigator hook or the manual flow.

Minimum Required SDK Version

Screen Loading is supported starting Luciq SDK version 19.6.0

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

JavaScript

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

APM.setScreenLoadingEnabled(true);

Automatic (React Navigation v6)

Tracks every navigation transition without per-screen code.

Create a NavigationContainerRef and wire both the listener and onStateChange:

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>
  );
}

• 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:

JavaScript

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

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

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.

JavaScript

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

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

• 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)

JavaScript

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

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

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.

---

Disabling/Enabling Screen Loading

JavaScript

//Enable
APM.setScreenLoadingEnabled(true);

JavaScript

//Disable
APM.setScreenLoadingEnabled(false);