@luciq/react-native 19.4.0 → 19.6.0

package/.claude/commands/review.md

@@ -0,0 +1,73 @@
+---
+description: Code review checklist for React Native SDK best practices
+---
+
+# Code Review
+
+Review the current changes against React Native SDK best practices.
+
+## Review Categories
+
+### 1. Native Bridge Safety
+
+- [ ] NativeModule interfaces are consistent between TypeScript and native implementations
+- [ ] NativeModule calls handle errors gracefully (no host app crashes)
+- [ ] No breaking changes to native module APIs without version bump
+- [ ] NativeEventEmitter subscriptions are properly cleaned up
+
+### 2. Public API Compatibility
+
+- [ ] No breaking changes to exports in `src/index.ts`
+- [ ] New public APIs follow existing module pattern (exported functions in `src/modules/`)
+- [ ] Deprecations use `@deprecated` JSDoc annotation with migration guidance
+- [ ] API naming is consistent with existing conventions
+
+### 3. Testing
+
+- [ ] New code has corresponding tests in `test/`
+- [ ] Native module mocks are updated in `test/mocks/` if needed
+- [ ] Tests cover edge cases and error paths
+- [ ] No flaky or timing-dependent tests
+
+### 4. Error Handling
+
+- [ ] Native module calls are wrapped with proper error handling
+- [ ] No unhandled promises or missing `await`
+- [ ] Errors don't crash the host app
+- [ ] TypeScript strict mode is satisfied (no `any` escapes)
+
+### 5. Performance
+
+- [ ] No expensive operations on the JS thread
+- [ ] Network interception doesn't block requests
+- [ ] No unnecessary re-renders or event listener leaks
+- [ ] Screen tracking doesn't interfere with navigation
+
+### 6. Code Quality
+
+- [ ] Passes `yarn lint` and `yarn format`
+- [ ] TypeScript strict mode: no unused locals/params, no implicit any
+- [ ] No unnecessary imports or dead code
+- [ ] `import type` used for type-only imports
+
+### 7. Cross-Platform
+
+- [ ] Changes work on both iOS and Android
+- [ ] Platform-specific code uses proper conditional logic
+- [ ] Source map upload scripts still work for both platforms
+
+### 8. Security
+
+- [ ] No hardcoded secrets or API keys
+- [ ] Sensitive data is handled appropriately
+- [ ] User data handling respects privacy settings
+- [ ] No logging of sensitive information in release mode
+
+## How to Use
+
+Run the current diff through each category. For each issue found, report:
+
+- **File:line** - exact location
+- **Severity** - critical / warning / suggestion
+- **Issue** - what's wrong
+- **Fix** - how to fix it

package/.claude/memory/MEMORY.md

@@ -0,0 +1 @@
+- [PR title format](feedback_pr_title_format.md) — PR titles must be prefixed with fix/chore/feat, same as commit convention

package/.claude/memory/feedback_pr_title_format.md

@@ -0,0 +1,10 @@
+---
+name: PR title format
+description: PR titles must be prefixed with fix/chore/feat - same convention as commit messages
+type: feedback
+---
+
+PR titles must always include a type prefix (fix, chore, feat, etc.) - same convention as commit messages.
+
+**Why:** Team convention for consistent PR naming.
+**How to apply:** When generating PR titles, always prefix with the type. Update the /create-pr command to reflect this format.

package/.claude/rules/react-native-typescript.md

@@ -0,0 +1,46 @@
+# AI rules for React Native TypeScript
+
+You are an expert in React Native and TypeScript development. This is an SDK project (not an app), so focus on library design, native bridge patterns, and public API surface.
+
+## Project Context
+
+This is the Luciq React Native SDK (`@luciq/react-native`). It bridges JavaScript to native iOS/Android modules for observability features (bug reporting, crash reporting, APM, network logging, session replay, surveys).
+
+## TypeScript Style
+
+- **Strict mode** is enabled: `noUnusedLocals`, `noUnusedParameters`, `noImplicitAny`, `strict`
+- Use `import type` for type-only imports (`importsNotUsedAsValues: "error"`)
+- Prettier: single quotes, semicolons, 100 char width, trailing commas
+- Import ordering via `@trivago/prettier-plugin-sort-imports`
+- ESLint: `@react-native-community` config with prettier and jsdoc plugins
+
+## Module Pattern
+
+Each SDK feature is a module in `src/modules/` exported as a namespace:
+
+- Module exports functions that call through to native via `NativeModules`
+- Native bridge interfaces are typed in `src/native/`
+- Events from native use `NativeEventEmitter`
+- Models/types live in `src/models/`
+- Enums and utilities in `src/utils/`
+
+## Native Bridge
+
+- JS -> Native: via React Native `NativeModules` (typed interfaces in `src/native/`)
+- Native -> JS: via `NativeEventEmitter` for async callbacks
+- iOS: Objective-C/Swift, managed via CocoaPods (`RNLuciq.podspec`)
+- Android: Java/Kotlin, managed via Gradle (`android/build.gradle`)
+
+## Testing
+
+- Jest with `react-native` preset and `ts-jest`
+- Test setup in `test/setup.ts` mocks all native modules and disables HTTP via nock
+- Tests mirror src structure in `test/`
+- Mock native modules in `test/mocks/`
+
+## SDK-Specific Rules
+
+- Never crash the host app - handle errors gracefully
+- Public API changes must be backward compatible unless doing a major version bump
+- Network interception has two modes: JavaScript (XHR wrapping) and Native
+- The SDK supports React Navigation (v4, v6), react-native-navigation (v7), and Expo

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [19.6.0](https://github.com/luciqai/luciq-reactnative-sdk/compare/v19.6.0...19.4.0)
+
+### Added
+
+- Add support for Screen Loading with react-navigation integration and manual reporting API.
+
+### Changed
+
+- Bump Luciq iOS SDK to v19.6.1 ([#49](https://github.com/luciqai/luciq-reactnative-sdk/pull/49)). [See release notes](https://github.com/luciqai/luciq-ios-sdk/releases/tag/19.6.1).
+
+- Bump Luciq Android SDK to v19.6.0 ([#49](https://github.com/luciqai/luciq-reactnative-sdk/pull/49)). [See release notes](https://github.com/luciqai/luciq-android-sdk/releases/tag/v19.6.0).
+
 ## [19.4.0](https://github.com/luciqai/luciq-reactnative-sdk/compare/v19.4.0...19.3.0)
 
 ### Added

package/CLAUDE.md

@@ -0,0 +1,125 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is **@luciq/react-native** — a React Native SDK for Luciq's Agentic Observability Platform. It provides bug reporting, crash reporting, APM, network logging, session replay, surveys, and feature requests for mobile apps. The SDK bridges JavaScript to native iOS/Android modules.
+
+## Common Commands
+
+```bash
+yarn test                    # Run all tests (Jest)
+yarn test -- --testPathPattern=test/modules/APM  # Run a single test file
+yarn lint                    # ESLint check
+yarn lint:fix                # ESLint autofix
+yarn format                  # Prettier check
+yarn format:fix              # Prettier autofix
+yarn build                   # Build library (tsc) + CLI (rollup)
+yarn build:lib               # TypeScript compilation only
+yarn build:cli               # Rollup CLI bundle only
+yarn bootstrap               # Full setup: install deps + pods for example app
+```
+
+## Architecture
+
+### Module System
+
+The SDK is organized as independent feature modules, each with a JS API layer and a native bridge:
+
+- **`src/modules/Luciq.ts`** — Core module: `init()`, screen tracking, shake detection, feature flags, app lifecycle
+- **`src/modules/APM.ts`** — Performance spans (startCustomSpan, addCompletedCustomSpan)
+- **`src/modules/BugReporting.ts`** — User-initiated bug reports
+- **`src/modules/CrashReporting.ts`** — Unhandled exception tracking
+- **`src/modules/NetworkLogger.ts`** — HTTP interception with filtering/obfuscation (JS mode wraps fetch/XHR; native mode delegates to platform)
+- **`src/modules/SessionReplay.ts`** — Screen recording
+- **`src/modules/Surveys.ts`**, **`Replies.ts`**, **`FeatureRequests.ts`** — User engagement
+
+### Native Bridge
+
+`src/native/` contains typed interfaces for each native module (NativeLuciq, NativeAPM, etc.). JS calls native via React Native's `NativeModules`. Native-to-JS events use `NativeEventEmitter`.
+
+### Other Key Directories
+
+- **`src/models/`** — TypeScript data models (LuciqConfig, Report, CustomSpan, etc.)
+- **`src/utils/`** — Enums, XhrNetworkInterceptor, CustomSpansManager
+- **`cli/`** — CLI tool for source map/SO file uploads (Commander-based, bundled with Rollup)
+- **`plugin/`** — Expo config plugin (withLuciq)
+- **`ios/`** — Native iOS module (Objective-C/Swift, CocoaPods via `RNLuciq.podspec`, iOS 15.0+)
+- **`android/`** — Native Android module (Gradle)
+- **`test/`** — Jest tests mirroring src structure; `test/mocks/` has native module mocks; `test/setup.ts` configures mocks and disables network via nock
+
+## Coding Standards
+
+Code style, TypeScript/Prettier/ESLint config, module pattern, native-bridge conventions, testing conventions, and SDK-specific rules live in `.claude/rules/react-native-typescript.md`. That file is the single source of truth for how to write code in this repo - do not duplicate it here.
+
+## Output
+
+- Answer is always line 1. Reasoning comes after, never before.
+- No preamble. No "Great question!", "Sure!", "Of course!", "Certainly!", "Absolutely!".
+- No hollow closings. No "I hope this helps!", "Let me know if you need anything!".
+- No restating the prompt. If the task is clear, execute immediately.
+- No explaining what you are about to do. Just do it.
+- No unsolicited suggestions. Do exactly what was asked, nothing more.
+- Structured output only: bullets, tables, code blocks. Prose only when explicitly requested.
+
+## Token Efficiency
+
+- Compress responses. Every sentence must earn its place.
+- No redundant context. Do not repeat information already established in the session.
+- No long intros or transitions between sections.
+- Short responses are correct unless depth is explicitly requested.
+
+## Typography - ASCII Only
+
+- No em dashes (-) - use hyphens (-)
+- No smart/curly quotes - use straight quotes (" ')
+- No ellipsis character - use three dots (...)
+- No Unicode bullets - use hyphens (-) or asterisks (\*)
+- No non-breaking spaces
+
+## Sycophancy - Zero Tolerance
+
+- Never validate the user before answering.
+- Never say "You're absolutely right!" unless the user made a verifiable correct statement.
+- Disagree when wrong. State the correction directly.
+- Do not change a correct answer because the user pushes back.
+
+## Accuracy and Speculation Control
+
+- Never speculate about code, files, or APIs you have not read.
+- If referencing a file or function: read it first, then answer.
+- If unsure: say "I don't know." Never guess confidently.
+- Never invent file paths, function names, or API signatures.
+- If a user corrects a factual claim: accept it as ground truth for the entire session. Never re-assert the original claim.
+
+## Code Output
+
+- Return the simplest working solution. No over-engineering.
+- No abstractions or helpers for single-use operations.
+- No speculative features or future-proofing.
+- No docstrings or comments on code that was not changed.
+- Inline comments only where logic is non-obvious.
+- Read the file before modifying it. Never edit blind.
+
+## Warnings and Disclaimers
+
+- No safety disclaimers unless there is a genuine life-safety or legal risk.
+- No "Note that...", "Keep in mind that...", "It's worth mentioning..." soft warnings.
+- No "As an AI, I..." framing.
+
+## Session Memory
+
+- Learn user corrections and preferences within the session.
+- Apply them silently. Do not re-announce learned behavior.
+- If the user corrects a mistake: fix it, remember it, move on.
+
+## Scope Control
+
+- Do not add features beyond what was asked.
+- Do not refactor surrounding code when fixing a bug.
+- Do not create new files unless strictly necessary.
+
+## Override Rule
+
+User instructions always override this file.

package/android/native.gradle

@@ -1,5 +1,5 @@
 project.ext.luciq = [
-    version: '19.4.0'
+    version: '19.6.0'
 ]
 
 dependencies {

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

@@ -0,0 +1,88 @@
+package ai.luciq.reactlibrary;
+
+import android.os.Handler;
+import android.os.Looper;
+import android.view.Choreographer;
+import java.util.HashMap;
+import java.util.HashSet;
+import java.util.Map;
+import java.util.Set;
+import android.util.Log;
+
+public class LuciqScreenLoadingFrameTracker {
+    private static final String TAG = "ScreenLoading";
+    private static LuciqScreenLoadingFrameTracker instance;
+
+    private final Map<String, Long> spanIdToTimestamp = new HashMap<>();
+    private final Set<String> activeSpanIds = new HashSet<>();
+    private final Handler mainHandler = new Handler(Looper.getMainLooper());
+    private static final int MAX_STORAGE_CAPACITY = 50;
+
+    private LuciqScreenLoadingFrameTracker() {}
+
+    public static synchronized LuciqScreenLoadingFrameTracker getInstance() {
+        if (instance == null) {
+            instance = new LuciqScreenLoadingFrameTracker();
+        }
+        return instance;
+    }
+
+    public void initializeFrameTracking() {
+        // Choreographer is automatically available on Android
+        Log.d(TAG, "Frame tracking initialized");
+    }
+
+    public void startTrackingForSpanId(final String spanId) {
+        mainHandler.post(new Runnable() {
+            @Override
+            public void run() {
+                activeSpanIds.add(spanId);
+                Log.d(TAG, "Started tracking for span " + spanId);
+
+                Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
+                    @Override
+                    public void doFrame(long frameTimeNanos) {
+                        if (activeSpanIds.contains(spanId)) {
+                            // frameTimeNanos is monotonic clock (nanoseconds since device boot)
+                            // Convert to epoch-based microseconds using offset correction
+                            long currentMonotonicNanos = System.nanoTime();
+                            long currentEpochMillis = System.currentTimeMillis();
+                            long nanosSinceFrame = currentMonotonicNanos - frameTimeNanos;
+                            long frameEpochMicroseconds = (currentEpochMillis * 1000) - (nanosSinceFrame / 1000);
+
+                            spanIdToTimestamp.put(spanId, frameEpochMicroseconds);
+                            activeSpanIds.remove(spanId);
+                            Log.d(TAG, "Frame rendered for span " + spanId + " at " + frameEpochMicroseconds + 
+                                  "μs (frame offset: " + String.format("%.3f", nanosSinceFrame / 1_000_000.0) + "ms)");
+
+                            if (spanIdToTimestamp.size() > MAX_STORAGE_CAPACITY) {
+                                cleanup();
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    public Long getFrameTimestampForSpanId(String spanId) {
+        Long timestamp = spanIdToTimestamp.get(spanId);
+        if (timestamp != null) {
+            spanIdToTimestamp.remove(spanId);
+            Log.d(TAG, "Retrieved timestamp " + timestamp + "μs for span " + spanId);
+        }
+        return timestamp;
+    }
+
+    private void cleanup() {
+        // Keep only the most recent 30 entries
+        if (spanIdToTimestamp.size() > 30) {
+            // Simple cleanup: remove oldest entries
+            int toRemove = spanIdToTimestamp.size() - 30;
+            for (String key : new HashSet<>(spanIdToTimestamp.keySet())) {
+                if (toRemove-- <= 0) break;
+                spanIdToTimestamp.remove(key);
+            }
+        }
+    }
+}

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

@@ -1,4 +1,3 @@
-
 package ai.luciq.reactlibrary;
 
 import static ai.luciq.reactlibrary.utils.LuciqUtil.getMethod;
@@ -15,6 +14,8 @@ import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
 
 import java.lang.reflect.Method;
+import java.util.HashMap;
+import java.util.Map;
 import java.util.Date;
 
 import javax.annotation.Nonnull;
@@ -34,7 +35,6 @@ public class RNLuciqAPMModule extends EventEmitterModule {
         super(reactApplicationContext);
     }
 
-
     @Nonnull
     @Override
     public String getName() {
@@ -351,14 +351,7 @@ public class RNLuciqAPMModule extends EventEmitterModule {
             } catch (Exception e) {
                 e.printStackTrace();
             }
-            APMCPNetworkLog.W3CExternalTraceAttributes w3cExternalTraceAttributes =
-                    new APMCPNetworkLog.W3CExternalTraceAttributes(
-                            isW3cHeaderFound,
-                            partialId,
-                            networkStartTimeInSeconds,
-                            w3cAttributes.getString("w3cGeneratedHeader"),
-                            w3cAttributes.getString("w3cCaughtHeader")
-                    );
+            APMCPNetworkLog.W3CExternalTraceAttributes w3cExternalTraceAttributes = new APMCPNetworkLog.W3CExternalTraceAttributes(isW3cHeaderFound, partialId, networkStartTimeInSeconds, w3cAttributes.getString("w3cGeneratedHeader"), w3cAttributes.getString("w3cCaughtHeader"));
             try {
                 Method method = getMethod(Class.forName("ai.luciq.apm.networking.APMNetworkLogger"), "log", long.class, long.class, String.class, String.class, long.class, String.class, String.class, String.class, String.class, String.class, long.class, int.class, String.class, String.class, String.class, String.class, APMCPNetworkLog.W3CExternalTraceAttributes.class);
                 if (method != null) {
@@ -493,4 +486,185 @@ public class RNLuciqAPMModule extends EventEmitterModule {
             }
         });
     }
+
+    /**
+     * Initialize screen frame tracking for Screen Loading feature
+     */
+    @ReactMethod
+    public void initScreenFrameTracking(Promise promise) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                LuciqScreenLoadingFrameTracker.getInstance().initializeFrameTracking();
+                promise.resolve(null);
+            }
+        });
+    }
+
+    /**
+     * Set the active screen span ID for frame tracking
+     *
+     * @param spanId the span ID to track
+     */
+    @ReactMethod
+    public void setActiveScreenSpanId(String spanId) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                LuciqScreenLoadingFrameTracker.getInstance().startTrackingForSpanId(spanId);
+            }
+        });
+    }
+
+    /**
+     * Get the frame timestamp for a given span ID
+     *
+     * @param spanId  the span ID to retrieve the timestamp for
+     * @param promise promise to resolve with the timestamp
+     */
+    @ReactMethod
+    public void getScreenTimeToDisplay(String spanId, Promise promise) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                Long timestamp = LuciqScreenLoadingFrameTracker.getInstance().getFrameTimestampForSpanId(spanId);
+                promise.resolve(timestamp != null ? timestamp.doubleValue() : null);
+            }
+        });
+    }
+
+    /**
+     * Check if Screen Loading feature is enabled
+     *
+     * @param promise promise to resolve with enabled status
+     */
+    @ReactMethod
+    public void isScreenLoadingEnabled(Promise promise) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    InternalAPM._isFeatureEnabledCP(APMFeature.SCREEN_LOADING, "LuciqCaptureScreenLoading", new FeatureAvailabilityCallback() {
+                        @Override
+                        public void invoke(boolean isFeatureAvailable) {
+                            promise.resolve(isFeatureAvailable);
+                        }
+                    });
+                } catch (Exception e) {
+                    promise.resolve(false);
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
+
+    /**
+     * Enables or disables screen loading
+     *
+     * @param isEnabled boolean indicating enabled or disabled.
+     */
+    @ReactMethod
+    public void setScreenLoadingEnabled(boolean isEnabled) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    APM.setScreenLoadingEnabled(isEnabled);
+                } catch (Exception e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
+
+    /**
+     * Syncs screen loading data to native layer for reporting
+     *
+     * @param spanId         the span ID
+     * @param screenName     the name of the screen
+     * @param startTimestamp the start timestamp in microseconds
+     * @param duration_us    the time to initial display in microseconds
+     * @param stages         custom attributes attached to the span
+     */
+    private static final String[] STAGE_KEYS = {"cnst_mus_st", "cnst_mus", "rnd_mus_st", "rnd_mus", "mnt_mus_st", "mnt_mus", "lyt_mus_st", "lyt_mus"};
+
+    private Map<String, Long> buildStagesMap(ReadableMap stages) {
+        final Map<String, Long> stagesMap = new HashMap<>();
+        for (String key : STAGE_KEYS) {
+            if (stages.hasKey(key)) stagesMap.put(key, (long) stages.getDouble(key));
+        }
+        return stagesMap;
+    }
+
+    @ReactMethod
+    public void syncScreenLoading(double spanId, String screenName, double startTimestamp, double duration_us, ReadableMap stages) {
+        try {
+            final Map<String, Long> stagesMap = buildStagesMap(stages);
+            InternalAPM._reportScreenLoadingCP((long) startTimestamp, (long) duration_us, (long) spanId, stagesMap);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    /**
+     * Syncs manual screen loading measurements to native layer for reporting.
+     * Unlike syncScreenLoading, this does not require a span ID.
+     *
+     * @param screenName     the name of the screen
+     * @param startTimestamp the start timestamp in microseconds
+     * @param duration_us    the duration in microseconds
+     * @param stages         custom attributes attached to the measurement
+     */
+    @ReactMethod
+    public void syncManualScreenLoading(String screenName, double startTimestamp, double duration_us, ReadableMap stages) {
+        try {
+            final Map<String, Long> stagesMap = buildStagesMap(stages);
+            InternalAPM._reportManualScreenLoadingCP(screenName, (long) startTimestamp, (long) duration_us, stagesMap);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    /**
+     * Check if Screen Loading feature is enabled
+     *
+     * @param promise promise to resolve with enabled status
+     */
+    @ReactMethod
+    public void isEndScreenLoadingEnabled(Promise promise) {
+        MainThreadHandler.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    InternalAPM._isFeatureEnabledCP(APMFeature.END_SCREEN_LOADING, "LuciqCaptureScreenLoading", new FeatureAvailabilityCallback() {
+                        @Override
+                        public void invoke(boolean isFeatureAvailable) {
+                            promise.resolve(isFeatureAvailable);
+                        }
+                    });
+                } catch (Exception e) {
+                    promise.resolve(false);
+                    e.printStackTrace();
+                }
+            }
+        });
+    }
+
+    /**
+     * This method is responsible for extend the end time if the screen loading custom
+     * trace. It takes two parameters:
+     *
+     * @param timeStampMicro: A number representing the timestamp in microseconds when the screen loading
+     *                        custom trace is ending.
+     * @param uiTraceId:      A number representing the unique identifier for the UI trace associated with the
+     *                        screen loading.
+     */
+    @ReactMethod
+    public void endScreenLoading(double timeStampMicro, double uiTraceId) {
+        try {
+            InternalAPM._endScreenLoadingCP((long) timeStampMicro, (long) uiTraceId);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
 }

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

@@ -1078,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();

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;