@luciq/react-native 19.4.0-47504-SNAPSHOT → 19.6.0

package/android/src/main/java/ai/luciq/reactlibrary/RNLuciqNetworkLoggerModule.java

@@ -32,8 +32,6 @@ import java.util.concurrent.ConcurrentHashMap;
 
 public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
 
-    private static final String NET_TAG = "LCQ-RN-NET";
-
     public final ConcurrentHashMap<String, OnCompleteCallback<NetworkLogSnapshot>> callbackMap = new ConcurrentHashMap<String, OnCompleteCallback<NetworkLogSnapshot>>();
 
     public RNLuciqNetworkLoggerModule(ReactApplicationContext reactContext) {
@@ -59,9 +57,7 @@ public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
     }
 
     private boolean getFlagValue(String key) {
-        boolean value = InternalAPM._isFeatureEnabledCP(key, "");
-        Log.d(NET_TAG, "[getFlagValue] key=" + key + ", value=" + value);
-        return value;
+        return InternalAPM._isFeatureEnabledCP(key, "");
     }
 
     private WritableMap convertFromMapToWritableMap(Map<String, Object> map) {
@@ -90,18 +86,14 @@ public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
      */
     @ReactMethod
     public void isNativeInterceptionEnabled(Promise promise) {
-        Log.d(NET_TAG, "[isNativeInterceptionEnabled] Querying CP_NATIVE_INTERCEPTION_ENABLED flag");
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 try {
-                    boolean enabled = getFlagValue(CP_NATIVE_INTERCEPTION_ENABLED);
-                    Log.d(NET_TAG, "[isNativeInterceptionEnabled] Result=" + enabled);
-                    promise.resolve(enabled);
+                    promise.resolve(getFlagValue(CP_NATIVE_INTERCEPTION_ENABLED));
                 } catch (Exception e) {
-                    Log.e(NET_TAG, "[isNativeInterceptionEnabled] Error — falling back to false (JS interceptor)", e);
                     e.printStackTrace();
-                    promise.resolve(false);
+                    promise.resolve(false); // Will rollback to JS interceptor
                 }
 
             }
@@ -115,18 +107,14 @@ public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
      */
     @ReactMethod
     public void hasAPMNetworkPlugin(Promise promise) {
-        Log.d(NET_TAG, "[hasAPMNetworkPlugin] Querying APM_NETWORK_PLUGIN_INSTALLED flag");
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 try {
-                    boolean hasPlugin = getFlagValue(APM_NETWORK_PLUGIN_INSTALLED);
-                    Log.d(NET_TAG, "[hasAPMNetworkPlugin] Result=" + hasPlugin);
-                    promise.resolve(hasPlugin);
+                    promise.resolve(getFlagValue(APM_NETWORK_PLUGIN_INSTALLED));
                 } catch (Exception e) {
-                    Log.e(NET_TAG, "[hasAPMNetworkPlugin] Error — falling back to false", e);
                     e.printStackTrace();
-                    promise.resolve(false);
+                    promise.resolve(false);  // Will rollback to JS interceptor
                 }
 
             }
@@ -136,14 +124,12 @@ public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
 
     @ReactMethod
     public void registerNetworkLogsListener() {
-        Log.d(NET_TAG, "[registerNetworkLogsListener] Registering network log sanitizer");
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 InternalAPM._registerNetworkLogSanitizer((networkLogSnapshot, onCompleteCallback) -> {
                     final String id = String.valueOf(onCompleteCallback.hashCode());
                     callbackMap.put(id, onCompleteCallback);
-                    Log.d(NET_TAG, "[NetworkLogSanitizer] Received snapshot — id=" + id + ", url=" + networkLogSnapshot.getUrl() + ", responseCode=" + networkLogSnapshot.getResponseCode() + ", callbackMapSize=" + callbackMap.size());
 
                     WritableMap networkSnapshotParams = Arguments.createMap();
                     networkSnapshotParams.putString("id", id);
@@ -161,7 +147,6 @@ public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
                     }
 
                     sendEvent(Constants.LCQ_NETWORK_LOGGER_HANDLER, networkSnapshotParams);
-                    Log.d(NET_TAG, "[NetworkLogSanitizer] Sent event to JS: " + Constants.LCQ_NETWORK_LOGGER_HANDLER + " for " + networkLogSnapshot.getUrl());
                 });
             }
         });
@@ -169,12 +154,10 @@ public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
 
     @ReactMethod
     public void resetNetworkLogsListener() {
-        Log.d(NET_TAG, "[resetNetworkLogsListener] Clearing network log sanitizer, callbackMapSize=" + callbackMap.size());
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 InternalAPM._registerNetworkLogSanitizer(null);
-                Log.d(NET_TAG, "[resetNetworkLogsListener] Sanitizer cleared");
             }
         });
     }
@@ -189,28 +172,23 @@ public class RNLuciqNetworkLoggerModule extends EventEmitterModule {
             ReadableMap requestHeaders,
             ReadableMap responseHeaders
     ) {
-        Log.d(NET_TAG, "[updateNetworkLogSnapshot] callbackID=" + callbackID + ", url=" + url + ", responseCode=" + responseCode + ", callbackMapSize=" + callbackMap.size());
         try {
+            // Convert ReadableMap to a Java Map for easier handling
             Map<String, Object> requestHeadersMap = convertReadableMapToMap(requestHeaders);
             Map<String, Object> responseHeadersMap = convertReadableMapToMap(responseHeaders);
 
             NetworkLogSnapshot modifiedSnapshot = null;
             if (!url.isEmpty()) {
                 modifiedSnapshot = new NetworkLogSnapshot(url, requestHeadersMap, requestBody, responseHeadersMap, responseBody, responseCode);
-            } else {
-                Log.d(NET_TAG, "[updateNetworkLogSnapshot] Empty URL — snapshot will be null (request filtered/removed)");
             }
 
             final OnCompleteCallback<NetworkLogSnapshot> callback = callbackMap.get(callbackID);
             if (callback != null) {
                 callback.onComplete(modifiedSnapshot);
                 callbackMap.remove(callbackID);
-                Log.d(NET_TAG, "[updateNetworkLogSnapshot] Callback invoked and removed for " + callbackID + ", remaining=" + callbackMap.size());
-            } else {
-                Log.e(NET_TAG, "[updateNetworkLogSnapshot] No callback found for callbackID=" + callbackID + " — possible leak or duplicate call, mapKeys=" + callbackMap.keySet());
             }
         } catch (Exception e) {
-            Log.e(NET_TAG, "[updateNetworkLogSnapshot] Exception processing snapshot: " + e.getMessage() + " for callbackID=" + callbackID, e);
+            // Reject the promise to indicate an error occurred
             Log.e("IB-CP-Bridge", "LuciqNetworkLogger.updateNetworkLogSnapshot failed to parse the network snapshot object.");
         }
     }

package/android/src/main/java/ai/luciq/reactlibrary/RNLuciqReactnativeModule.java

@@ -86,7 +86,6 @@ import javax.annotation.Nullable;
 public class RNLuciqReactnativeModule extends EventEmitterModule {
 
     private static final String TAG = "Luciq-RN-Core";
-    private static final String NET_TAG = "LCQ-RN-NET";
 
     private LuciqCustomTextPlaceHolder placeHolders;
     private static Report currentReport;
@@ -164,7 +163,6 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
 
 
     ) {
-        Log.d(NET_TAG, "[init] Called — logLevel=" + logLevel + ", useNativeNetworkInterception=" + useNativeNetworkInterception + ", codePushVersion=" + codePushVersion + ", appVariant=" + appVariant);
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
@@ -206,7 +204,6 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
                 }
 
                 builder.build();
-                Log.d(NET_TAG, "[init] SDK build complete");
             }
         });
     }
@@ -972,7 +969,6 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
                                   final String requestHeaders,
                                   final String responseHeaders,
                                   final double duration) {
-        Log.d(NET_TAG, "[networkLogAndroid-Core] Received from JS: " + method + " " + url + ", status=" + (int) responseCode + ", duration=" + (long) duration + "ms, reqBodyLen=" + (requestBody != null ? requestBody.length() : 0) + ", resBodyLen=" + (responseBody != null ? responseBody.length() : 0));
         try {
             final String date = String.valueOf(System.currentTimeMillis());
 
@@ -989,14 +985,11 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
                 networkLog.setRequestHeaders(requestHeaders);
                 networkLog.setResponseHeaders(responseHeaders);
             } catch (OutOfMemoryError | Exception exception) {
-                Log.e(NET_TAG, "[networkLogAndroid-Core] OOM/Error setting log contents: " + exception.getMessage() + " for " + method + " " + url);
                 Log.d(TAG, "Error: " + exception.getMessage() + "while trying to set network log contents (request body, response body, request headers, and response headers).");
             }
 
             networkLog.insert();
-            Log.d(NET_TAG, "[networkLogAndroid-Core] Successfully inserted NetworkLog: " + method + " " + url);
         } catch (OutOfMemoryError | Exception exception) {
-            Log.e(NET_TAG, "[networkLogAndroid-Core] OOM/Error inserting network log: " + exception.getMessage() + " for " + method + " " + url);
             Log.d(TAG, "Error: " + exception.getMessage() + "while trying to insert a network log");
         }
     }
@@ -1085,16 +1078,18 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
      * Reports that the screen has been changed (Repro Steps) the screen sent to this method will be the 'current view' on the dashboard
      *
      * @param screenName string containing the screen name
+     * @param spanId the span ID for screen loading tracking (nullable)
      */
     @ReactMethod
-    public void reportScreenChange(final String screenName) {
+    public void reportScreenChange(final String screenName, @Nullable final String spanId) {
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 try {
-                    Method method = getMethod(Class.forName("ai.luciq.library.Luciq"), "reportScreenChange", Bitmap.class, String.class);
+                    Long uiTraceId = spanId != null ? Long.parseLong(spanId) : null;
+                    Method method = getMethod(Class.forName("ai.luciq.library.Luciq"), "reportScreenChange", Bitmap.class, String.class , Long.class);
                     if (method != null) {
-                        method.invoke(null, null, screenName);
+                        method.invoke(null, null, screenName , uiTraceId);
                     }
                 } catch (Exception e) {
                     e.printStackTrace();
@@ -1177,7 +1172,7 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
      */
     @ReactMethod
     public void registerFeatureFlagsChangeListener() {
-        Log.d(NET_TAG, "[registerFeatureFlagsChangeListener] Registering native feature flags listener");
+
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
@@ -1185,7 +1180,6 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
                     InternalCore.INSTANCE._setFeaturesStateListener(new FeaturesStateListener() {
                         @Override
                         public void invoke(@NonNull CoreFeaturesState featuresState) {
-                            Log.d(NET_TAG, "[FeatureFlagsListener] Received update — W3CTraceID=" + featuresState.isW3CExternalTraceIdEnabled() + ", generatedHeader=" + featuresState.isAttachingGeneratedHeaderEnabled() + ", caughtHeader=" + featuresState.isAttachingCapturedHeaderEnabled() + ", networkBodyLimit=" + featuresState.getNetworkLogCharLimit());
                             WritableMap params = Arguments.createMap();
                             params.putBoolean("isW3ExternalTraceIDEnabled", featuresState.isW3CExternalTraceIdEnabled());
                             params.putBoolean("isW3ExternalGeneratedHeaderEnabled", featuresState.isAttachingGeneratedHeaderEnabled());
@@ -1193,11 +1187,9 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
                             params.putInt("networkBodyLimit",featuresState.getNetworkLogCharLimit());
 
                             sendEvent(Constants.LCQ_ON_FEATURE_FLAGS_UPDATE_RECEIVED_CALLBACK, params);
-                            Log.d(NET_TAG, "[FeatureFlagsListener] Sent event to JS: " + Constants.LCQ_ON_FEATURE_FLAGS_UPDATE_RECEIVED_CALLBACK);
                         }
                     });
                 } catch (Exception e) {
-                    Log.e(NET_TAG, "[registerFeatureFlagsChangeListener] Failed to register listener", e);
                     e.printStackTrace();
                 }
 
@@ -1212,16 +1204,13 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
      */
     @ReactMethod
     public void isW3ExternalTraceIDEnabled(Promise promise) {
-        Log.d(NET_TAG, "[isW3ExternalTraceIDEnabled] Querying native flag");
+
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 try {
-                    boolean enabled = InternalCore.INSTANCE._isFeatureEnabled(CoreFeature.W3C_EXTERNAL_TRACE_ID);
-                    Log.d(NET_TAG, "[isW3ExternalTraceIDEnabled] Result=" + enabled);
-                    promise.resolve(enabled);
+                    promise.resolve(InternalCore.INSTANCE._isFeatureEnabled(CoreFeature.W3C_EXTERNAL_TRACE_ID));
                 } catch (Exception e) {
-                    Log.e(NET_TAG, "[isW3ExternalTraceIDEnabled] Error querying flag", e);
                     e.printStackTrace();
                     promise.resolve(false);
                 }
@@ -1237,16 +1226,13 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
      */
     @ReactMethod
     public void isW3ExternalGeneratedHeaderEnabled(Promise promise) {
-        Log.d(NET_TAG, "[isW3ExternalGeneratedHeaderEnabled] Querying native flag");
+
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 try {
-                    boolean enabled = InternalCore.INSTANCE._isFeatureEnabled(CoreFeature.W3C_ATTACHING_GENERATED_HEADER);
-                    Log.d(NET_TAG, "[isW3ExternalGeneratedHeaderEnabled] Result=" + enabled);
-                    promise.resolve(enabled);
+                    promise.resolve(InternalCore.INSTANCE._isFeatureEnabled(CoreFeature.W3C_ATTACHING_GENERATED_HEADER));
                 } catch (Exception e) {
-                    Log.e(NET_TAG, "[isW3ExternalGeneratedHeaderEnabled] Error querying flag", e);
                     e.printStackTrace();
                     promise.resolve(false);
                 }
@@ -1261,16 +1247,13 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
      */
     @ReactMethod
     public void isW3CaughtHeaderEnabled(Promise promise) {
-        Log.d(NET_TAG, "[isW3CaughtHeaderEnabled] Querying native flag");
+
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 try {
-                    boolean enabled = InternalCore.INSTANCE._isFeatureEnabled(CoreFeature.W3C_ATTACHING_CAPTURED_HEADER);
-                    Log.d(NET_TAG, "[isW3CaughtHeaderEnabled] Result=" + enabled);
-                    promise.resolve(enabled);
+                    promise.resolve(InternalCore.INSTANCE._isFeatureEnabled(CoreFeature.W3C_ATTACHING_CAPTURED_HEADER));
                 } catch (Exception e) {
-                    Log.e(NET_TAG, "[isW3CaughtHeaderEnabled] Error querying flag", e);
                     e.printStackTrace();
                     promise.resolve(false);
                 }
@@ -1364,16 +1347,13 @@ public class RNLuciqReactnativeModule extends EventEmitterModule {
      */
     @ReactMethod
     public void getNetworkBodyMaxSize(Promise promise) {
-        Log.d(NET_TAG, "[getNetworkBodyMaxSize] Querying network body size limit");
+
         MainThreadHandler.runOnMainThread(new Runnable() {
             @Override
             public void run() {
                 try {
-                    Object limit = InternalCore.INSTANCE.get_networkLogCharLimit();
-                    Log.d(NET_TAG, "[getNetworkBodyMaxSize] Result=" + limit);
-                    promise.resolve(limit);
+                    promise.resolve(InternalCore.INSTANCE.get_networkLogCharLimit());
                 } catch (Exception e) {
-                    Log.e(NET_TAG, "[getNetworkBodyMaxSize] Error querying limit", e);
                     e.printStackTrace();
                     promise.resolve(false);
                 }

package/android/src/main/java/ai/luciq/reactlibrary/utils/EventEmitterModule.java

@@ -1,7 +1,5 @@
 package ai.luciq.reactlibrary.utils;
 
-import android.util.Log;
-
 import androidx.annotation.Nullable;
 import androidx.annotation.VisibleForTesting;
 
@@ -12,7 +10,6 @@ import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 
 public abstract class EventEmitterModule extends ReactContextBaseJavaModule {
-    private static final String NET_TAG = "LCQ-RN-NET";
     private int listenerCount = 0;
 
     public EventEmitterModule(ReactApplicationContext context) {
@@ -25,18 +22,14 @@ public abstract class EventEmitterModule extends ReactContextBaseJavaModule {
             getReactApplicationContext()
                     .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                     .emit(event, params);
-        } else {
-            Log.w(NET_TAG, "[EventEmitter] Event DROPPED (no JS listeners): event=" + event + ", module=" + getName() + ", listenerCount=0");
         }
     }
 
     protected void addListener(String ignoredEvent) {
         listenerCount++;
-        Log.d(NET_TAG, "[EventEmitter] addListener — module=" + getName() + ", event=" + ignoredEvent + ", listenerCount=" + listenerCount);
     }
 
     protected void removeListeners(Integer count) {
         listenerCount -= count;
-        Log.d(NET_TAG, "[EventEmitter] removeListeners — module=" + getName() + ", removed=" + count + ", listenerCount=" + listenerCount);
     }
 }

package/dist/components/LuciqCaptureScreenLoading.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export interface LuciqScreenLoadingProps extends ViewProps {
+    screenName: string;
+    record?: boolean;
+    onMeasured?: (ttid: number) => void;
+}
+export declare function LuciqCaptureScreenLoading(props: LuciqScreenLoadingProps): React.JSX.Element;

package/dist/components/LuciqCaptureScreenLoading.js

@@ -0,0 +1,154 @@
+import React, { useState, useRef, useEffect, useLayoutEffect, useContext } from 'react';
+import { View } from 'react-native';
+import { ScreenLoadingManager } from '../modules/apm/ScreenLoadingManager';
+import { Logger } from '../utils/logger';
+import { nowMicros, toEpochMicros } from '../utils/LuciqUtils';
+// Context to handle nested components
+const ScreenLoadingContext = React.createContext(false);
+export function LuciqCaptureScreenLoading(props) {
+    const { screenName, record, onMeasured, onLayout, children, ...viewProps } = props;
+    const isNested = useContext(ScreenLoadingContext);
+    // Refs for timestamps (these don't need to trigger re-renders)
+    const constructorTimestampRef = useRef(nowMicros()); // microseconds
+    const renderStartTimestampRef = useRef(undefined);
+    const renderEndTimestampRef = useRef(undefined);
+    const mountTimestampRef = useRef(undefined);
+    // Guards to ensure single execution
+    const initializedRef = useRef(false);
+    const hasFirstRenderCompletedRef = useRef(false);
+    const attributesRecordedRef = useRef(false);
+    const initialSpanIdRef = useRef(null);
+    // Capture render start timestamp ONLY on first render
+    if (!hasFirstRenderCompletedRef.current) {
+        renderStartTimestampRef.current = nowMicros();
+    }
+    // Initialize span - runs once like constructor (lazy initialization)
+    if (!initializedRef.current) {
+        initializedRef.current = true;
+        // Initialize span if conditions are met
+        try {
+            if (record !== false && ScreenLoadingManager.isFeatureEnabled()) {
+                const span = ScreenLoadingManager.createSpan(screenName, true, constructorTimestampRef.current);
+                if (span) {
+                    initialSpanIdRef.current = span.spanId;
+                    Logger.log(`[LuciqScreenLoading] Span ${span.spanId} created in constructor`);
+                }
+            }
+        }
+        catch (error) {
+            Logger.error('[LuciqScreenLoading] Failed to create span:', error);
+        }
+    }
+    const [spanId, setSpanId] = useState(initialSpanIdRef.current);
+    const [isMeasured, setIsMeasured] = useState(false);
+    // Ref to avoid stale closure in useLayoutEffect
+    const onMeasuredRef = useRef(onMeasured);
+    useEffect(() => {
+        onMeasuredRef.current = onMeasured;
+    }, [onMeasured]);
+    // Refs to track latest values for cleanup (componentWillUnmount)
+    const spanIdRef = useRef(spanId);
+    const isMeasuredRef = useRef(isMeasured);
+    // Keep refs in sync with state
+    useEffect(() => {
+        spanIdRef.current = spanId;
+    }, [spanId]);
+    useEffect(() => {
+        isMeasuredRef.current = isMeasured;
+    }, [isMeasured]);
+    // Handle nested component detection
+    useEffect(() => {
+        // Check if we're nested and should ignore this component
+        if (isNested && initialSpanIdRef.current) {
+            Logger.log(`[LuciqScreenLoading] Nested component detected, ignoring span ${initialSpanIdRef.current}`);
+            // Cancel the span
+            setSpanId(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Empty deps = componentDidMount
+    // Record lifecycle timestamps after first render completes (synchronous)
+    // useLayoutEffect fires synchronously after DOM mutations but before browser paint
+    useLayoutEffect(() => {
+        // Skip if no span, already recorded, or nested
+        if (!spanId || attributesRecordedRef.current || isNested) {
+            return;
+        }
+        // endSpan is async (native frame timestamp fetch), fire-and-forget from useLayoutEffect
+        ScreenLoadingManager.endSpan(spanId)
+            .then(() => {
+            const completedSpan = ScreenLoadingManager.getActiveSpan(spanId);
+            if (completedSpan?.ttid && onMeasuredRef.current) {
+                onMeasuredRef.current(completedSpan.ttid / 1000);
+            }
+        })
+            .catch((error) => {
+            Logger.warn('[LuciqScreenLoading] Failed to end span:', error);
+        });
+        attributesRecordedRef.current = true;
+        mountTimestampRef.current = nowMicros();
+        try {
+            // Record all timestamps
+            ScreenLoadingManager.addSpanAttribute(spanId, 'cnst_mus_st', toEpochMicros(constructorTimestampRef.current));
+            if (renderStartTimestampRef.current) {
+                ScreenLoadingManager.addSpanAttribute(spanId, 'rnd_mus_st', toEpochMicros(renderStartTimestampRef.current));
+            }
+            ScreenLoadingManager.addSpanAttribute(spanId, 'mnt_mus_st', toEpochMicros(mountTimestampRef.current));
+            // Record all durations
+            if (renderStartTimestampRef.current) {
+                // Constructor duration: time from component init to first render start
+                const constructorDuration = renderStartTimestampRef.current - constructorTimestampRef.current;
+                ScreenLoadingManager.addSpanAttribute(spanId, 'cnst_mus', constructorDuration);
+            }
+            if (renderEndTimestampRef.current && renderStartTimestampRef.current) {
+                // Render duration: time spent creating JSX
+                const renderDuration = renderEndTimestampRef.current - renderStartTimestampRef.current;
+                ScreenLoadingManager.addSpanAttribute(spanId, 'rnd_mus', renderDuration);
+            }
+            if (mountTimestampRef.current && renderEndTimestampRef.current) {
+                // Mount duration: time from render complete to effect execution
+                const mountDuration = mountTimestampRef.current - renderEndTimestampRef.current;
+                ScreenLoadingManager.addSpanAttribute(spanId, 'mnt_mus', mountDuration);
+            }
+            Logger.log(`[LuciqScreenLoading] Lifecycle measurements for span ${spanId}:`, {
+                constructor_us: renderStartTimestampRef.current
+                    ? renderStartTimestampRef.current - constructorTimestampRef.current
+                    : undefined,
+                render_us: renderEndTimestampRef.current && renderStartTimestampRef.current
+                    ? renderEndTimestampRef.current - renderStartTimestampRef.current
+                    : undefined,
+                mount_us: mountTimestampRef.current && renderEndTimestampRef.current
+                    ? mountTimestampRef.current - renderEndTimestampRef.current
+                    : undefined,
+            });
+        }
+        catch (error) {
+            Logger.error(`[LuciqScreenLoading] Failed to record attributes for span ${spanId}:`, error);
+        }
+        // End the span — mark as measured synchronously to guard against unmount race
+        setIsMeasured(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [spanId]); // Run when spanId is set
+    // componentWillUnmount equivalent
+    useEffect(() => {
+        return () => {
+            // Cleanup on unmount if not measured
+            if (spanIdRef.current && !isMeasuredRef.current) {
+                ScreenLoadingManager.endSpan(spanIdRef.current).catch((error) => {
+                    Logger.warn('[LuciqScreenLoading] Failed to end span on unmount:', error);
+                });
+            }
+        };
+    }, []); // Empty deps = only runs cleanup on unmount
+    // Create the JSX result
+    const result = (<ScreenLoadingContext.Provider value={spanId !== null}>
+      <View {...viewProps} onLayout={onLayout}>
+        {children}
+      </View>
+    </ScreenLoadingContext.Provider>);
+    // Capture render end timestamp ONLY on first render (after JSX creation)
+    if (!hasFirstRenderCompletedRef.current) {
+        renderEndTimestampRef.current = nowMicros();
+        hasFirstRenderCompletedRef.current = true;
+    }
+    return result;
+}

package/dist/index.d.ts

@@ -18,4 +18,6 @@ import type { SessionMetadata } from './models/SessionMetadata';
 export * from './utils/Enums';
 export { Report, CustomSpan, APM, BugReporting, CrashReporting, FeatureRequests, NetworkLogger, SessionReplay, Replies, Surveys, ProactiveReportingConfigOptions, createProactiveReportingConfig, };
 export type { LuciqConfig, Survey, NetworkData, NetworkDataObfuscationHandler, SessionMetadata, ThemeConfig, };
+export { LuciqCaptureScreenLoading } from './components/LuciqCaptureScreenLoading';
+export type { LuciqScreenLoadingProps } from './components/LuciqCaptureScreenLoading';
 export default Luciq;

package/dist/index.js

@@ -13,4 +13,6 @@ import * as Surveys from './modules/Surveys';
 import * as SessionReplay from './modules/SessionReplay';
 export * from './utils/Enums';
 export { Report, CustomSpan, APM, BugReporting, CrashReporting, FeatureRequests, NetworkLogger, SessionReplay, Replies, Surveys, createProactiveReportingConfig, };
+// Screen Loading Component
+export { LuciqCaptureScreenLoading } from './components/LuciqCaptureScreenLoading';
 export default Luciq;

package/dist/modules/APM.d.ts

@@ -138,3 +138,22 @@ export declare const startCustomSpan: (name: string) => Promise<CustomSpan | nul
  * ```
  */
 export declare const addCompletedCustomSpan: (name: string, startDate: Date, endDate: Date) => Promise<void>;
+/**
+ * Enables or disables Screen Loading feature
+ * @param isEnabled
+ */
+export declare const setScreenLoadingEnabled: (isEnabled: boolean) => void;
+/**
+ * Extends the currently running screen loading trace with a new end timestamp.
+ */
+export declare const endScreenLoading: () => void;
+/**
+ * Exclude specific routes from automatic screen loading measurement
+ * @param routes Array of route names to exclude
+ */
+export declare function excludeScreenLoadingRoutes(routes: string[]): void;
+/**
+ * Include previously excluded routes back into screen loading measurement
+ * @param routes Array of route names to include (or empty to clear all exclusions)
+ */
+export declare function includeScreenLoadingRoutes(routes?: string[]): void;

package/dist/modules/APM.js

@@ -2,6 +2,12 @@ import { Platform } from 'react-native';
 import { NativeAPM } from '../native/NativeAPM';
 import { NativeLuciq } from '../native/NativeLuciq';
 import { startCustomSpan as startCustomSpanInternal, addCompletedCustomSpan as addCompletedCustomSpanInternal, } from '../utils/CustomSpansManager';
+import { ScreenLoadingManager } from './apm/ScreenLoadingManager';
+import { Logger } from '../utils/logger';
+// Initialize Screen Loading on module load
+ScreenLoadingManager.initialize().catch((error) => {
+    Logger.error('[APM] Failed to initialize Screen Loading:', error);
+});
 /**
  * Enables or disables APM
  * @param isEnabled
@@ -171,3 +177,35 @@ export const startCustomSpan = async (name) => {
 export const addCompletedCustomSpan = async (name, startDate, endDate) => {
     return addCompletedCustomSpanInternal(name, startDate, endDate);
 };
+/**
+ * Enables or disables Screen Loading feature
+ * @param isEnabled
+ */
+export const setScreenLoadingEnabled = (isEnabled) => {
+    try {
+        NativeAPM.setScreenLoadingEnabled(isEnabled);
+    }
+    catch (error) {
+        Logger.error('[APM] Failed to set screen loading enabled:', error);
+    }
+};
+/**
+ * Extends the currently running screen loading trace with a new end timestamp.
+ */
+export const endScreenLoading = () => {
+    ScreenLoadingManager.endScreenLoading();
+};
+/**
+ * Exclude specific routes from automatic screen loading measurement
+ * @param routes Array of route names to exclude
+ */
+export function excludeScreenLoadingRoutes(routes) {
+    ScreenLoadingManager.excludeRoutes(routes);
+}
+/**
+ * Include previously excluded routes back into screen loading measurement
+ * @param routes Array of route names to include (or empty to clear all exclusions)
+ */
+export function includeScreenLoadingRoutes(routes) {
+    ScreenLoadingManager.includeRoutes(routes);
+}

package/dist/modules/Luciq.d.ts

@@ -286,7 +286,7 @@ export declare const onStateChange: (state?: NavigationStateV5) => void;
  *  @param navigationRef a refrence of a navigation container
  *
  */
-export declare const setNavigationListener: (navigationRef: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>) => () => void;
+export declare const setNavigationListener: (navigationRef: NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>) => void;
 export declare const reportScreenChange: (screenName: string) => void;
 /**
  * Add feature flags to the next report.