BUILT FOR REACT NATIVE
React Native
Chat SDK
Build mobile messaging with Tencent RTC’s React Native Chat SDK. Share chat logic across iOS and Android while keeping your own screens and native interactions.
DEVELOPER RESOURCES
React Native Chat SDK Docs & Examples
Integration Guides
Install the React Native Chat SDK and send a test message.
Examples & Source
Explore the messaging experience and the official developer resources.
Share the moment
Connect your native photo picker to conversations that keep people close.
Keep projects moving
Bring shared files and team discussions into the mobile tools people already use.
REACT NATIVE CHAT CAPABILITIES
Messaging foundations for your product
Direct conversations
- One-to-one messages
- Your own interface
Group messaging
- Shared conversations
- Membership APIs
Rich messages
- Text and media
- Custom application content
Conversation state
- History and unread counts
- Your application store
User identity
- Your own user IDs
- UserSig authentication
App integration
- React Native APIs
- Platform-specific lifecycle
Explore the React Native Chat APIs
Start with the APIs that connect your application.
One messaging layer, two platforms
Register the upload and network plugins before connecting your users.
Read the Documentationimport TencentCloudChat from '@tencentcloud/chat';
import NetInfo from '@react-native-community/netinfo';
import TIMUploadPlugin from 'tim-upload-plugin';
const chat = TencentCloudChat.create({ SDKAppID });
chat.registerPlugin({ 'chat-network-monitor': NetInfo });
chat.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });Keep the conversation moving
Send a direct text message after login and SDK_READY.
Read the Documentationconst message = chat.createTextMessage({
to: recipientID,
conversationType: TencentCloudChat.TYPES.CONV_C2C,
payload: { text: 'See you there!' },
});
await chat.sendMessage(message);Bring new messages into view
Update your application state when messages arrive.
Read the Documentationchat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessages);
// Dispose your listener when the subscription ends.
chat.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessages);CUSTOMIZATION
Your experience. Your way.
Build your own interface around connected conversations.
Build an experience of your own
Connect messaging events to the screens and interactions your product needs.
Read the DocumentationGive conversations a place to grow
Connect people and groups through chat that belongs inside your application.
Read the DocumentationGET STARTED
Your first conversation starts here
- 01
- 02
Add the React Native Chat SDK
Follow the platform guide to connect your project.
Follow the Integration Guide - 03
npm install @tencentcloud/chat tim-upload-plugin @react-native-community/netinfoimport TencentCloudChat from '@tencentcloud/chat';
import NetInfo from '@react-native-community/netinfo';
import TIMUploadPlugin from 'tim-upload-plugin';
const chat = TencentCloudChat.create({ SDKAppID });
chat.registerPlugin({ 'chat-network-monitor': NetInfo });
chat.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });React Native Chat SDK FAQs
Does the SDK handle native platform setup?
The messaging layer is shared, but native modules, media permissions, push configuration, and device builds still need platform-specific setup. Follow the React Native SDK guide for the supported package combination.
Does the React Native Chat SDK include a ready-made UI?
The SDK supplies messaging APIs and events. Your application builds the chat screens. The illustrations show possible app experiences.
How do I authenticate users of the React Native Chat SDK?
Generate production UserSig on your backend. Pass it to the client for authentication and keep your application secret on the server.
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.
How is React Native Chat SDK 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.
How do I integrate React Native Chat SDK 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.
How do I test React Native Chat SDK before releasing my app?
Check login, SDK readiness, send and receive events, and message state after reconnecting.
How do I customize the interface for React Native Chat SDK?
Build your own conversation list, message rendering and composer around documented SDK events.
Find support for your next step
Talk about your application
Discuss your product, expected usage, and integration needs.
Contact SalesBuild your next conversation
Build your app with the React Native Chat SDK.

