@drakkar.software/sunglasses-react-native 0.2.1

package/dist/index.d.mts

@@ -0,0 +1,187 @@
+import React$1 from 'react';
+import { ISunglassesClient, ScreenTrackingOptions } from '@drakkar.software/sunglasses-core';
+export { ConsentStatus, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent } from '@drakkar.software/sunglasses-core';
+
+interface SunglassesProviderProps {
+    /** An initialized ISunglassesClient (from SunglassesCore.create()). */
+    client: ISunglassesClient;
+    children: React$1.ReactNode;
+}
+/**
+ * Provides a SunGlasses client to the React Native component tree.
+ *
+ * Place this at the root of your Expo/RN application.
+ *
+ * For screen tracking, use one of these hooks inside your layout:
+ * - `useExpoRouterScreenTracking(client)` — for Expo Router
+ * - `useNavigationScreenTracking(client, navigationRef)` — for React Navigation
+ *
+ * @example
+ * ```tsx
+ * // App.tsx (React Navigation)
+ * const client = await SunglassesCore.create({ ... });
+ *
+ * function App() {
+ *   return (
+ *     <SunglassesProvider client={client}>
+ *       <NavigationContainer>
+ *         <Stack.Navigator />
+ *       </NavigationContainer>
+ *     </SunglassesProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx (Expo Router)
+ * export default function RootLayout() {
+ *   const client = useSunglasses();
+ *   useExpoRouterScreenTracking(client);
+ *   return <Stack />;
+ * }
+ * ```
+ */
+declare function SunglassesProvider({ client, children, }: SunglassesProviderProps): React$1.ReactElement;
+
+/**
+ * Access the SunGlasses client from React context (React Native).
+ * Throws if called outside of a SunglassesProvider.
+ */
+declare function useSunglasses(): ISunglassesClient;
+
+/**
+ * Expo Router screen tracking hook.
+ *
+ * Tracks screen changes by observing the `pathname` from Expo Router.
+ * Place this hook inside your root `_layout.tsx`.
+ *
+ * **Requires**: `expo-router` to be installed in your project.
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx
+ * import { useExpoRouterScreenTracking } from '@drakkar.software/sunglasses-react-native';
+ *
+ * export default function RootLayout() {
+ *   const client = useSunglasses();
+ *   useExpoRouterScreenTracking(client);
+ *   return <Stack />;
+ * }
+ * ```
+ */
+declare function useExpoRouterScreenTracking(client: ISunglassesClient, options?: Pick<ScreenTrackingOptions, 'screenNameMapper'>): void;
+
+interface NavigationState {
+    index: number;
+    routes: Array<{
+        name: string;
+        state?: NavigationState;
+    }>;
+}
+interface NavigationContainerRef {
+    addListener(event: string, callback: () => void): {
+        remove: () => void;
+    };
+    getRootState(): NavigationState | undefined;
+    isReady(): boolean;
+}
+/**
+ * React Navigation screen tracking hook.
+ *
+ * Pass the `ref` from `<NavigationContainer ref={navigationRef}>`.
+ * Tracks screen changes via the `state` listener.
+ *
+ * @example
+ * ```tsx
+ * const navigationRef = useRef(null);
+ *
+ * <NavigationContainer ref={navigationRef}>
+ *   ...
+ * </NavigationContainer>
+ *
+ * // In a component:
+ * useNavigationScreenTracking(client, navigationRef);
+ * ```
+ */
+declare function useNavigationScreenTracking(client: ISunglassesClient, navigationRef: React.RefObject<NavigationContainerRef | null>, options?: Pick<ScreenTrackingOptions, 'screenNameMapper'>): void;
+
+/**
+ * Extract UTM attribution parameters from a deep link URL and register them
+ * as super properties on the client.
+ *
+ * Works with both HTTPS universal links (`https://myapp.com/home?utm_source=email`)
+ * and custom scheme deep links (`myapp://home?utm_source=email`).
+ *
+ * No-op if the URL contains no UTM parameters or if the URL cannot be parsed.
+ *
+ * @param client - The SunGlasses client instance.
+ * @param url - The deep link URL to extract UTM params from.
+ *
+ * @example
+ * ```ts
+ * // Handle a deep link manually
+ * Linking.getInitialURL().then((url) => {
+ *   if (url) captureDeepLinkUtmParams(client, url);
+ * });
+ * ```
+ */
+declare function captureDeepLinkUtmParams(client: ISunglassesClient, url: string): void;
+
+/**
+ * Hook that captures UTM attribution from deep links via React Native's Linking API.
+ *
+ * Handles two cases:
+ * - **Cold start**: reads the initial URL that launched the app via `Linking.getInitialURL()`.
+ * - **Re-open**: subscribes to new deep links while the app is running via
+ *   `Linking.addEventListener('url', ...)` — useful for re-attribution when the
+ *   user taps a new campaign link while the app is already open.
+ *
+ * UTM params are registered as super properties via `client.register()`, so they
+ * are attached to all subsequent events automatically.
+ *
+ * Place this hook in your root component or app entry point.
+ *
+ * @example
+ * ```tsx
+ * // App.tsx
+ * import { useLinkingUtmCapture } from '@drakkar.software/sunglasses-react-native';
+ *
+ * export default function App() {
+ *   const client = useSunglasses();
+ *   useLinkingUtmCapture(client);
+ *   return <NavigationContainer>...</NavigationContainer>;
+ * }
+ * ```
+ */
+declare function useLinkingUtmCapture(client: ISunglassesClient): void;
+
+/**
+ * Expo Router UTM capture hook.
+ *
+ * Reads UTM attribution params from the current Expo Router URL via
+ * `useGlobalSearchParams()` and registers any found params as super properties
+ * on the client. Re-runs whenever the URL params change, so new campaign links
+ * opened while the app is running are also captured.
+ *
+ * Uses `useGlobalSearchParams()` rather than `useLocalSearchParams()` so the
+ * hook works correctly from the root `_layout.tsx` — it sees params from any
+ * nested route, not just the current layout segment.
+ *
+ * **Requires**: `expo-router` to be installed in your project.
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx
+ * import { useExpoRouterUtmCapture } from '@drakkar.software/sunglasses-react-native';
+ *
+ * export default function RootLayout() {
+ *   const client = useSunglasses();
+ *   useExpoRouterUtmCapture(client);
+ *   return <Stack />;
+ * }
+ * ```
+ */
+declare function useExpoRouterUtmCapture(client: ISunglassesClient): void;
+
+export { SunglassesProvider, type SunglassesProviderProps, captureDeepLinkUtmParams, useExpoRouterScreenTracking, useExpoRouterUtmCapture, useLinkingUtmCapture, useNavigationScreenTracking, useSunglasses };

package/dist/index.d.ts

@@ -0,0 +1,187 @@
+import React$1 from 'react';
+import { ISunglassesClient, ScreenTrackingOptions } from '@drakkar.software/sunglasses-core';
+export { ConsentStatus, ISunglassesClient, ScreenTrackingOptions, SunglassesConfig, SunglassesCore, SunglassesEvent } from '@drakkar.software/sunglasses-core';
+
+interface SunglassesProviderProps {
+    /** An initialized ISunglassesClient (from SunglassesCore.create()). */
+    client: ISunglassesClient;
+    children: React$1.ReactNode;
+}
+/**
+ * Provides a SunGlasses client to the React Native component tree.
+ *
+ * Place this at the root of your Expo/RN application.
+ *
+ * For screen tracking, use one of these hooks inside your layout:
+ * - `useExpoRouterScreenTracking(client)` — for Expo Router
+ * - `useNavigationScreenTracking(client, navigationRef)` — for React Navigation
+ *
+ * @example
+ * ```tsx
+ * // App.tsx (React Navigation)
+ * const client = await SunglassesCore.create({ ... });
+ *
+ * function App() {
+ *   return (
+ *     <SunglassesProvider client={client}>
+ *       <NavigationContainer>
+ *         <Stack.Navigator />
+ *       </NavigationContainer>
+ *     </SunglassesProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx (Expo Router)
+ * export default function RootLayout() {
+ *   const client = useSunglasses();
+ *   useExpoRouterScreenTracking(client);
+ *   return <Stack />;
+ * }
+ * ```
+ */
+declare function SunglassesProvider({ client, children, }: SunglassesProviderProps): React$1.ReactElement;
+
+/**
+ * Access the SunGlasses client from React context (React Native).
+ * Throws if called outside of a SunglassesProvider.
+ */
+declare function useSunglasses(): ISunglassesClient;
+
+/**
+ * Expo Router screen tracking hook.
+ *
+ * Tracks screen changes by observing the `pathname` from Expo Router.
+ * Place this hook inside your root `_layout.tsx`.
+ *
+ * **Requires**: `expo-router` to be installed in your project.
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx
+ * import { useExpoRouterScreenTracking } from '@drakkar.software/sunglasses-react-native';
+ *
+ * export default function RootLayout() {
+ *   const client = useSunglasses();
+ *   useExpoRouterScreenTracking(client);
+ *   return <Stack />;
+ * }
+ * ```
+ */
+declare function useExpoRouterScreenTracking(client: ISunglassesClient, options?: Pick<ScreenTrackingOptions, 'screenNameMapper'>): void;
+
+interface NavigationState {
+    index: number;
+    routes: Array<{
+        name: string;
+        state?: NavigationState;
+    }>;
+}
+interface NavigationContainerRef {
+    addListener(event: string, callback: () => void): {
+        remove: () => void;
+    };
+    getRootState(): NavigationState | undefined;
+    isReady(): boolean;
+}
+/**
+ * React Navigation screen tracking hook.
+ *
+ * Pass the `ref` from `<NavigationContainer ref={navigationRef}>`.
+ * Tracks screen changes via the `state` listener.
+ *
+ * @example
+ * ```tsx
+ * const navigationRef = useRef(null);
+ *
+ * <NavigationContainer ref={navigationRef}>
+ *   ...
+ * </NavigationContainer>
+ *
+ * // In a component:
+ * useNavigationScreenTracking(client, navigationRef);
+ * ```
+ */
+declare function useNavigationScreenTracking(client: ISunglassesClient, navigationRef: React.RefObject<NavigationContainerRef | null>, options?: Pick<ScreenTrackingOptions, 'screenNameMapper'>): void;
+
+/**
+ * Extract UTM attribution parameters from a deep link URL and register them
+ * as super properties on the client.
+ *
+ * Works with both HTTPS universal links (`https://myapp.com/home?utm_source=email`)
+ * and custom scheme deep links (`myapp://home?utm_source=email`).
+ *
+ * No-op if the URL contains no UTM parameters or if the URL cannot be parsed.
+ *
+ * @param client - The SunGlasses client instance.
+ * @param url - The deep link URL to extract UTM params from.
+ *
+ * @example
+ * ```ts
+ * // Handle a deep link manually
+ * Linking.getInitialURL().then((url) => {
+ *   if (url) captureDeepLinkUtmParams(client, url);
+ * });
+ * ```
+ */
+declare function captureDeepLinkUtmParams(client: ISunglassesClient, url: string): void;
+
+/**
+ * Hook that captures UTM attribution from deep links via React Native's Linking API.
+ *
+ * Handles two cases:
+ * - **Cold start**: reads the initial URL that launched the app via `Linking.getInitialURL()`.
+ * - **Re-open**: subscribes to new deep links while the app is running via
+ *   `Linking.addEventListener('url', ...)` — useful for re-attribution when the
+ *   user taps a new campaign link while the app is already open.
+ *
+ * UTM params are registered as super properties via `client.register()`, so they
+ * are attached to all subsequent events automatically.
+ *
+ * Place this hook in your root component or app entry point.
+ *
+ * @example
+ * ```tsx
+ * // App.tsx
+ * import { useLinkingUtmCapture } from '@drakkar.software/sunglasses-react-native';
+ *
+ * export default function App() {
+ *   const client = useSunglasses();
+ *   useLinkingUtmCapture(client);
+ *   return <NavigationContainer>...</NavigationContainer>;
+ * }
+ * ```
+ */
+declare function useLinkingUtmCapture(client: ISunglassesClient): void;
+
+/**
+ * Expo Router UTM capture hook.
+ *
+ * Reads UTM attribution params from the current Expo Router URL via
+ * `useGlobalSearchParams()` and registers any found params as super properties
+ * on the client. Re-runs whenever the URL params change, so new campaign links
+ * opened while the app is running are also captured.
+ *
+ * Uses `useGlobalSearchParams()` rather than `useLocalSearchParams()` so the
+ * hook works correctly from the root `_layout.tsx` — it sees params from any
+ * nested route, not just the current layout segment.
+ *
+ * **Requires**: `expo-router` to be installed in your project.
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx
+ * import { useExpoRouterUtmCapture } from '@drakkar.software/sunglasses-react-native';
+ *
+ * export default function RootLayout() {
+ *   const client = useSunglasses();
+ *   useExpoRouterUtmCapture(client);
+ *   return <Stack />;
+ * }
+ * ```
+ */
+declare function useExpoRouterUtmCapture(client: ISunglassesClient): void;
+
+export { SunglassesProvider, type SunglassesProviderProps, captureDeepLinkUtmParams, useExpoRouterScreenTracking, useExpoRouterUtmCapture, useLinkingUtmCapture, useNavigationScreenTracking, useSunglasses };

package/dist/index.js

@@ -0,0 +1,213 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SunglassesCore: () => import_sunglasses_core.SunglassesCore,
+  SunglassesProvider: () => SunglassesProvider,
+  captureDeepLinkUtmParams: () => captureDeepLinkUtmParams,
+  useExpoRouterScreenTracking: () => useExpoRouterScreenTracking,
+  useExpoRouterUtmCapture: () => useExpoRouterUtmCapture,
+  useLinkingUtmCapture: () => useLinkingUtmCapture,
+  useNavigationScreenTracking: () => useNavigationScreenTracking,
+  useSunglasses: () => useSunglasses
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SunglassesProvider.tsx
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+
+// src/context.ts
+var import_react = require("react");
+var SunglassesContext = (0, import_react.createContext)(null);
+function useSunglasses() {
+  const client = (0, import_react.useContext)(SunglassesContext);
+  if (client === null) {
+    throw new Error(
+      "[SunGlasses] useSunglasses() must be called inside a <SunglassesProvider>."
+    );
+  }
+  return client;
+}
+
+// src/SunglassesProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function SunglassesProvider({
+  client,
+  children
+}) {
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      client.shutdown().catch(() => {
+      });
+    };
+  }, [client]);
+  (0, import_react2.useEffect)(() => {
+    const subscription = import_react_native.AppState.addEventListener("change", (nextState) => {
+      if (nextState === "background") {
+        client.flush().catch(() => {
+        });
+      }
+    });
+    return () => subscription.remove();
+  }, [client]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SunglassesContext.Provider, { value: client, children });
+}
+
+// src/useExpoRouterScreenTracking.ts
+var import_react3 = require("react");
+function useExpoRouterScreenTracking(client, options = {}) {
+  let pathname;
+  try {
+    const { usePathname } = require("expo-router");
+    pathname = usePathname();
+  } catch {
+    return;
+  }
+  const { screenNameMapper } = options;
+  (0, import_react3.useEffect)(() => {
+    if (!pathname) return;
+    const name = screenNameMapper ? screenNameMapper(pathname) : pathname;
+    client.screen(name, { $path: pathname });
+  }, [pathname, screenNameMapper, client]);
+}
+
+// src/useNavigationScreenTracking.ts
+var import_react4 = require("react");
+function getActiveRouteName(state) {
+  if (!state) return "";
+  const route = state.routes[state.index];
+  if (!route) return "";
+  if (route.state) return getActiveRouteName(route.state);
+  return route.name;
+}
+function useNavigationScreenTracking(client, navigationRef, options = {}) {
+  const clientRef = (0, import_react4.useRef)(client);
+  clientRef.current = client;
+  const { screenNameMapper } = options;
+  (0, import_react4.useEffect)(() => {
+    const ref = navigationRef.current;
+    if (!ref) return;
+    const handleStateChange = () => {
+      const state = ref.getRootState();
+      const routeName = getActiveRouteName(state);
+      if (!routeName) return;
+      const name = screenNameMapper ? screenNameMapper(routeName) : routeName;
+      clientRef.current.screen(name, { $route: routeName });
+    };
+    const stateListener = ref.addListener("state", handleStateChange);
+    return () => {
+      stateListener.remove();
+    };
+  }, [navigationRef, screenNameMapper]);
+}
+
+// src/captureDeepLinkUtmParams.ts
+var UTM_PARAMS = [
+  "utm_source",
+  "utm_medium",
+  "utm_campaign",
+  "utm_content",
+  "utm_term"
+];
+function captureDeepLinkUtmParams(client, url) {
+  const params = {};
+  try {
+    const queryStart = url.indexOf("?");
+    if (queryStart === -1) return;
+    let qs = url.slice(queryStart + 1);
+    const hashIdx = qs.indexOf("#");
+    if (hashIdx !== -1) qs = qs.slice(0, hashIdx);
+    const searchParams = new URLSearchParams(qs);
+    for (const key of UTM_PARAMS) {
+      const value = searchParams.get(key);
+      if (value) params[key] = value;
+    }
+  } catch {
+    return;
+  }
+  if (Object.keys(params).length > 0) {
+    client.register(params);
+  }
+}
+
+// src/useLinkingUtmCapture.ts
+var import_react5 = require("react");
+var import_react_native2 = require("react-native");
+function useLinkingUtmCapture(client) {
+  (0, import_react5.useEffect)(() => {
+    import_react_native2.Linking.getInitialURL().then((url) => {
+      if (url) captureDeepLinkUtmParams(client, url);
+    }).catch(() => {
+    });
+    const subscription = import_react_native2.Linking.addEventListener("url", ({ url }) => {
+      captureDeepLinkUtmParams(client, url);
+    });
+    return () => {
+      subscription.remove();
+    };
+  }, [client]);
+}
+
+// src/useExpoRouterUtmCapture.ts
+var import_react6 = require("react");
+
+// src/expoRouterCompat.ts
+var _useGlobalSearchParams = null;
+try {
+  ({ useGlobalSearchParams: _useGlobalSearchParams } = require("expo-router"));
+} catch {
+}
+var useGlobalSearchParams = _useGlobalSearchParams;
+
+// src/useExpoRouterUtmCapture.ts
+function useExpoRouterUtmCapture(client) {
+  if (!useGlobalSearchParams) return;
+  const params = useGlobalSearchParams();
+  (0, import_react6.useEffect)(() => {
+    const utmParams = {};
+    for (const key of UTM_PARAMS) {
+      const value = params[key];
+      if (typeof value === "string" && value) {
+        utmParams[key] = value;
+      } else if (Array.isArray(value) && value[0]) {
+        utmParams[key] = value[0];
+      }
+    }
+    if (Object.keys(utmParams).length > 0) {
+      client.register(utmParams);
+    }
+  }, [params, client]);
+}
+
+// src/index.ts
+var import_sunglasses_core = require("@drakkar.software/sunglasses-core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SunglassesCore,
+  SunglassesProvider,
+  captureDeepLinkUtmParams,
+  useExpoRouterScreenTracking,
+  useExpoRouterUtmCapture,
+  useLinkingUtmCapture,
+  useNavigationScreenTracking,
+  useSunglasses
+});

package/dist/index.mjs

@@ -0,0 +1,186 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/SunglassesProvider.tsx
+import { useEffect } from "react";
+import { AppState } from "react-native";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var SunglassesContext = createContext(null);
+function useSunglasses() {
+  const client = useContext(SunglassesContext);
+  if (client === null) {
+    throw new Error(
+      "[SunGlasses] useSunglasses() must be called inside a <SunglassesProvider>."
+    );
+  }
+  return client;
+}
+
+// src/SunglassesProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function SunglassesProvider({
+  client,
+  children
+}) {
+  useEffect(() => {
+    return () => {
+      client.shutdown().catch(() => {
+      });
+    };
+  }, [client]);
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (nextState) => {
+      if (nextState === "background") {
+        client.flush().catch(() => {
+        });
+      }
+    });
+    return () => subscription.remove();
+  }, [client]);
+  return /* @__PURE__ */ jsx(SunglassesContext.Provider, { value: client, children });
+}
+
+// src/useExpoRouterScreenTracking.ts
+import { useEffect as useEffect2 } from "react";
+function useExpoRouterScreenTracking(client, options = {}) {
+  let pathname;
+  try {
+    const { usePathname } = __require("expo-router");
+    pathname = usePathname();
+  } catch {
+    return;
+  }
+  const { screenNameMapper } = options;
+  useEffect2(() => {
+    if (!pathname) return;
+    const name = screenNameMapper ? screenNameMapper(pathname) : pathname;
+    client.screen(name, { $path: pathname });
+  }, [pathname, screenNameMapper, client]);
+}
+
+// src/useNavigationScreenTracking.ts
+import { useEffect as useEffect3, useRef } from "react";
+function getActiveRouteName(state) {
+  if (!state) return "";
+  const route = state.routes[state.index];
+  if (!route) return "";
+  if (route.state) return getActiveRouteName(route.state);
+  return route.name;
+}
+function useNavigationScreenTracking(client, navigationRef, options = {}) {
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const { screenNameMapper } = options;
+  useEffect3(() => {
+    const ref = navigationRef.current;
+    if (!ref) return;
+    const handleStateChange = () => {
+      const state = ref.getRootState();
+      const routeName = getActiveRouteName(state);
+      if (!routeName) return;
+      const name = screenNameMapper ? screenNameMapper(routeName) : routeName;
+      clientRef.current.screen(name, { $route: routeName });
+    };
+    const stateListener = ref.addListener("state", handleStateChange);
+    return () => {
+      stateListener.remove();
+    };
+  }, [navigationRef, screenNameMapper]);
+}
+
+// src/captureDeepLinkUtmParams.ts
+var UTM_PARAMS = [
+  "utm_source",
+  "utm_medium",
+  "utm_campaign",
+  "utm_content",
+  "utm_term"
+];
+function captureDeepLinkUtmParams(client, url) {
+  const params = {};
+  try {
+    const queryStart = url.indexOf("?");
+    if (queryStart === -1) return;
+    let qs = url.slice(queryStart + 1);
+    const hashIdx = qs.indexOf("#");
+    if (hashIdx !== -1) qs = qs.slice(0, hashIdx);
+    const searchParams = new URLSearchParams(qs);
+    for (const key of UTM_PARAMS) {
+      const value = searchParams.get(key);
+      if (value) params[key] = value;
+    }
+  } catch {
+    return;
+  }
+  if (Object.keys(params).length > 0) {
+    client.register(params);
+  }
+}
+
+// src/useLinkingUtmCapture.ts
+import { useEffect as useEffect4 } from "react";
+import { Linking } from "react-native";
+function useLinkingUtmCapture(client) {
+  useEffect4(() => {
+    Linking.getInitialURL().then((url) => {
+      if (url) captureDeepLinkUtmParams(client, url);
+    }).catch(() => {
+    });
+    const subscription = Linking.addEventListener("url", ({ url }) => {
+      captureDeepLinkUtmParams(client, url);
+    });
+    return () => {
+      subscription.remove();
+    };
+  }, [client]);
+}
+
+// src/useExpoRouterUtmCapture.ts
+import { useEffect as useEffect5 } from "react";
+
+// src/expoRouterCompat.ts
+var _useGlobalSearchParams = null;
+try {
+  ({ useGlobalSearchParams: _useGlobalSearchParams } = __require("expo-router"));
+} catch {
+}
+var useGlobalSearchParams = _useGlobalSearchParams;
+
+// src/useExpoRouterUtmCapture.ts
+function useExpoRouterUtmCapture(client) {
+  if (!useGlobalSearchParams) return;
+  const params = useGlobalSearchParams();
+  useEffect5(() => {
+    const utmParams = {};
+    for (const key of UTM_PARAMS) {
+      const value = params[key];
+      if (typeof value === "string" && value) {
+        utmParams[key] = value;
+      } else if (Array.isArray(value) && value[0]) {
+        utmParams[key] = value[0];
+      }
+    }
+    if (Object.keys(utmParams).length > 0) {
+      client.register(utmParams);
+    }
+  }, [params, client]);
+}
+
+// src/index.ts
+import { SunglassesCore } from "@drakkar.software/sunglasses-core";
+export {
+  SunglassesCore,
+  SunglassesProvider,
+  captureDeepLinkUtmParams,
+  useExpoRouterScreenTracking,
+  useExpoRouterUtmCapture,
+  useLinkingUtmCapture,
+  useNavigationScreenTracking,
+  useSunglasses
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@drakkar.software/sunglasses-react-native",
+  "version": "0.2.1",
+  "description": "React Native / Expo provider and hooks for SunGlasses event tracking",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@drakkar.software/sunglasses-core": "0.2.0"
+  },
+  "peerDependencies": {
+    "expo-router": ">=3.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-router": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "happy-dom": "^15.11.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "@drakkar.software/sunglasses-tsconfig": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run",
+    "clean": "rm -rf dist .tsbuildinfo"
+  }
+}