npm install @telnyx/react-voice-commons-sdk

// App.tsx
import React from 'react';
import { TelnyxVoiceApp, createTelnyxVoipClient } from '@telnyx/react-voice-commons-sdk';
import YourAppContent from './YourAppContent';

// Create the VoIP client instance
const voipClient = createTelnyxVoipClient({
  enableAppStateManagement: true, // Enable automatic app state management
  debug: true, // Enable debug logging
});

export default function App() {
  return (
    <TelnyxVoiceApp
      voipClient={voipClient}
      enableAutoReconnect={true}
      debug={true}
    >
      <YourAppContent />
    </TelnyxVoiceApp>
  );
}

// LoginScreen.tsx
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';
import { useTelnyxVoice, createCredentialConfig } from '@telnyx/react-voice-commons-sdk';

export function LoginScreen() {
  const { voipClient } = useTelnyxVoice();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const config = createCredentialConfig(username, password, {
      debug: true,
    });

    await voipClient.login(config);
  };

  return (
    <View>
      <TextInput
        placeholder="SIP Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        placeholder="SIP Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <TouchableOpacity onPress={handleLogin}>
        <Text>Connect</Text>
      </TouchableOpacity>
    </View>
  );
}

// DialerScreen.tsx
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';
import { useTelnyxVoice } from '@telnyx/react-voice-commons-sdk';

export function DialerScreen() {
  const { voipClient } = useTelnyxVoice();
  const [phoneNumber, setPhoneNumber] = useState('');

  const makeCall = async () => {
    const call = await voipClient.newCall(phoneNumber);
    console.log('Call initiated:', call);
  };

  return (
    <View>
      <TextInput
        placeholder="Enter phone number"
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        keyboardType="phone-pad"
      />
      <TouchableOpacity onPress={makeCall}>
        <Text>Call</Text>
      </TouchableOpacity>
    </View>
  );
}

// useConnectionState.ts
import { useEffect, useState } from 'react';
import { useTelnyxVoice, TelnyxConnectionState } from '@telnyx/react-voice-commons-sdk';

export function useConnectionState() {
  const { voipClient } = useTelnyxVoice();
  const [connectionState, setConnectionState] = useState(voipClient.currentConnectionState);

  useEffect(() => {
    const subscription = voipClient.connectionState$.subscribe(setConnectionState);
    return () => subscription.unsubscribe();
  }, [voipClient]);

  return connectionState;
}

const voipClient = createTelnyxVoipClient({
  enableAppStateManagement: true, // Auto-handle background/foreground
  debug: true,                    // Enable debug logging
});

<TelnyxVoiceApp
  voipClient={voipClient}
  enableAutoReconnect={true}        // Auto-reconnect on app launch
  debug={true}                      // Enable debug logging
  skipWebBackgroundDetection={true} // Skip web-specific detection
  onPushNotificationProcessingStarted={() => {
    console.log('Push notification processing started');
  }}
  onPushNotificationProcessingCompleted={() => {
    console.log('Push notification processing completed');
  }}
  onAppStateChanged={(state) => {
    console.log('App state changed:', state);
  }}
>
  {children}
</TelnyxVoiceApp>

import { createCredentialConfig } from '@telnyx/react-voice-commons-sdk';

const config = createCredentialConfig('your_sip_username', 'your_sip_password', {
  debug: true,
});

await voipClient.login(config);

import { createTokenConfig } from '@telnyx/react-voice-commons-sdk';

const config = createTokenConfig('your_jwt_token', {
  debug: true,
});

await voipClient.loginWithToken(config);

// Automatically reconnect using stored credentials
const success = await voipClient.loginFromStoredConfig();

if (!success) {
  // Show login form
  console.log('Please log in again');
}