Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Voice React Native SDK


Twilio Programmable Voice SDK for React Native allows you to add voice-over-IP (VoIP) calling into your React Native apps. Please check out the following if you are new to Twilio's Programmable Voice or React Native.

(information)

Info

For step-by-step instructions to get up and running with the React Native SDK for Programmable Voice, check out the reference app on github(link takes you to an external page).


How it Works

how-it-works page anchor
Mobile Voice SDK Diagram: Your mobile app connects to Twilio.
  1. You connect to Twilio from your mobile app with the Voice SDK
  2. Twilio sends a request to your webhook to get TwiML instructions
  3. Your backend responds to Twilio with TwiML instructions
    • For example, you can instruct Twilio to call a number, call a VoIP endpoint, or connect to a conference.
    • E.g. To connect to a phone number, your backend would return <Dial callerId="+155512345678"><Number>+155587654321</Number></Dial>
  4. Twilio executes your TwiML instructions (e.g. Dials the number in your TwiML instructions)
  5. Twilio creates a VoIP connection between your callee and your mobile app

Authentication and Authorization

authentication-and-authorization page anchor

Twilio Programmable Voice SDKs use an authentication and authorization mechanism called Access Tokens for providing clients access to your voice applications. Access Tokens govern the client application authentication session with your account in the Twilio cloud. Your application backend should vend an Access Token to clients in order for the client to make or receive calls.

Access Tokens are different from the now deprecated Capability Tokens used in the previous versions of Twilio Client. Using a Capability Token in the Programmable Voice SDK will not work. Access Tokens, just like Capability Tokens before, are JWT tokens(link takes you to an external page), but use a new, more flexible format that is consistent across all of the modern Twilio SDKs.


Under the hood, the Voice React Native SDK utilizes the Android and iOS Twilio Programmable Voice SDKs. Check out the following pages for more details on each platform.


NPM

npm page anchor

The package is available through npm(link takes you to an external page).


_10
yarn add @twilio/voice-react-native-sdk

Using this method, you can import the Voice SDK using ES Module or TypeScript syntax.


_16
import { Voice } from '@twilio/voice-react-native-sdk';
_16
_16
// getAccessToken should fetch an AccessToken from your backend
_16
const token = getAccessToken();
_16
const voice = new Voice();
_16
_16
// Allow incoming calls
_16
await voice.register(token);
_16
_16
// Handle incoming calls
_16
voice.on('callInvite', (callInvite) => {
_16
callInvite.accept();
_16
});
_16
_16
// Make an outgoing call
_16
const call = await voice.connect(token, params);

The Twilio Voice React Native SDK is open source. Check out our repository(link takes you to an external page) if you want to install from Github or build it locally.


Developer tools and configuration options for Programmable Voice(link takes you to an external page) can be found in the Programmable Voice Dashboard(link takes you to an external page). Use the console to create TwiML apps, update push credentials, view logs, and much more.


Rate this page: