# 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](/docs/voice/sdks/react-native). 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](/docs/voice/sdks/react-native#how-it-works) to familiarize yourself with the core concepts.

## Repository

To download the project, see [twilio/twilio-voice-react-native-reference-components on GitHub](https://github.com/twilio/twilio-voice-react-native-reference-components).

## Use case

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](/docs/voice/conversationrelay) and OpenAI.

## Prerequisites

* 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]
>
> 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

1. Clone the Twilio Voice React Native Reference Components GitHub repository and install dependencies.

```bash
git clone https://github.com/twilio/twilio-voice-react-native-reference-components.git
cd twilio-voice-react-native-reference-components
npm install
```

2. 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](#run-a-component).
3. Create your configuration files from the provided examples and fill in the values.

```bash
cp secrets.example.env secrets.env
cp url.example.env url.env
```

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

4. 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.
5. Start an HTTPS tunnel to your local server in a separate terminal, and note the forwarding host that it prints.

```bash
ngrok http 3030
```

6. In `url.env`, set `EXPO_PUBLIC_REFERENCE_COMPONENTS_DEV_SERVER_HOST` to your tunnel host **without** the protocol (no `https://`).

```text
EXPO_PUBLIC_REFERENCE_COMPONENTS_DEV_SERVER_HOST=<YOUR-TUNNEL-HOST>.ngrok.app
```

7. Start the server.

```bash
npm run server
```

8. Create the development build, then run it on a device or simulator.

```bash
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

### AI Conversation

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.