New Chat - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react-native`
Key components	`CometChatUsers`, `CometChatGroups`, `CometChatConversations`
Init	`CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
Purpose	Unified new chat entry point for starting 1:1 or group conversations
Sample app	GitHub
Related	Users · Groups · All Guides

The New Chat feature lets users start conversations with other users or join group conversations from a single interface. Before starting, complete the Getting Started guide.

Components

Component / Class	Role
`CometChatUsers`	Displays list of available users for chat creation
`CometChatGroups`	Shows available groups for joining
`CometChatConversations`	Main conversations list

Integration Steps

1. New Chat Screen with Tabs

Create a screen with tabs to switch between Users and Groups lists.

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import {
  CometChatUsers,
  CometChatGroups,
  useTheme,
  useCometChatTranslation,
  Icon,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

const NewChatScreen = () => {
  const navigation = useNavigation();
  const theme = useTheme();
  const { t } = useCometChatTranslation();
  const [selectedTab, setSelectedTab] = useState<'user' | 'group'>('user');

  const handleUserPress = (user: CometChat.User) => {
    navigation.navigate('Messages', { user });
  };

  const handleGroupPress = (group: CometChat.Group) => {
    if (group.getHasJoined()) {
      navigation.navigate('Messages', { group });
    } else {
      // Handle join flow for non-joined groups
      handleJoinGroup(group);
    }
  };

  const handleJoinGroup = async (group: CometChat.Group) => {
    if (group.getType() === CometChat.GROUP_TYPE.PUBLIC) {
      try {
        const joinedGroup = await CometChat.joinGroup(
          group.getGuid(),
          group.getType() as CometChat.GroupType,
          ''
        );
        navigation.navigate('Messages', { group: joinedGroup });
      } catch (error) {
        console.error('Error joining group:', error);
      }
    } else if (group.getType() === CometChat.GROUP_TYPE.PASSWORD) {
      // Show password input modal
      navigation.navigate('JoinGroup', { group });
    }
  };

  return (
    <View style={[styles.container, { backgroundColor: theme.color.background1 }]}>
      {/* Header */}
      <View style={[styles.header, { borderBottomColor: theme.color.borderLight }]}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          {/* Back icon */}
        </TouchableOpacity>
        <Text style={[theme.typography.heading1.bold, { color: theme.color.textPrimary }]}>
          {t('NEW_CHAT')}
        </Text>
      </View>

      {/* Tabs */}
      <View style={styles.tabs}>
        <TouchableOpacity
          style={[
            styles.tab,
            selectedTab === 'user' && { borderBottomColor: theme.color.primary, borderBottomWidth: 2 },
          ]}
          onPress={() => setSelectedTab('user')}
        >
          <Text style={{
            color: selectedTab === 'user' ? theme.color.primary : theme.color.textSecondary,
          }}>
            {t('USERS')}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.tab,
            selectedTab === 'group' && { borderBottomColor: theme.color.primary, borderBottomWidth: 2 },
          ]}
          onPress={() => setSelectedTab('group')}
        >
          <Text style={{
            color: selectedTab === 'group' ? theme.color.primary : theme.color.textSecondary,
          }}>
            {t('GROUPS')}
          </Text>
        </TouchableOpacity>
      </View>

      {/* Content */}
      <View style={{ flex: 1 }}>
        {selectedTab === 'user' ? (
          <CometChatUsers
            hideHeader={true}
            onItemPress={handleUserPress}
          />
        ) : (
          <CometChatGroups
            hideHeader={true}
            onItemPress={handleGroupPress}
          />
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
  },
  tabs: {
    flexDirection: 'row',
  },
  tab: {
    flex: 1,
    paddingVertical: 15,
    alignItems: 'center',
  },
});

export default NewChatScreen;

2. Add New Chat Button to Conversations

Add a floating action button or header option to launch the new chat screen.

import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import {
  CometChatConversations,
  useTheme,
  Icon,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

const ConversationsScreen = () => {
  const navigation = useNavigation();
  const theme = useTheme();

  const handleConversationPress = (conversation: CometChat.Conversation) => {
    const conversationWith = conversation.getConversationWith();
    
    if (conversationWith instanceof CometChat.User) {
      navigation.navigate('Messages', { user: conversationWith });
    } else if (conversationWith instanceof CometChat.Group) {
      navigation.navigate('Messages', { group: conversationWith });
    }
  };

  const handleNewChatPress = () => {
    navigation.navigate('NewChat');
  };

  return (
    <View style={{ flex: 1 }}>
      <CometChatConversations
        onItemPress={handleConversationPress}
        AppBarOptions={() => (
          <TouchableOpacity onPress={handleNewChatPress}>
            {/* New chat icon */}
          </TouchableOpacity>
        )}
      />
      
      {/* Floating Action Button */}
      <TouchableOpacity
        style={[styles.fab, { backgroundColor: theme.color.primary }]}
        onPress={handleNewChatPress}
      >
        {/* Plus icon */}
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  fab: {
    position: 'absolute',
    bottom: 20,
    right: 20,
    width: 56,
    height: 56,
    borderRadius: 28,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
  },
});

export default ConversationsScreen;

3. Create Conversation Screen

A dedicated screen for creating new 1:1 conversations by selecting a user.

import React from 'react';
import { View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import {
  CometChatUsers,
  useTheme,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

const CreateConversationScreen = () => {
  const navigation = useNavigation();
  const theme = useTheme();

  const handleUserSelect = (user: CometChat.User) => {
    // Navigate directly to messages with selected user
    navigation.replace('Messages', { user });
  };

  return (
    <View style={{ flex: 1, backgroundColor: theme.color.background1 }}>
      <CometChatUsers
        onItemPress={handleUserSelect}
        onBack={() => navigation.goBack()}
      />
    </View>
  );
};

export default CreateConversationScreen;

Configure navigation to include all new chat related screens.

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ConversationsScreen from './screens/ConversationsScreen';
import NewChatScreen from './screens/NewChatScreen';
import CreateConversationScreen from './screens/CreateConversationScreen';
import MessagesScreen from './screens/MessagesScreen';

const Stack = createNativeStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Conversations" component={ConversationsScreen} />
      <Stack.Screen name="NewChat" component={NewChatScreen} />
      <Stack.Screen name="CreateConversation" component={CreateConversationScreen} />
      <Stack.Screen name="Messages" component={MessagesScreen} />
    </Stack.Navigator>
  );
};

Feature Matrix

Feature	Component / Method
User selection	`CometChatUsers` with `onItemPress`
Group selection	`CometChatGroups` with `onItemPress`
Join public group	`CometChat.joinGroup()`
Navigate to chat	`navigation.navigate('Messages', { user/group })`
Tab navigation	Custom tabs with state management

Next Steps

Conversations

Display and manage conversation lists.

Users

Display and manage user lists.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Integration Steps

​1. New Chat Screen with Tabs

​2. Add New Chat Button to Conversations

​3. Create Conversation Screen

​4. Navigation Setup

​Feature Matrix

​Next Steps