@telnyx/react-voice-commons-sdk 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # CHANGELOG.md
 
+## [0.3.0] (2026-04-15)
+
+### ⚠️ Breaking changes
+
+- **`expo-router` is no longer a dependency of the SDK.** The SDK previously navigated the host app in a few places (`useAppStateHandler` on background disconnect, `CallKitHandler` after CallKit answer/end). Those calls have been removed — navigation is now exclusively the host app's responsibility.
+  - **Migration for Expo consumers:** subscribe to `voipClient.connectionState$` and `voipClient.activeCall$` in your app and navigate there. Example:
+    ```tsx
+    useEffect(() => {
+      const sub = voipClient.connectionState$.subscribe((state) => {
+        if (state === TelnyxConnectionState.DISCONNECTED) {
+          router.replace('/');
+        }
+      });
+      return () => sub.unsubscribe();
+    }, []);
+    ```
+  - `CallKitHandler` already exposed `onNavigateToDialer` / `onNavigateBack` callback props; those are now the only way to wire navigation.
+  - The `navigateToLoginOnDisconnect` option on `useAppStateHandler` is retained in the type signature for source compatibility but no longer has any effect.
+- **Bare React Native (non-Expo) projects are now supported.** Metro bundling no longer fails on missing `expo-router`; SDK-level behavior is identical for Expo and bare RN consumers.
+
+### Enhancement
+
+- **`react-native-url-polyfill` is now a direct dependency and auto-loaded** from the SDK entry point. Previously, apps running Hermes crashed on the second login attempt with `URLSearchParams.set is not implemented` because the SDK constructs the WebSocket URL via `URLSearchParams`, which is incomplete in Hermes. No action required from consumers.
+
 ## [0.2.0](https://github.com/team-telnyx/react-native-voice-commons/releases/tag/commons-sdk-v0.2.0) (2026-04-01)
 
 ### Enhancement

package/README.md

@@ -11,6 +11,7 @@ A high-level, state-agnostic, drop-in module for the Telnyx React Native SDK tha
 - **Reactive State Management**: RxJS-based state streams for real-time UI updates
 - **TypeScript Support**: Full TypeScript definitions for better developer experience
 - **Cross-Platform**: Built for both iOS and Android with React Native
+- **Framework-agnostic**: Works in both Expo and bare React Native projects. See the [bare RN reference demo](https://github.com/team-telnyx/telnyx-react-native-bare-demo) for non-Expo integration.
 
 ## About @telnyx/react-voice-commons-sdk
 
@@ -115,6 +116,29 @@ call.callState$.subscribe((state) => {
 });
 ```
 
+### Navigation
+
+As of **v0.3.0**, the SDK no longer navigates the host app. Routing on state transitions (e.g. redirecting to a login screen on disconnect, surfacing a dialer screen after answering a call via CallKit) is entirely the host app's responsibility. Subscribe to `connectionState$` and `activeCall$` and invoke your own navigator.
+
+Example using `expo-router`:
+
+```tsx
+import { router } from 'expo-router';
+import { useEffect } from 'react';
+import { TelnyxConnectionState } from '@telnyx/react-voice-commons-sdk';
+
+useEffect(() => {
+  const sub = voipClient.connectionState$.subscribe((state) => {
+    if (state === TelnyxConnectionState.DISCONNECTED) {
+      router.replace('/');
+    }
+  });
+  return () => sub.unsubscribe();
+}, []);
+```
+
+The same pattern works with `react-navigation`, React Router, or any other navigator — the SDK is agnostic.
+
 ### 4. Call Management
 
 ```tsx

package/lib/hooks/useAppStateHandler.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 exports.useAppStateHandler = void 0;
 const react_1 = require('react');
 const react_native_1 = require('react-native');
-const expo_router_1 = require('expo-router');
 const async_storage_1 = __importDefault(require('@react-native-async-storage/async-storage'));
 const connection_state_1 = require('../models/connection-state');
 const call_state_1 = require('../models/call-state');
@@ -70,9 +69,6 @@ const useAppStateHandler = ({
               if (!stillInProgress) {
                 log('AppStateHandler: Push notification call completed, now disconnecting socket');
                 await voipClient.logout();
-                if (navigateToLoginOnDisconnect) {
-                  expo_router_1.router.replace('/');
-                }
               }
             }, 5000); // Wait 5 seconds
             appState.current = nextAppState;
@@ -83,14 +79,6 @@ const useAppStateHandler = ({
             // Disconnect the socket with background reason
             await voipClient.logout();
             log('AppStateHandler: Socket disconnected successfully');
-            // Navigate to login screen
-            if (navigateToLoginOnDisconnect) {
-              // Use a small delay to ensure the disconnect completes
-              setTimeout(() => {
-                log('AppStateHandler: Navigating to login screen');
-                expo_router_1.router.replace('/');
-              }, 100);
-            }
           } catch (error) {
             console.error('AppStateHandler: Error during background disconnect:', error);
           }

package/lib/index.d.ts

@@ -8,6 +8,7 @@
  * call state transitions, push notification processing, and native call UI
  * integration.
  */
+import 'react-native-url-polyfill/auto';
 export {
   TelnyxVoipClient,
   createTelnyxVoipClient,

package/lib/index.js

@@ -62,6 +62,7 @@ exports.useAppReadyNotifier =
   exports.createTelnyxVoipClient =
   exports.TelnyxVoipClient =
     void 0;
+require('react-native-url-polyfill/auto');
 // Main client
 var telnyx_voip_client_1 = require('./telnyx-voip-client');
 Object.defineProperty(exports, 'TelnyxVoipClient', {

package/lib/internal/CallKitHandler.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 exports.CallKitHandler = void 0;
 const react_1 = require('react');
 const react_native_1 = require('react-native');
-const expo_router_1 = require('expo-router');
 const async_storage_1 = __importDefault(require('@react-native-async-storage/async-storage'));
 const TelnyxVoiceContext_1 = require('../context/TelnyxVoiceContext');
 // Global flag to ensure only one CallKitHandler is active
@@ -20,7 +19,6 @@ let isCallKitHandlerActive = false;
  * @internal - Users should not use this component directly
  */
 const CallKitHandler = ({ onLoginRequired, onNavigateToDialer, onNavigateBack }) => {
-  const router = (0, expo_router_1.useRouter)();
   const { voipClient } = (0, TelnyxVoiceContext_1.useTelnyxVoice)();
   // Store active calls by CallKit UUID for coordination
   const activeCallsRef = (0, react_1.useRef)(new Map());
@@ -90,11 +88,8 @@ const CallKitHandler = ({ onLoginRequired, onNavigateToDialer, onNavigateBack })
       callUUID: eventData.callUUID,
       isTrackedCall: activeCallsRef.current.has(eventData.callUUID),
     });
-    // Navigate to dialer after answering
     if (onNavigateToDialer) {
       onNavigateToDialer();
-    } else {
-      router.replace('/dialer');
     }
   };
   const handleEndCall = async (eventData) => {
@@ -105,11 +100,8 @@ const CallKitHandler = ({ onLoginRequired, onNavigateToDialer, onNavigateBack })
     // Clean up our local tracking info
     activeCallsRef.current.delete(eventData.callUUID);
     await async_storage_1.default.removeItem('@push_notification_payload');
-    // Navigate back after call ends
     if (onNavigateBack) {
       onNavigateBack();
-    } else {
-      router.replace('/dialer');
     }
   };
   // This component doesn't render anything, it just handles events

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telnyx/react-voice-commons-sdk",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A high-level, state-agnostic, drop-in module for the Telnyx React Native SDK that simplifies WebRTC voice calling integration",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -66,7 +66,6 @@
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": "^2.1.0",
-    "expo-router": "^5.1.0",
     "react": ">=19.0.0 <20.0.0",
     "react-native": ">=0.79.0 <1.0.0",
     "react-native-webrtc": "^124.0.5"
@@ -75,9 +74,6 @@
     "@react-native-async-storage/async-storage": {
       "optional": false
     },
-    "expo-router": {
-      "optional": false
-    },
     "react": {
       "optional": false
     },
@@ -93,6 +89,7 @@
     "@telnyx/react-native-voice-sdk": ">=0.4.1",
     "eventemitter3": "^5.0.1",
     "expo": "~53.0.22",
+    "react-native-url-polyfill": "^3.0.0",
     "react-native-voip-push-notification": "^3.3.3",
     "rxjs": "^7.8.2"
   },
@@ -104,7 +101,6 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.0.0",
-    "expo-router": "^5.1.0",
     "jest": "^29.5.0",
     "prettier": "^3.0.0",
     "ts-jest": "^29.1.0",

package/src/callkit/callkit-coordinator.ts

@@ -2,7 +2,6 @@ import { Platform, AppState } from 'react-native';
 import CallKit, { CallEndReason } from './callkit';
 import { Call } from '@telnyx/react-native-voice-sdk';
 import { VoicePnBridge } from '../internal/voice-pn-bridge';
-import { router } from 'expo-router';
 import { TelnyxVoipClient } from '../telnyx-voip-client';
 import { TelnyxConnectionState } from '../models/connection-state';
 import { act } from 'react';

package/src/hooks/useAppStateHandler.ts

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
-import { router } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { TelnyxVoipClient } from '../telnyx-voip-client';
 import { TelnyxConnectionState } from '../models/connection-state';
@@ -76,9 +75,6 @@ export const useAppStateHandler = ({
               if (!stillInProgress) {
                 log('AppStateHandler: Push notification call completed, now disconnecting socket');
                 await voipClient.logout();
-                if (navigateToLoginOnDisconnect) {
-                  router.replace('/');
-                }
               }
             }, 5000); // Wait 5 seconds
             appState.current = nextAppState;
@@ -92,15 +88,6 @@ export const useAppStateHandler = ({
             await voipClient.logout();
 
             log('AppStateHandler: Socket disconnected successfully');
-
-            // Navigate to login screen
-            if (navigateToLoginOnDisconnect) {
-              // Use a small delay to ensure the disconnect completes
-              setTimeout(() => {
-                log('AppStateHandler: Navigating to login screen');
-                router.replace('/');
-              }, 100);
-            }
           } catch (error) {
             console.error('AppStateHandler: Error during background disconnect:', error);
           }

package/src/index.ts

@@ -9,6 +9,8 @@
  * integration.
  */
 
+import 'react-native-url-polyfill/auto';
+
 // Main client
 export {
   TelnyxVoipClient,

package/src/internal/CallKitHandler.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import { Platform, DeviceEventEmitter } from 'react-native';
-import { useRouter } from 'expo-router';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useTelnyxVoice } from '../context/TelnyxVoiceContext';
 import { callKitCoordinator } from '../callkit';
@@ -36,7 +35,6 @@ export const CallKitHandler: React.FC<CallKitHandlerProps> = ({
   onNavigateToDialer,
   onNavigateBack,
 }) => {
-  const router = useRouter();
   const { voipClient } = useTelnyxVoice();
 
   // Store active calls by CallKit UUID for coordination
@@ -118,11 +116,8 @@ export const CallKitHandler: React.FC<CallKitHandlerProps> = ({
       isTrackedCall: activeCallsRef.current.has(eventData.callUUID),
     });
 
-    // Navigate to dialer after answering
     if (onNavigateToDialer) {
       onNavigateToDialer();
-    } else {
-      router.replace('/dialer');
     }
   };
 
@@ -136,11 +131,8 @@ export const CallKitHandler: React.FC<CallKitHandlerProps> = ({
     activeCallsRef.current.delete(eventData.callUUID);
     await AsyncStorage.removeItem('@push_notification_payload');
 
-    // Navigate back after call ends
     if (onNavigateBack) {
       onNavigateBack();
-    } else {
-      router.replace('/dialer');
     }
   };