Skip to contentSkip to navigationSkip to topbar
Twilio Docs
Page tools
On this page
Looking for more inspiration?Visit the

Voice React Native SDK: Reference Components

The Twilio Voice React Native Reference Components are reference implementations that show how to build common Twilio Voice use cases with the Voice React Native SDK. They ship as a single Expo app whose routes each lead to a different reference component. Every component includes both client-side code (Expo screens, React hooks, and components) and the server-side code (a Node.js backend) that supports it, so you can see an integrated frontend and backend implementation for each use case. Use the components as a starting point for your own app or as a reference while you build.

Before proceeding, review how the React Native SDK works to familiarize yourself with the core concepts.

Repository

repository page anchor

To download the project, see twilio/twilio-voice-react-native-reference-components on GitHub(link takes you to an external page).

Use case

use-case page anchor

The available reference component shows you how to create an AI conversation in a React Native/Expo application. You place an outbound call to an AI voice agent, powered by Conversation Relay and OpenAI.

Prerequisites

prerequisites page anchor
  • Node.js 24 or later
  • A Twilio account
  • An OpenAI API key (required by the AI Conversation component)
  • An HTTPS tunnel to your local server, such as ngrok
  • For the client: Xcode (iOS) or Android Studio (Android)
(warning)

Warning

Expo Go is not supported. The Twilio Voice React Native SDK includes native code, so you must use a development build.

Set up the project

set-up-the-project page anchor
  1. Clone the Twilio Voice React Native Reference Components GitHub repository and install dependencies.
1
git clone https://github.com/twilio/twilio-voice-react-native-reference-components.git

2
cd twilio-voice-react-native-reference-components

3
npm install
  1. In the Twilio Console, gather the credentials the components need:
    • Your Account SID and Auth Token.
    • An API Key SID and Secret (Account > API keys and tokens).
    • A TwiML App (Voice > TwiML > TwiML Apps). Leave the Voice Request URL blank for now; you set it per component in Run a component.
  2. Create your configuration files from the provided examples and fill in the values.
1
cp secrets.example.env secrets.env

2
cp url.example.env url.env

Add the credentials from the previous step to secrets.env, including your OpenAI API key.

  1. Provide a google-services.json file in the root of the project, adjacent to package.json. The Twilio Voice React Native SDK requires this file for the Android prebuild step. You generate it from a Firebase project.
  2. Start an HTTPS tunnel to your local server in a separate terminal, and note the forwarding host that it prints.
ngrok http 3030
  1. In url.env, set EXPO_PUBLIC_REFERENCE_COMPONENTS_DEV_SERVER_HOST to your tunnel host without the protocol (no https://).
EXPO_PUBLIC_REFERENCE_COMPONENTS_DEV_SERVER_HOST=<YOUR-TUNNEL-HOST>.ngrok.app
  1. Start the server.
npm run server
  1. Create the development build, then run it on a device or simulator.
npm run expo:prebuild
  • Android: open the android/ folder in Android Studio to build and run the app.
  • iOS: open ios/twiliovoicereactnativereferencecomponents.xcworkspace in Xcode to build and run the app.

Run a component

run-a-component page anchor

AI Conversation

ai-conversation page anchor
  1. In the Twilio Console, open your TwiML App and set the Voice Request URL to the AI Conversation endpoint, using your tunnel host from setup:
    • Voice Request URL: https://<YOUR-TUNNEL-HOST>.ngrok.app/ai-conversation/twiml
    • Method: POST
  2. Open the app and navigate to AI Conversation.
  3. Tap Connect to an Agent. You should hear the welcome greeting and then be able to ask the assistant anything.