@quiltt/react-native 4.5.1 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @quiltt/react-native
 
+## 5.0.0
+
+### Major Changes
+
+- [#394](https://github.com/quiltt/quiltt-js/pull/394) [`2ba646a`](https://github.com/quiltt/quiltt-js/commit/2ba646a2efcb7bef7949dab74778ab1c3babdb84) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Migrate Apollo Client to v4
+
+### Minor Changes
+
+- [#395](https://github.com/quiltt/quiltt-js/pull/395) [`f635500`](https://github.com/quiltt/quiltt-js/commit/f635500f17ab8a76aa0fb87ed7f4971e63a93f12) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Enhanced SDK telemetry with standardized User-Agent headers
+
+### Patch Changes
+
+- Updated dependencies [[`f635500`](https://github.com/quiltt/quiltt-js/commit/f635500f17ab8a76aa0fb87ed7f4971e63a93f12), [`2ba646a`](https://github.com/quiltt/quiltt-js/commit/2ba646a2efcb7bef7949dab74778ab1c3babdb84)]:
+  - @quiltt/react@5.0.0
+  - @quiltt/core@5.0.0
+
 ## 4.5.1
 
 ### Patch Changes

package/README.md

@@ -9,7 +9,7 @@ For general project information and contributing guidelines, see the [main repos
 
 ## Installation
 
-`@quiltt/react-native` expects `react`, `react-native`,`react-native-webview`, `base-64` and `react-native-url-polyfill` as peer dependencies.
+`@quiltt/react-native` expects `react`, `react-native`, `react-native-webview`, `base-64` and `react-native-url-polyfill` as peer dependencies.
 
 With `npm`:
 

package/dist/index.d.ts

@@ -1,14 +1,26 @@
 export * from '@quiltt/core';
-import { ConnectorSDKCallbacks } from '@quiltt/react';
-export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
+import { ConnectorSDKCallbacks, QuilttAuthProviderProps as QuilttAuthProviderProps$1, QuilttSettingsProviderProps } from '@quiltt/react';
+export { ApolloQueryResult, DocumentNode, ErrorPolicy, FetchPolicy, MutationHookOptions, MutationResult, NormalizedCacheObject, OperationVariables, QueryHookOptions, QueryResult, QuilttSettingsProvider, SubscriptionHookOptions, SubscriptionResult, TypedDocumentNode, WatchQueryFetchPolicy, useLazyQuery, useMutation, useQuery, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage, useSubscription } from '@quiltt/react';
 import * as react from 'react';
+import { FC } from 'react';
 import { URL } from 'react-native-url-polyfill';
+import { NoticeTransportPayload } from '@honeybadger-io/core/build/src/types';
+
+declare class ErrorReporter {
+    private noticeUrl;
+    private apiKey;
+    private logger;
+    private userAgent;
+    constructor(userAgent: string);
+    notify(error: Error, context?: any): Promise<void>;
+    buildPayload(error: Error, localContext?: {}): Promise<Partial<NoticeTransportPayload>>;
+}
 
 type PreFlightCheck = {
     checked: boolean;
     error?: string;
 };
-declare const checkConnectorUrl: (connectorUrl: string, retryCount?: number) => Promise<PreFlightCheck>;
+declare const checkConnectorUrl: (connectorUrl: string, errorReporter: ErrorReporter, retryCount?: number) => Promise<PreFlightCheck>;
 /**
  * Handle opening OAuth URLs with proper encoding detection and normalization
  */
@@ -24,5 +36,24 @@ declare const QuilttConnector: react.ForwardRefExoticComponent<{
     testId?: string;
 } & ConnectorSDKCallbacks & react.RefAttributes<QuilttConnectorHandle>>;
 
-export { QuilttConnector, checkConnectorUrl, handleOAuthUrl };
-export type { PreFlightCheck, QuilttConnectorHandle };
+type QuilttAuthProviderProps = QuilttAuthProviderProps$1;
+/**
+ * React Native-specific QuilttAuthProvider that injects platform information
+ * into the GraphQL client's User-Agent header.
+ *
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ */
+declare const QuilttAuthProvider: FC<QuilttAuthProviderProps>;
+
+type QuilttProviderProps = QuilttSettingsProviderProps & QuilttAuthProviderProps;
+/**
+ * React Native-specific QuilttProvider that combines settings and auth providers
+ * with platform-specific GraphQL client configuration.
+ */
+declare const QuilttProvider: FC<QuilttProviderProps>;
+
+export { QuilttAuthProvider, QuilttConnector, QuilttProvider, checkConnectorUrl, handleOAuthUrl };
+export type { PreFlightCheck, QuilttAuthProviderProps, QuilttConnectorHandle };

package/dist/index.js

@@ -1,15 +1,17 @@
 import { decode } from 'base-64';
+import { getUserAgent as getUserAgent$1, QuilttClient, InMemoryCache, createVersionLink } from '@quiltt/core';
 export * from '@quiltt/core';
-import { useQuilttSession, ConnectorSDKEventType } from '@quiltt/react';
-export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
+import { useQuilttSession, ConnectorSDKEventType, QuilttAuthProvider as QuilttAuthProvider$1, QuilttSettingsProvider } from '@quiltt/react';
+export { QuilttSettingsProvider, useLazyQuery, useMutation, useQuery, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage, useSubscription } from '@quiltt/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useCallback, useMemo, useEffect, useImperativeHandle } from 'react';
-import { StyleSheet, StatusBar, Platform, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
+import React, { forwardRef, useRef, useState, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
+import { Platform, StyleSheet, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
+import __node_cjsModule from 'node:module';
 
-var version = "4.5.1";
+var version = "5.0.0";
 
 // Custom Error Reporter to avoid hooking into or colliding with a client's Honeybadger singleton
 const notifier = {
@@ -18,21 +20,18 @@ const notifier = {
     version: version
 };
 class ErrorReporter {
-    constructor(platform){
+    constructor(userAgent){
         this.noticeUrl = 'https://api.honeybadger.io/v1/notices';
         this.apiKey = process.env.HONEYBADGER_API_KEY_REACT_NATIVE || '';
-        this.clientName = 'react-native-sdk';
-        this.clientVersion = version;
-        this.platform = platform;
         this.logger = console;
-        this.userAgent = `${this.clientName} ${this.clientVersion}; ${this.platform}`;
+        this.userAgent = userAgent;
     }
     async notify(error, context) {
         const headers = {
             'X-API-Key': this.apiKey,
             'Content-Type': 'application/json',
             Accept: 'application/json',
-            'User-Agent': `${this.clientName} ${this.clientVersion}; ${this.platform}`
+            'User-Agent': this.userAgent
         };
         const payload = await this.buildPayload(error, context);
         const method = 'POST';
@@ -82,7 +81,7 @@ class ErrorReporter {
                 project_root: notice.projectRoot,
                 environment_name: this.userAgent,
                 revision: version,
-                hostname: this.platform,
+                hostname: this.userAgent,
                 time: new Date().toUTCString()
             },
             details: notice.details || {}
@@ -95,6 +94,96 @@ const getErrorMessage = (responseStatus, error)=>{
     return responseStatus ? `An error occurred loading the Connector. Response status: ${responseStatus}` : 'An error occurred while checking the Connector URL';
 };
 
+const require$1 = __node_cjsModule.createRequire(import.meta.url);
+
+// Optionally import react-native-device-info if available
+let DeviceInfo = null;
+try {
+    DeviceInfo = require$1('react-native-device-info').default;
+} catch  {
+// react-native-device-info is not installed - will use fallback
+}
+/**
+ * Gets the React version from the runtime
+ */ const getReactVersion = ()=>{
+    return React.version || 'unknown';
+};
+/**
+ * Gets the React Native version from Platform constants
+ */ const getReactNativeVersion = ()=>{
+    try {
+        const rnVersion = Platform.constants?.reactNativeVersion;
+        if (rnVersion) {
+            return `${rnVersion.major}.${rnVersion.minor}.${rnVersion.patch}`;
+        }
+    } catch (error) {
+        console.warn('Failed to get React Native version:', error);
+    }
+    return 'unknown';
+};
+/**
+ * Gets OS information (platform and version)
+ */ const getOSInfo = ()=>{
+    try {
+        const os = Platform.OS // 'ios' or 'android'
+        ;
+        const osVersion = Platform.Version // string (iOS) or number (Android)
+        ;
+        // Map platform names to correct capitalization
+        const platformNames = {
+            ios: 'iOS',
+            android: 'Android'
+        };
+        const osName = platformNames[os] || 'Unknown';
+        return `${osName}/${osVersion}`;
+    } catch (error) {
+        console.warn('Failed to get OS info:', error);
+        return 'Unknown/Unknown';
+    }
+};
+/**
+ * Gets device model information
+ * Falls back to 'Unknown' if react-native-device-info is not installed
+ */ const getDeviceModel = async ()=>{
+    if (!DeviceInfo) {
+        return 'Unknown';
+    }
+    try {
+        const model = await DeviceInfo.getModel();
+        return model || 'Unknown';
+    } catch (error) {
+        console.warn('Failed to get device model:', error);
+        return 'Unknown';
+    }
+};
+/**
+ * Generates platform information string for React Native
+ * Format: React/<version>; ReactNative/<version>; <OS>/<version>; <device-model>
+ */ const getPlatformInfo = async ()=>{
+    const reactVersion = getReactVersion();
+    const rnVersion = getReactNativeVersion();
+    const osInfo = getOSInfo();
+    const deviceModel = await getDeviceModel();
+    return `React/${reactVersion}; ReactNative/${rnVersion}; ${osInfo}; ${deviceModel}`;
+};
+/**
+ * Synchronously generates platform information string for React Native
+ * Format: React/<version>; ReactNative/<version>; <OS>/<version>; Unknown
+ * Note: Device model is set to 'Unknown' since it requires async DeviceInfo call
+ */ const getPlatformInfoSync = ()=>{
+    const reactVersion = getReactVersion();
+    const rnVersion = getReactNativeVersion();
+    const osInfo = getOSInfo();
+    return `React/${reactVersion}; ReactNative/${rnVersion}; ${osInfo}; Unknown`;
+};
+/**
+ * Generates User-Agent string for React Native SDK
+ * Format: Quiltt/<sdk-version> (React/<version>; ReactNative/<version>; <OS>/<version>; <device-model>)
+ */ const getUserAgent = async (sdkVersion)=>{
+    const platformInfo = await getPlatformInfo();
+    return getUserAgent$1(sdkVersion, platformInfo);
+};
+
 /**
  * Checks if a string appears to be already URL encoded
  * @param str The string to check
@@ -254,7 +343,6 @@ const LoadingScreen = ({ testId })=>/*#__PURE__*/ jsx(AndroidSafeAreaView, {
         })
     });
 
-const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`);
 const PREFLIGHT_RETRY_COUNT = 3;
 const parseMetadata = (url, connectorId)=>{
     const metadata = {
@@ -270,7 +358,7 @@ const parseMetadata = (url, connectorId)=>{
     };
     return metadata;
 };
-const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
+const checkConnectorUrl = async (connectorUrl, errorReporter, retryCount = 0)=>{
     let responseStatus;
     try {
         const response = await fetch(connectorUrl);
@@ -300,7 +388,7 @@ const checkConnectorUrl = async (connectorUrl, retryCount = 0)=>{
             const delay = 50 * 2 ** retryCount;
             await new Promise((resolve)=>setTimeout(resolve, delay));
             console.log(`Retrying connection... Attempt ${retryCount + 1}`);
-            return checkConnectorUrl(connectorUrl, retryCount + 1);
+            return checkConnectorUrl(connectorUrl, errorReporter, retryCount + 1);
         }
         // Report error after retries exhausted
         const errorMessage = getErrorMessage(responseStatus, error);
@@ -355,6 +443,23 @@ const QuilttConnector = /*#__PURE__*/ forwardRef(({ connectorId, connectionId, i
     const [preFlightCheck, setPreFlightCheck] = useState({
         checked: false
     });
+    const [errorReporter, setErrorReporter] = useState(null);
+    const [userAgent, setUserAgent] = useState('');
+    // Initialize error reporter and user agent
+    useEffect(()=>{
+        let mounted = true;
+        const init = async ()=>{
+            const agent = await getUserAgent(version);
+            if (mounted) {
+                setUserAgent(agent);
+                setErrorReporter(new ErrorReporter(agent));
+            }
+        };
+        init();
+        return ()=>{
+            mounted = false;
+        };
+    }, []);
     // Script to disable scrolling on header
     const disableHeaderScrollScript = `
     (function() {
@@ -380,10 +485,11 @@ const QuilttConnector = /*#__PURE__*/ forwardRef(({ connectorId, connectionId, i
         oauthRedirectUrl
     ]);
     const connectorUrl = useMemo(()=>{
+        if (!userAgent) return null;
         const url = new URL(`https://${connectorId}.quiltt.app`);
         // For normal parameters, just append them directly
         url.searchParams.append('mode', 'webview');
-        url.searchParams.append('agent', `react-native-${version}`);
+        url.searchParams.append('agent', userAgent);
         // For the oauth_redirect_url, we need to be careful
         // If it's already encoded, we need to decode it once to prevent
         // the automatic encoding that happens with searchParams.append
@@ -396,18 +502,20 @@ const QuilttConnector = /*#__PURE__*/ forwardRef(({ connectorId, connectionId, i
         return url.toString();
     }, [
         connectorId,
-        safeOAuthRedirectUrl
+        safeOAuthRedirectUrl,
+        userAgent
     ]);
     useEffect(()=>{
-        if (preFlightCheck.checked) return;
+        if (preFlightCheck.checked || !connectorUrl || !errorReporter) return;
         const fetchDataAndSetState = async ()=>{
-            const connectorUrlStatus = await checkConnectorUrl(connectorUrl);
+            const connectorUrlStatus = await checkConnectorUrl(connectorUrl, errorReporter);
             setPreFlightCheck(connectorUrlStatus);
         };
         fetchDataAndSetState();
     }, [
         connectorUrl,
-        preFlightCheck
+        preFlightCheck,
+        errorReporter
     ]);
     const initInjectedJavaScript = useCallback(()=>{
         const script = `\
@@ -573,7 +681,7 @@ const QuilttConnector = /*#__PURE__*/ forwardRef(({ connectorId, connectionId, i
                 }
             }
         }), []);
-    if (!preFlightCheck.checked) {
+    if (!preFlightCheck.checked || !connectorUrl) {
         return /*#__PURE__*/ jsx(LoadingScreen, {
             testId: "loading-screen"
         });
@@ -641,10 +749,53 @@ const styles = StyleSheet.create({
 });
 QuilttConnector.displayName = 'QuilttConnector';
 
+/**
+ * React Native-specific QuilttAuthProvider that injects platform information
+ * into the GraphQL client's User-Agent header.
+ *
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ */ const QuilttAuthProvider = ({ graphqlClient, token, children })=>{
+    // Create React Native-specific GraphQL client with platform info if no custom client provided
+    const platformClient = useMemo(()=>{
+        if (graphqlClient) {
+            return graphqlClient;
+        }
+        const platformInfo = getPlatformInfoSync();
+        return new QuilttClient({
+            cache: new InMemoryCache(),
+            versionLink: createVersionLink(platformInfo)
+        });
+    }, [
+        graphqlClient
+    ]);
+    return /*#__PURE__*/ jsx(QuilttAuthProvider$1, {
+        token: token,
+        graphqlClient: platformClient,
+        children: children
+    });
+};
+
+/**
+ * React Native-specific QuilttProvider that combines settings and auth providers
+ * with platform-specific GraphQL client configuration.
+ */ const QuilttProvider = ({ clientId, graphqlClient, token, children })=>{
+    return /*#__PURE__*/ jsx(QuilttSettingsProvider, {
+        clientId: clientId,
+        children: /*#__PURE__*/ jsx(QuilttAuthProvider, {
+            token: token,
+            graphqlClient: graphqlClient,
+            children: children
+        })
+    });
+};
+
 // Hermes doesn't have atob
 // https://github.com/facebook/hermes/issues/1178
 if (!global.atob) {
     global.atob = decode;
 }
 
-export { QuilttConnector, checkConnectorUrl, handleOAuthUrl };
+export { QuilttAuthProvider, QuilttConnector, QuilttProvider, checkConnectorUrl, handleOAuthUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "4.5.1",
+  "version": "5.0.0",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -28,24 +28,24 @@
   ],
   "main": "dist/index.js",
   "dependencies": {
-    "@honeybadger-io/core": "6.6.0",
+    "@honeybadger-io/core": "6.7.2",
     "lodash.debounce": "4.0.8",
-    "@quiltt/react": "4.5.1",
-    "@quiltt/core": "4.5.1"
+    "react-native-device-info": "15.0.1",
+    "@quiltt/core": "5.0.0",
+    "@quiltt/react": "5.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.8",
+    "@biomejs/biome": "2.3.13",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "22.19.2",
-    "@types/react": "19.2.7",
+    "@types/node": "24.10.9",
+    "@types/react": "19.2.10",
     "base-64": "1.0.0",
-    "bunchee": "6.6.2",
-    "react": "19.2.3",
+    "bunchee": "6.9.4",
+    "react": "19.2.4",
     "react-native": "0.81.5",
     "react-native-url-polyfill": "3.0.0",
     "react-native-webview": "13.15.0",
-    "react-test-renderer": "19.2.3",
     "rimraf": "6.1.2",
     "typescript": "5.9.3"
   },

package/src/components/QuilttConnector.tsx

@@ -18,6 +18,7 @@ import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTyp
 import {
   ErrorReporter,
   getErrorMessage,
+  getUserAgent,
   isEncoded,
   normalizeUrlEncoding,
   smartEncodeURIComponent,
@@ -28,7 +29,6 @@ import { AndroidSafeAreaView } from './AndroidSafeAreaView'
 import { ErrorScreen } from './ErrorScreen'
 import { LoadingScreen } from './LoadingScreen'
 
-const errorReporter = new ErrorReporter(`${Platform.OS} ${Platform.Version}`)
 const PREFLIGHT_RETRY_COUNT = 3
 
 export type PreFlightCheck = {
@@ -55,6 +55,7 @@ const parseMetadata = (url: URL, connectorId: string): ConnectorSDKCallbackMetad
 
 export const checkConnectorUrl = async (
   connectorUrl: string,
+  errorReporter: ErrorReporter,
   retryCount = 0
 ): Promise<PreFlightCheck> => {
   let responseStatus: number | undefined
@@ -85,7 +86,7 @@ export const checkConnectorUrl = async (
       const delay = 50 * 2 ** retryCount
       await new Promise((resolve) => setTimeout(resolve, delay))
       console.log(`Retrying connection... Attempt ${retryCount + 1}`)
-      return checkConnectorUrl(connectorUrl, retryCount + 1)
+      return checkConnectorUrl(connectorUrl, errorReporter, retryCount + 1)
     }
 
     // Report error after retries exhausted
@@ -170,6 +171,25 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
     const webViewRef = useRef<WebView>(null)
     const { session } = useQuilttSession()
     const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
+    const [errorReporter, setErrorReporter] = useState<ErrorReporter | null>(null)
+    const [userAgent, setUserAgent] = useState<string>('')
+
+    // Initialize error reporter and user agent
+    useEffect(() => {
+      let mounted = true
+      const init = async () => {
+        const agent = await getUserAgent(version)
+        if (mounted) {
+          setUserAgent(agent)
+          setErrorReporter(new ErrorReporter(agent))
+        }
+      }
+      init()
+
+      return () => {
+        mounted = false
+      }
+    }, [])
 
     // Script to disable scrolling on header
     const disableHeaderScrollScript = `
@@ -197,11 +217,13 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
     }, [oauthRedirectUrl])
 
     const connectorUrl = useMemo(() => {
+      if (!userAgent) return null
+
       const url = new URL(`https://${connectorId}.quiltt.app`)
 
       // For normal parameters, just append them directly
       url.searchParams.append('mode', 'webview')
-      url.searchParams.append('agent', `react-native-${version}`)
+      url.searchParams.append('agent', userAgent)
 
       // For the oauth_redirect_url, we need to be careful
       // If it's already encoded, we need to decode it once to prevent
@@ -214,16 +236,16 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
       }
 
       return url.toString()
-    }, [connectorId, safeOAuthRedirectUrl])
+    }, [connectorId, safeOAuthRedirectUrl, userAgent])
 
     useEffect(() => {
-      if (preFlightCheck.checked) return
+      if (preFlightCheck.checked || !connectorUrl || !errorReporter) return
       const fetchDataAndSetState = async () => {
-        const connectorUrlStatus = await checkConnectorUrl(connectorUrl)
+        const connectorUrlStatus = await checkConnectorUrl(connectorUrl, errorReporter)
         setPreFlightCheck(connectorUrlStatus)
       }
       fetchDataAndSetState()
-    }, [connectorUrl, preFlightCheck])
+    }, [connectorUrl, preFlightCheck, errorReporter])
 
     const initInjectedJavaScript = useCallback(() => {
       const script = `\
@@ -404,7 +426,7 @@ const QuilttConnector = forwardRef<QuilttConnectorHandle, QuilttConnectorProps>(
       []
     )
 
-    if (!preFlightCheck.checked) {
+    if (!preFlightCheck.checked || !connectorUrl) {
       return <LoadingScreen testId="loading-screen" />
     }
 

package/src/index.ts

@@ -7,16 +7,38 @@ if (!global.atob) {
 }
 
 export * from '@quiltt/core'
+// Re-export Apollo Client types (via @quiltt/react)
+export type {
+  ApolloQueryResult,
+  DocumentNode,
+  ErrorPolicy,
+  FetchPolicy,
+  MutationHookOptions,
+  MutationResult,
+  NormalizedCacheObject,
+  OperationVariables,
+  QueryHookOptions,
+  QueryResult,
+  SubscriptionHookOptions,
+  SubscriptionResult,
+  TypedDocumentNode,
+  WatchQueryFetchPolicy,
+} from '@quiltt/react'
+// Re-export Apollo Client utilities and hooks (via @quiltt/react)
+// Re-export Quiltt-specific providers and hooks
 export {
-  QuilttAuthProvider,
-  QuilttProvider,
   QuilttSettingsProvider,
+  useLazyQuery,
+  useMutation,
+  useQuery,
   useQuilttClient,
   useQuilttConnector,
   useQuilttSession,
   useQuilttSettings,
   useSession,
   useStorage,
+  useSubscription,
 } from '@quiltt/react'
 
 export * from './components'
+export * from './providers'

package/src/providers/QuilttAuthProvider.tsx

@@ -0,0 +1,46 @@
+import type { FC } from 'react'
+import { useMemo } from 'react'
+
+import { createVersionLink, InMemoryCache, QuilttClient } from '@quiltt/core'
+import type { QuilttAuthProviderProps as ReactQuilttAuthProviderProps } from '@quiltt/react'
+import { QuilttAuthProvider as ReactQuilttAuthProvider } from '@quiltt/react'
+
+import { getPlatformInfoSync } from '@/utils/telemetry'
+
+export type QuilttAuthProviderProps = ReactQuilttAuthProviderProps
+
+/**
+ * React Native-specific QuilttAuthProvider that injects platform information
+ * into the GraphQL client's User-Agent header.
+ *
+ * If a token is provided, will validate the token against the api and then import
+ * it into trusted storage. While this process is happening, the component is put
+ * into a loading state and the children are not rendered to prevent race conditions
+ * from triggering within the transitionary state.
+ */
+export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
+  graphqlClient,
+  token,
+  children,
+}) => {
+  // Create React Native-specific GraphQL client with platform info if no custom client provided
+  const platformClient = useMemo(() => {
+    if (graphqlClient) {
+      return graphqlClient
+    }
+
+    const platformInfo = getPlatformInfoSync()
+    return new QuilttClient({
+      cache: new InMemoryCache(),
+      versionLink: createVersionLink(platformInfo),
+    })
+  }, [graphqlClient])
+
+  return (
+    <ReactQuilttAuthProvider token={token} graphqlClient={platformClient}>
+      {children}
+    </ReactQuilttAuthProvider>
+  )
+}
+
+export default QuilttAuthProvider

package/src/providers/QuilttProvider.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'react'
+
+import type { QuilttSettingsProviderProps } from '@quiltt/react'
+import { QuilttSettingsProvider } from '@quiltt/react'
+
+import type { QuilttAuthProviderProps } from './QuilttAuthProvider'
+import { QuilttAuthProvider } from './QuilttAuthProvider'
+
+type QuilttProviderProps = QuilttSettingsProviderProps & QuilttAuthProviderProps
+
+/**
+ * React Native-specific QuilttProvider that combines settings and auth providers
+ * with platform-specific GraphQL client configuration.
+ */
+export const QuilttProvider: FC<QuilttProviderProps> = ({
+  clientId,
+  graphqlClient,
+  token,
+  children,
+}) => {
+  return (
+    <QuilttSettingsProvider clientId={clientId}>
+      <QuilttAuthProvider token={token} graphqlClient={graphqlClient}>
+        {children}
+      </QuilttAuthProvider>
+    </QuilttSettingsProvider>
+  )
+}
+
+export default QuilttProvider

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './QuilttAuthProvider'
+export * from './QuilttProvider'

package/src/utils/error/ErrorReporter.ts

@@ -17,20 +17,14 @@ type HoneybadgerResponseData = {
 class ErrorReporter {
   private noticeUrl: string
   private apiKey: string
-  private clientName: string
-  private clientVersion: string
-  private platform: string
   private logger: Console
   private userAgent: string
 
-  constructor(platform: string) {
+  constructor(userAgent: string) {
     this.noticeUrl = 'https://api.honeybadger.io/v1/notices'
     this.apiKey = process.env.HONEYBADGER_API_KEY_REACT_NATIVE || ''
-    this.clientName = 'react-native-sdk'
-    this.clientVersion = version
-    this.platform = platform
     this.logger = console
-    this.userAgent = `${this.clientName} ${this.clientVersion}; ${this.platform}`
+    this.userAgent = userAgent
   }
 
   async notify(error: Error, context?: any): Promise<void> {
@@ -38,7 +32,7 @@ class ErrorReporter {
       'X-API-Key': this.apiKey,
       'Content-Type': 'application/json',
       Accept: 'application/json',
-      'User-Agent': `${this.clientName} ${this.clientVersion}; ${this.platform}`,
+      'User-Agent': this.userAgent,
     }
 
     const payload = await this.buildPayload(error, context)
@@ -92,7 +86,7 @@ class ErrorReporter {
         project_root: notice.projectRoot,
         environment_name: this.userAgent,
         revision: version,
-        hostname: this.platform,
+        hostname: this.userAgent,
         time: new Date().toUTCString(),
       },
       details: notice.details || {},

package/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './error'
+export * from './telemetry'
 export * from './url'

package/src/utils/telemetry.ts

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Platform } from 'react-native'
+
+import { getUserAgent as coreGetUserAgent } from '@quiltt/core'
+
+// Optionally import react-native-device-info if available
+let DeviceInfo: any = null
+try {
+  DeviceInfo = require('react-native-device-info').default
+} catch {
+  // react-native-device-info is not installed - will use fallback
+}
+
+/**
+ * Gets the React version from the runtime
+ */
+export const getReactVersion = (): string => {
+  return React.version || 'unknown'
+}
+
+/**
+ * Gets the React Native version from Platform constants
+ */
+export const getReactNativeVersion = (): string => {
+  try {
+    const rnVersion = Platform.constants?.reactNativeVersion
+    if (rnVersion) {
+      return `${rnVersion.major}.${rnVersion.minor}.${rnVersion.patch}`
+    }
+  } catch (error) {
+    console.warn('Failed to get React Native version:', error)
+  }
+  return 'unknown'
+}
+
+/**
+ * Gets OS information (platform and version)
+ */
+export const getOSInfo = (): string => {
+  try {
+    const os = Platform.OS // 'ios' or 'android'
+    const osVersion = Platform.Version // string (iOS) or number (Android)
+
+    // Map platform names to correct capitalization
+    const platformNames: Record<string, string> = {
+      ios: 'iOS',
+      android: 'Android',
+    }
+    const osName = platformNames[os] || 'Unknown'
+
+    return `${osName}/${osVersion}`
+  } catch (error) {
+    console.warn('Failed to get OS info:', error)
+    return 'Unknown/Unknown'
+  }
+}
+
+/**
+ * Gets device model information
+ * Falls back to 'Unknown' if react-native-device-info is not installed
+ */
+export const getDeviceModel = async (): Promise<string> => {
+  if (!DeviceInfo) {
+    return 'Unknown'
+  }
+
+  try {
+    const model = await DeviceInfo.getModel()
+    return model || 'Unknown'
+  } catch (error) {
+    console.warn('Failed to get device model:', error)
+    return 'Unknown'
+  }
+}
+
+/**
+ * Generates platform information string for React Native
+ * Format: React/<version>; ReactNative/<version>; <OS>/<version>; <device-model>
+ */
+export const getPlatformInfo = async (): Promise<string> => {
+  const reactVersion = getReactVersion()
+  const rnVersion = getReactNativeVersion()
+  const osInfo = getOSInfo()
+  const deviceModel = await getDeviceModel()
+
+  return `React/${reactVersion}; ReactNative/${rnVersion}; ${osInfo}; ${deviceModel}`
+}
+
+/**
+ * Synchronously generates platform information string for React Native
+ * Format: React/<version>; ReactNative/<version>; <OS>/<version>; Unknown
+ * Note: Device model is set to 'Unknown' since it requires async DeviceInfo call
+ */
+export const getPlatformInfoSync = (): string => {
+  const reactVersion = getReactVersion()
+  const rnVersion = getReactNativeVersion()
+  const osInfo = getOSInfo()
+
+  return `React/${reactVersion}; ReactNative/${rnVersion}; ${osInfo}; Unknown`
+}
+
+/**
+ * Generates User-Agent string for React Native SDK
+ * Format: Quiltt/<sdk-version> (React/<version>; ReactNative/<version>; <OS>/<version>; <device-model>)
+ */
+export const getUserAgent = async (sdkVersion: string): Promise<string> => {
+  const platformInfo = await getPlatformInfo()
+  return coreGetUserAgent(sdkVersion, platformInfo)
+}