Multi Tab Chat UI Guide

Learn how to create a tabbed chat interface using CometChatTabs with Conversations, Users, and Groups components in React Native.

Quick Reference for AI Agents & Developers

This guide covers:

• Creating a tabbed chat UI with CometChatTabs
• Integrating CometChatConversationsWithMessages, CometChatUsersWithMessages, and CometChatGroupsWithMessages
• Customizing tab styles and appearance

import { CometChatTabs, CometChatConversationsWithMessages } from "@cometchat/chat-uikit-react-native";

const tabs = [
  { id: "chats", title: "Chats", isActive: true, childView: () => <CometChatConversationsWithMessages /> },
];

<CometChatTabs tabs={tabs} tabAlignment="top" keepAlive={true} />

This guide will help you achieve a tabbed layout (aka Multi-Tab Chat UI) of the components available in CometChatUIKit for React-native.

We’ll use the CometChatConversationsWithMessages, CometChatUsersWithMessages, and CometChatGroupsWithMessages components and launch them as individual tab items within the tabbed layout.

Step 1: Create a new component CometChatUI

TypeScript

import { View } from "react-native";

export function CometChatUI() {
  return <View></View>;
}

JavaScript

import { View } from "react-native";

export function CometChatUI() {
  return <View></View>;
}

Step 2: Import the CometChatTabs component from the UI Kit.

TypeScript

import { View } from "react-native";
import { CometChatTabs } from "@cometchat/chat-uikit-react-native";

export function CometChatUI() {
  return (
    <View style={{ marginTop: 10, height: "100%", width: "100%" }}>
      <CometChatTabs />
    </View>
  );
}

JavaScript

import { View } from "react-native";
import { CometChatTabs } from "@cometchat/chat-uikit-react-native";

export function CometChatUI() {
  return (
    <View style={{ marginTop: 10, height: "100%", width: "100%" }}>
      <CometChatTabs />
    </View>
  );
}

Step 3: Pass CometChatConversationsWithMessages, CometChatUsersWithMessages, CometChatGroupsWithMessages components to the Tabs components to launch them as individual tab item. We will also make the CometChatConversationsWithMessages tab the active tab by default.

TypeScript

import { View, SafeAreaView } from "react-native";
import {
  CometChatUsersWithMessages,
  CometChatGroupsWithMessages,
  CometChatConversationsWithMessages,
  CometChatTabs,
  CometChatContextProvider,
  TabItem,
  TabItemStyleInterface,
} from "@cometchat/chat-uikit-react-native";

export function CometChatUI() {
  const tabItemStyle: TabItemStyleInterface = {
    activeBackgroundColor: "#6851D6",
  };

  const chatsTab: TabItem = {
    id: "chats",
    //iconURL: <custom icon>,
    title: "Chats",
    style: tabItemStyle,
    isActive: true,
    childView: () => <CometChatConversationsWithMessages />,
  };

  const usersTab: TabItem = {
    id: "users",
    //iconURL: <custom icon>,
    title: "Users",
    style: tabItemStyle,
    childView: () => <CometChatUsersWithMessages />,
  };

  const groupsTab: TabItem = {
    id: "groups",
    title: "Groups",
    //iconURL: <custom icon>,
    style: tabItemStyle,
    childView: () => <CometChatGroupsWithMessages />,
  };

  const tabs = [chatsTab, usersTab, groupsTab];

  const tabsStyle = {
    titleTextFont: theme.typography.heading,
    titleTextColor: theme.palette.getAccent(),
    tabHeight: 36,
    tabBorderRadius: 18,
    activeTabBackgroundColor: theme.palette.getPrimary(),
    activeTabTitleTextColor: theme.palette.getSecondary(),
    backgroundColor: theme.palette.getBackgroundColor(),
    borderRadius: 18,
    backIconTint: theme.palette.getPrimary(),
    selectionIconTint: theme.palette.getPrimary(),
    tabBackgroundColor: theme.palette.getAccent200(),
    tabTitleTextColor: theme.palette.getAccent(),
    tabTitleTextFont: theme.typography.text1,
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatContextProvider theme={theme}>
        <View style={{ marginTop: 10, height: "100%", width: "100%" }}>
          <CometChatTabs
            tabs={tabs}
            tabAlignment="top"
            keepAlive={true}
            style={tabsStyle}
          ></CometChatTabs>
        </View>
      </CometChatContextProvider>
    </SafeAreaView>
  );
}

JavaScript

import { View, SafeAreaView } from "react-native";
import {
  CometChatUsersWithMessages,
  CometChatGroupsWithMessages,
  CometChatConversationsWithMessages,
  CometChatTabs,
  CometChatContextProvider,
} from "@cometchat/chat-uikit-react-native";

export function CometChatUI() {
  const tabItemStyle = {
    activeBackgroundColor: "#6851D6",
  };

  const chatsTab = {
    id: "chats",
    //iconURL: <custom icon>,
    title: "Chats",
    style: tabItemStyle,
    isActive: true,
    childView: () => <CometChatConversationsWithMessages />,
  };

  const usersTab = {
    id: "users",
    //iconURL: <custom icon>,
    title: "Users",
    style: tabItemStyle,
    childView: () => <CometChatUsersWithMessages />,
  };

  const groupsTab = {
    id: "groups",
    title: "Groups",
    //iconURL: <custom icon>,
    style: tabItemStyle,
    childView: () => <CometChatGroupsWithMessages />,
  };

  const tabs = [chatsTab, usersTab, groupsTab];

  const tabsStyle = {
    titleTextFont: theme.typography.heading,
    titleTextColor: theme.palette.getAccent(),
    tabHeight: 36,
    tabBorderRadius: 18,
    activeTabBackgroundColor: theme.palette.getPrimary(),
    activeTabTitleTextColor: theme.palette.getSecondary(),
    backgroundColor: theme.palette.getBackgroundColor(),
    borderRadius: 18,
    backIconTint: theme.palette.getPrimary(),
    selectionIconTint: theme.palette.getPrimary(),
    tabBackgroundColor: theme.palette.getAccent200(),
    tabTitleTextColor: theme.palette.getAccent(),
    tabTitleTextFont: theme.typography.text1,
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatContextProvider theme={theme}>
        <View style={{ marginTop: 10, height: "100%", width: "100%" }}>
          <CometChatTabs
            tabs={tabs}
            tabAlignment="top"
            keepAlive={true}
            style={tabsStyle}
          ></CometChatTabs>
        </View>
      </CometChatContextProvider>
    </SafeAreaView>
  );
}

Step 4: Import the CometChatUI component into your App component.

TypeScript

import React, { useState } from "react";
import { SafeAreaView } from "react-native";
import { CometChatContextProvider, CometChatTheme } from "@cometchat/chat-uikit-react-native";
import { CometChatUI } from "./CometChatUI";

function App() {
  const theme = new CometChatTheme({});
  theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" });
  const [currentTheme, setCurrentTheme] = useState<CometChatTheme>(theme);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatContextProvider theme={currentTheme}>
        <CometChatUI />
      </CometChatContextProvider>
    </SafeAreaView>
  );
}

export default App;

JavaScript

import React, { useState } from "react";
import { SafeAreaView } from "react-native";
import { CometChatContextProvider, CometChatTheme } from "@cometchat/chat-uikit-react-native";
import { CometChatUI } from "./CometChatUI";

function App() {
  const theme = new CometChatTheme({});
  theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" });
  const [currentTheme, setCurrentTheme] = useState(theme);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatContextProvider theme={currentTheme}>
        <CometChatUI />
      </CometChatContextProvider>
    </SafeAreaView>
  );
}

export default App;

You can now see chats, users and group components each as tab items. This is how you can launch CometChat UIKit’s individual component in a tabbed layout. 🎉

iOS

Android

---

Next Steps

Conversations

Display and manage user conversations

Message List

Show messages within a conversation