New Chat

Build a unified new chat entry point for starting 1:1 or group conversations in CometChat React Native UI Kit.

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;

---

4. Navigation Setup

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.