BUILT FOR REACT NATIVE

React Native
Chat UI Kit

Add mobile conversations with Tencent RTC’s React Native Chat UI Kit. Bring connected conversation lists, messages, and input components to your iOS and Android app.

Start Building Try Chat Demo

DEVELOPER RESOURCES

React Native Chat UI Kit Docs & Examples

Component Reference

Explore the React Native Chat UI Kit components.

Explore Components User Authentication

Integration Guides

Install the React Native Chat UI Kit and send a test message.

React Native Integration Quick Start

Examples & Source

Explore the messaging experience and the official developer resources.

Try Chat Demo View React Native Source

A meeting place in your app

Bring your community together with familiar mobile conversations.

Explore Community Chat

Show it in the conversation

Make room for photos and attachments in the flow of a mobile chat.

Read the Integration Guide

REACT NATIVE CHAT CAPABILITIES

The essentials, ready to connect

Conversation lists

Recent conversations
Unread message indicators

Messaging UI

Connected message views
An integrated composer

Media sharing

Photos and attachments
Native media permissions

People and groups

Direct conversations
Group interactions

Make it yours

Adapt the UI source
Fit your navigation

Connected components

Chat SDK underneath
Your application identity

Explore the React Native Chat Components

See how the components fit together.

Conversations

Every conversation in reach

Start with a connected conversation list and adapt its previews.

Read the Documentation

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

Messages

Let the conversation unfold

Add a message list for the selected conversation.

Read the Documentation

import { MessageList } from
  '@tencentcloud/chat-uikit-react-native';

<MessageList conversationID={conversationID} />

Composer

Make it easy to reply

Connect the input to the same conversation as the message list.

Read the Documentation

import { MessageInput } from
  '@tencentcloud/chat-uikit-react-native';

<MessageInput conversationID={conversationID} />

CUSTOMIZATION

Customize Your React Native Chat UI

Bring your visual style and application flow into chat.

Make the screen yours

Adapt the component styles and preview renderers to your mobile brand.

Read the Documentation

GET STARTED

Your first conversation starts here

01
Create your app
Set up a Chat application and your test users.
Open Chat Console
02
Add the React Native Chat UI Kit
Follow the platform guide to connect your project.
Follow the Integration Guide
03
Connect your users
Sign in two test users and send your first message.
Connect Your Users

React Native Chat UI Kit

npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-native

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

React Native Chat UI Kit FAQs

Can I use these components in Expo Go?

Native dependencies require a native build. Follow the current guide’s Expo development build or React Native workflow, install the peer dependencies, and configure media permissions. The component excerpts assume the login and native setup are complete.

Read the integration guide

How is the React Native UI Kit different from the SDK?

The UI Kit adds connected interface components on top of the messaging SDK. Use the Core SDK when you want to build the entire interface yourself.

Explore the Core SDK

How do I authenticate users of the React Native Chat UI Kit?

Generate production UserSig on your backend. Pass it to the client for authentication and keep your application secret on the server.

Read the authentication guide

Are these React Native snippets a complete application?

They show individual integration steps. Follow the full guide for imports, initialization, login, error handling, and target-specific configuration. Test messaging with separate accounts before release.

Follow the full tutorial

How is React Native Chat UI Kit usage priced?

Hosted Chat service usage follows your selected plan. Check the included features and allowances for your application; optional plugins and Call services can have separate requirements.

View Chat pricing

How do I integrate React Native Chat UI Kit with React Native?

Install the documented package and native dependencies, then rebuild your native app. Verify permissions, lifecycle and native callbacks rather than assuming a JavaScript-only runtime.

Read the platform guide

How do I test React Native Chat UI Kit before releasing my app?

Check login, SDK readiness, send and receive events, and message state after reconnecting.

Read the platform guide

How do I customize the interface for React Native Chat UI Kit?

Copy the UI Kit's screens into your application when you need screen-level changes. For example, adjust ChatScreen and the local stack routes to open a conversation from your existing customer profile. The official example uses @react-navigation/native; replacing it also requires updating navigation calls inside the copied screens. Keep SafeAreaProvider and ToastRoot, and test your customized flow on both Android and iOS.

Read the customization guide

Find support for your next step

Integration questions

Get setup help for the React Native Chat UI Kit.

View Developer Documentation

Talk about your application

Discuss your product, expected usage, and integration needs.

Contact Sales

Build your next conversation

Build your app with the React Native Chat UI Kit.

Get started for free View the UI Kit Guide

React Native Chat UI Kit

React Native Chat UI Kit Docs & Examples

Component Reference

Integration Guides

Examples & Source

A meeting place in your app

Show it in the conversation

The essentials, ready to connect

Conversation lists

Messaging UI

Media sharing

People and groups

Make it yours

Connected components

Explore the React Native Chat Components

Every conversation in reach

Let the conversation unfold

Make it easy to reply

Customize Your React Native Chat UI

Make the screen yours

Fit the way people connect

Your first conversation starts here

Create your app

Add the React Native Chat UI Kit

Connect your users

React Native Chat UI Kit FAQs

Can I use these components in Expo Go?

How is the React Native UI Kit different from the SDK?

How do I authenticate users of the React Native Chat UI Kit?

Are these React Native snippets a complete application?

How is React Native Chat UI Kit usage priced?

How do I integrate React Native Chat UI Kit with React Native?

How do I test React Native Chat UI Kit before releasing my app?

How do I customize the interface for React Native Chat UI Kit?

Find support for your next step

Integration questions

Talk about your application

Build your next conversation

React Native
Chat UI Kit