> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi Tab Chat UI Guide

> Multi Tab Chat UI Guide — CometChat integration guide.

We’ll use the [CometChatConversationsWithMessages](/ui-kit/react-native/v4/conversations-with-messages), [CometChatUsersWithMessages](/ui-kit/react-native/v4/users-with-messages), and [CometChatGroupsWithMessages](/ui-kit/react-native/v4/groups-with-messages) components and launch them as individual tab items within the tabbed layout.

Step 1: Create a new component CometChatUI

<Tabs>
  <Tab title="CometChatUI.tsx">
    ```tsx theme={null}
    export function CometChatUI() {
      return <View></View>;
    }
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="CometChatUI.tsx">
    ```tsx theme={null}
    import { CometChatTabs } from "@cometchat/chat-uikit-react-native";

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

Step 3: Pass [CometChatConversationsWithMessages](/ui-kit/react-native/v4/conversations-with-messages), [CometChatUsersWithMessages](/ui-kit/react-native/v4/users-with-messages), [CometChatGroupsWithMessages](/ui-kit/react-native/v4/groups-with-messages) components to the Tabs components to launch them as individual tab item. We will also make the `CometChatConversationsWithMessages` tab the active tab by default.

<Tabs>
  <Tab title="CometChatUI.tsx">
    ```tsx theme={null}
    import {
      CometChatUsersWithMessages,
      CometChatGroupsWithMessages,
      CometChatConversationsWithMessages,
      CometChatTabs,
    } 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>
      );
    }
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="App.jsx">
    ```jsx theme={null}
    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;
    ```
  </Tab>
</Tabs>

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. 🎉

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d14c1876-cometchat_ui_cometchat_screens-9adaaecb86825323a344913ff62919bc.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=e93902b670ee12dca8a68022e5a18ee2" alt="Image" width="4498" height="3120" data-path="images/d14c1876-cometchat_ui_cometchat_screens-9adaaecb86825323a344913ff62919bc.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/dc3c428b-cometchat_ui_cometchat_screens-1cfd7755d9b7b5e83174c05c9d992d60.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=383339a8866991d0d474592444178540" alt="Image" width="4498" height="3120" data-path="images/dc3c428b-cometchat_ui_cometchat_screens-1cfd7755d9b7b5e83174c05c9d992d60.png" />
  </Tab>
</Tabs>