Twilio Voice React Native Reference App

This project consists of a backend server and a React Native app that demonstrate best practices for developing a Twilio Programmable Voice application.

Features

• Dialpad for making outgoing calls to a phone number and other registered clients
• Registering for and receiving incoming calls
• Active call screen to interact with and control ongoing calls
• Login flow for authenticating and authorizing users

Prerequisites

• Understanding of Twilio Programmable Voice.
• A React Native Development Environment.
• An LTS version of NodeJS as specified here.
• A Node package manager. Examples in this project will use the latest version of Yarn v1.
• An Auth0 Account

Setting Up Auth0 Authentication

The Twilio Voice React Native Reference App implements Auth0 to demonstrate login flow for authenticating and authorizing users. Sign in to your Auth0 account and follow the steps below.

Auth0 for the app

1. Create a new Auth0 Native app from the Auth0 user console, then enter your desired Name

2. Navigate to the settings tab of your newly created Auth0 Application. You will now need to fill out the fields labeled Allowed Callback Urls and Allowed Logout Urls. Depending on your use case enter the iOS format, Android format, or both.

Allowed Callback Url format iOS

org.reactjs.native.example.twiliovoicereactnativereferenceapp.auth0://{YourDomain}/ios/org.reactjs.native.example.twiliovoicereactnativereferenceapp/callback

Allowed Callback Url format Android

com.twiliovoicereactnativereferenceapp.auth0://{YourDomain}/android/com.twiliovoicereactnativereferenceapp/callback

Allowed Logout Url format iOS

org.reactjs.native.example.twiliovoicereactnativereferenceapp.auth0://{YourDomain}/ios/org.reactjs.native.example.twiliovoicereactnativereferenceapp/callback

Allowed Logout Url format Android

com.twiliovoicereactnativereferenceapp.auth0://{YourDomain}/android/com.twiliovoicereactnativereferenceapp/callback

Auth0 for the server

Create a new Auth0 API from the Auth0 user console, then enter your desired Name and Identifier.

Structure

• A React Native application under:

  app/
  

• A backend server under:

  server/
  

Please see the README.md files within each sub-folder for more information about that component.

Testing

See docs/e2e-testing.md if you plan to e2e test your fork of this app.

Known Issues

See docs/known-issues.md for details on known issues and workarounds.

Related

• Twilio Voice React Native
• Twilio Voice JS
• Twilio Voice iOS
• Twilio Voice Android

License

See LICENSE