# React Native RTC Quickstart

> Build a cross-platform mobile video call with Agora RTC.

A React Native quickstart for joining Agora RTC channels, rendering local and remote video, and cleaning up the native RTC engine.

- Author: Agora
- Updated: 2026-09-01
- Difficulty: Beginner
- Categories: rtc
- Platforms: React Native, iOS, Android
- Use cases: Quickstart, Video Calling
- Capabilities: Agora RTC, React Native, Mobile, Video Calling
- [Recipe page](https://recipes.agora.io/recipes/agora-rn-rtc-quickstart)
- [Implementation repository](https://github.com/AgoraIO-Community/Agora-RN-Quickstart)
- [Source recipe](https://github.com/AgoraIO-Community/Agora-RN-Quickstart/blob/master/docs/ai/RECIPE.md)
- [Raw source Markdown](https://raw.githubusercontent.com/AgoraIO-Community/Agora-RN-Quickstart/master/docs/ai/RECIPE.md)
- [All recipes](https://recipes.agora.io/llms.txt)

## Implementation guide

# React Native RTC quickstart

## Overview

Build a cross-platform mobile video call with React Native and Agora RTC.

Use this recipe when you want a working reference for React Native, iOS, Android, RTC video call.

Repository: [AgoraIO-Community/Agora-RN-Quickstart](https://github.com/AgoraIO-Community/Agora-RN-Quickstart)

## Prerequisites

- An Agora account and project App ID.
- The platform toolchain required by this repository.
- A test device, simulator, browser, or runtime that supports the sample's audio/video path.
- A second RTC client or sample instance for validating remote publish and subscribe behavior.

## Configure

Create or update the project configuration with:

- `AGORA_APP_ID`

For local testing, some Agora projects allow tokenless joins when App Certificate is disabled. For production, generate RTC tokens on a trusted server and renew them before expiration.

For React Native, register RTC event handlers before joining and release the native engine on unmount.

## Run The Sample

Install JavaScript dependencies, run platform setup such as CocoaPods for iOS, configure the Agora App ID, then launch the app. Join from a second client to confirm local and remote video surfaces.

## What To Check

- The app registers Agora RTC event handlers before joining a channel.
- Local media preview or local audio state appears after permissions are granted.
- Remote users are rendered or heard when they publish audio/video.
- `user-published` or native user-joined callbacks are handled for each media type the sample supports.
- Leaving the channel stops local capture and releases RTC resources.

## Production Notes

- Never ship an App Certificate or privileged token generator in a client app.
- Renew tokens from the SDK expiration callback before the current token expires.
- Use subscriber/audience roles for users who should not publish media.
- Keep UID types consistent across clients in the same channel.
- For browser-based samples, deploy over HTTPS except when testing on `localhost`; for native samples, validate camera, microphone, and audio routing permissions on target devices.

## Implementation Prompt

```text
You are working in `AgoraIO-Community/Agora-RN-Quickstart`. Add or adapt this sample so a developer can run the react native rtc quickstart end to end with Agora RTC.

Goals:
- Preserve the existing sample architecture and README commands.
- Configure Agora credentials through environment variables or the platform-native configuration already used by the repo.
- Register RTC event handlers before joining the channel.
- Join a test channel, publish local media when the sample role allows it, and subscribe to remote users.
- Clean up RTC resources when leaving the channel or closing the app.
- Add production notes for token generation, renewal, and audience-only subscriber roles where applicable.

Validate by running the project-specific build or launch command from the README and testing with a second client in the same channel.
```


## Recipe prompt

You are implementing the "React Native RTC Quickstart" recipe in this project.

Read the recipe markdown first:
https://raw.githubusercontent.com/AgoraIO-Community/Agora-RN-Quickstart/master/docs/ai/RECIPE.md

Use the source repository for cross-reference:
https://github.com/AgoraIO-Community/Agora-RN-Quickstart

Build this recipe into the user's app using the markdown as the implementation guide. Inspect related source files through the repository links when the recipe points to them. Ask before installing new dependencies.