@tencentcloud/chat-uikit-react-native

Tencent Cloud IM Chat UIKit for React Native — 20 business components + 22 ready-to-use Screens, install all dependencies with a single npm install, built on top of tuikit-atomicx-react-native to bridge the native SDK.

📦 Installation

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

🚀 Quick Start (3 steps)

import React, { useState } from 'react'
import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import {
  ToastRoot,
  LoginScreen, ChatScreen, ChatSettingScreen,
  ConversationListScreen, ContactListScreen, SearchScreen,
  AddFriendScreen, AddGroupScreen, ApplicationVerifyScreen,
  BlackListScreen, ContactInfoScreen, FriendApplicationListScreen,
  GroupApplicationListScreen, GroupListScreen, SetRemarkScreen,
  GroupManagementScreen, GroupMemberListScreen, GroupTypeInfoScreen,
  CreateGroupScreen, SearchInConversationScreen, UserFilterScreen,
  UserPickerScreen, BottomTabBar, type BottomTabKey,
} from '@tencentcloud/chat-uikit-react-native'

const Stack = createNativeStackNavigator()

const MainScreen: React.FC = () => {
  const [activeTab, setActiveTab] = useState<BottomTabKey>('message')
  return (
    <View style={styles.mainScreen}>
      {activeTab === 'message' ? <ConversationListScreen /> : <ContactListScreen />}
      <BottomTabBar current={activeTab} onChange={setActiveTab} />
    </View>
  )
}

export default function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark'
  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ToastRoot />
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Login" screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Main" component={MainScreen} />
          <Stack.Screen name="Chat" component={ChatScreen} />
          <Stack.Screen name="Search" component={SearchScreen} />
          <Stack.Screen name="ChatSetting" component={ChatSettingScreen} />
          <Stack.Screen name="AddFriend" component={AddFriendScreen} />
          <Stack.Screen name="AddGroup" component={AddGroupScreen} />
          <Stack.Screen name="ApplicationVerify" component={ApplicationVerifyScreen} />
          <Stack.Screen name="BlackList" component={BlackListScreen} />
          <Stack.Screen name="ContactInfo" component={ContactInfoScreen} />
          <Stack.Screen name="FriendApplicationList" component={FriendApplicationListScreen} />
          <Stack.Screen name="GroupApplicationList" component={GroupApplicationListScreen} />
          <Stack.Screen name="GroupList" component={GroupListScreen} />
          <Stack.Screen name="SetRemark" component={SetRemarkScreen} />
          <Stack.Screen name="GroupManagement" component={GroupManagementScreen} />
          <Stack.Screen name="GroupMemberList" component={GroupMemberListScreen} />
          <Stack.Screen name="GroupTypeInfo" component={GroupTypeInfoScreen} />
          <Stack.Screen name="CreateGroup" component={CreateGroupScreen} />
          <Stack.Screen name="SearchInConversation" component={SearchInConversationScreen} />
          <Stack.Screen name="UserFilter" component={UserFilterScreen} />
          <Stack.Screen name="UserPicker" component={UserPickerScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

const styles = StyleSheet.create({ mainScreen: { flex: 1, backgroundColor: '#F5F5F5' } })

Want to customize UI / routing? Run cp -R node_modules/@tencentcloud/chat-uikit-react-native/src/screens ./src/ to copy the screens to your local project and modify as needed. See QUICKSTART.md step 6 for details.

License

Copyright © 2026 Tencent. All rights reserved.