Skip to content

Added CometChatSearch component and its usage documentation; implemen… #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
swayam-cometchat wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added CometChatSearch component and its usage documentation; implemen… #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4ad303
Added CometChatSearch component and its usage documentation; implemen…
swayam-cometchat Dec 2, 2025
d11e74e
fix
swayam-cometchat Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -883,7 +883,8 @@
"ui-kit/react-native/outgoing-call",
"ui-kit/react-native/call-buttons",
"ui-kit/react-native/call-logs",
"ui-kit/react-native/ai-assistant-chat-history"
"ui-kit/react-native/ai-assistant-chat-history",
"ui-kit/react-native/search"
]
},
{
Expand Down
73 changes: 73 additions & 0 deletions ui-kit/react-native/component-styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1000,6 +1000,79 @@ return (

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Search

The `CometChatSearch` component allows users to search through conversations and messages. It provides a user-friendly interface for finding specific content quickly, with customizable styles for various elements such as background colors, text appearances, and section headers.

<Frame>
<img src="/images/android-search-style.png" />
</Frame>

```javascript
import {
CometChatSearch,
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//code
return (
<SafeAreaView style={{ flex: 1 }}>
<CometChatThemeProvider
theme={{
light: {
typography: {
heading4: {
bold: {
fontFamily: "TimesNewRoman-Bold",
},
medium: {
fontFamily: "TimesNewRoman",
},
regular: {
fontFamily: "TimesNewRoman",
},
},
},
searchStyles: {
containerStyle: {
backgroundColor: "#EDEAFA",
},
sectionTitleStyle: {
backgroundColor: "#EDEAFA",
color: "#000000",
},
conversationItemStyle: {
backgroundColor: "#EDEAFA",
titleStyle: {
fontFamily: "TimesNewRoman",
},
subtitleStyle: {
fontFamily: "TimesNewRoman",
},
},
messageItemStyle: {
backgroundColor: "#EDEAFA",
titleStyle: {
fontFamily: "TimesNewRoman",
},
subtitleStyle: {
fontFamily: "TimesNewRoman",
},
},
filterButtonTextStyle: {
fontFamily: "TimesNewRoman",
},
},
},
}}
>
{loggedIn && <CometChatSearch />}
</CometChatThemeProvider>
</SafeAreaView>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).


## Base Component

Expand Down
77 changes: 77 additions & 0 deletions ui-kit/react-native/conversations.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,50 @@ return <CometChatConversations onSubmit={onSubmitHandler} />;

***

##### onSearchBarClicked

The `onSearchBarClicked` event is triggered when the user clicks the search bar. It does not have a default behavior. However, you can override its behavior using the following code snippet.

<Tabs>
<Tab title="App.tsx">
```tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react-native";

const onSearchBarClickedHandler = () => {
console.log("Search bar clicked");
};

return <CometChatConversations onSearchBarClicked={onSearchBarClickedHandler} />;
```

</Tab>

</Tabs>

***

##### onSearchTextChanged

This callback is triggered when the search text changes in the search bar, allowing you to handle search functionality.

<Tabs>
<Tab title="App.tsx">
```tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react-native";

const onSearchTextChangedHandler = (searchText: string) => {
console.log("Search text:", searchText);
};

return <CometChatConversations onSearchTextChanged={onSearchTextChangedHandler} />;
```

</Tab>

</Tabs>

***

### Filters

You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/react-native/retrieve-conversations).
Expand Down Expand Up @@ -353,6 +397,9 @@ Below is a list of customizations along with corresponding code snippets
| **usersStatusVisibility** | Prop used to toggle user status visibilty. | `usersStatusVisibility={false}` |
| **groupTypeVisibility** | Prop used to toggle group type visibilty. | `groupTypeVisibility={false}` |
| **deleteConversationOptionVisibility** | Prop used to toggle delete conversation option visibilty. | `deleteConversationOptionVisibility={false}` |
| **showSearchBar** | Prop used to toggle the visibility of the search bar in the conversations header. | `showSearchBar={true}` |
| **searchText** | Current search text value in the search input. | `searchText="search term"` |
| **SearchView** | A custom search view component to display in the conversations header, replacing the default search bar. | `SearchView={customSearchView}` |

### Advanced

Expand Down Expand Up @@ -479,6 +526,36 @@ return (

***

#### SearchView

Allows you to set a custom search view component that replaces the default search bar in the conversations header. This provides complete control over the search interface design and functionality.

Use cases:

* Implementing a custom search bar with advanced filters
* Adding voice search or barcode scanning capabilities
* Creating a branded search interface that matches your app's design

<Tabs>
<Tab title="App.tsx">
```tsx
import { CometChatConversations } from "@cometchat/chat-uikit-react-native";
//code
const getSearchView = (): JSX.Element => {
//your custom Search View
//return jsx;
};
return (
<CometChatConversations SearchView={getSearchView} />
);
```

</Tab>

</Tabs>

***

#### ErrorView

Defines a custom error state view that appears when an issue occurs while loading conversations or messages. This enhances the user experience by displaying friendly error messages instead of generic system errors.
Expand Down
28 changes: 28 additions & 0 deletions ui-kit/react-native/core-features.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,34 @@ Mentions is a robust feature provided by CometChat that enhances the interactivi
| [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) component allows users to compose and send various types of messages, including support for the Mentions feature to directly address participants within the conversation. |
| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component displays a list of sent and received messages. It also supports rendering Mentions, enhancing the clarity and interactivity of conversations by highlighting direct references to users. |

## Quoted Reply

Quoted Reply is a robust feature provided by CometChat that enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu or using swipe gestures. This enhances context, keeps conversations organized, and improves overall chat experience in both 1-1 and group chats.

<Frame>
<img src="/images/android-quoted-reply.png" />
</Frame>

| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) supports replying to messages via the "Reply" option and swipe gestures. Users can swipe on a message or select "Reply" to open the composer with the quoted reply pre-filled, maintaining context. |
| [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) works seamlessly with Quoted Message by showing the quoted reply above the input field, letting users compose their response in proper context. |

## Conversation and Advanced Search

Conversation and Advanced Search is a powerful feature provided by CometChat that enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.

<Frame>
<img src="/images/android-search-overview.png" />
</Frame>

| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Search](/ui-kit/react-native/search) | [Search](/ui-kit/react-native/search) allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. |
| [MessageHeader](/ui-kit/react-native/message-header) | [MessageHeader](/ui-kit/react-native/message-header) shows the search button in the chat header, allowing users to search within a conversation. |
| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) shows the selected message when clicked from search results and highlights it in the message list. |
| [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) displays the search input and search functionality for finding specific conversations. |

## Threaded Conversations

The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.
Expand Down
94 changes: 94 additions & 0 deletions ui-kit/react-native/message-bubble-styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1029,3 +1029,97 @@ return (

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

### Quoted Reply

Quoted Reply bubbles display messages that are replies to other messages, showing the original message context within the reply bubble.

**Default**

<Frame>
<img src="/images/android-quoted-reply-style.png" />
</Frame>

**Customization**

**Customizing Incoming and Outgoing Bubble**

```tsx
import {
CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
//other code
return (
<CometChatThemeProvider
theme={{
light: {
typography: {
heading4: {
bold: {
fontFamily: "TimesNewRoman-Bold",
},
medium: {
fontFamily: "TimesNewRoman",
},
regular: {
fontFamily: "TimesNewRoman",
},
},
},
messageListStyles: {
outgoingMessageBubbleStyles: {
containerStyle: {
backgroundColor: '#e54a4b',
},
textBubbleStyles: {
containerStyle: {
backgroundColor: '#e54a4b',
},
textStyle: {
color: '#ffffff',
fontFamily: 'TimesNewRoman',
},
},
dateStyles: {
textStyle: {
color: '#ffffff',
fontFamily: 'TimesNewRoman',
},
},
messagePreviewStyles: {
containerStyle: {
backgroundColor: '#ea6d71',
},
titleStyle: {
fontFamily: 'TimesNewRoman',
},
subtitleStyle: {
fontFamily: 'TimesNewRoman',
},
},
},
incomingMessageBubbleStyles: {
messagePreviewStyles: {
containerStyle: {
backgroundColor: '#FEEDE1',
},
titleStyle: {
color: '#F76808',
fontFamily: 'TimesNewRoman',
},
subtitleStyle: {
color: '#F76808',
fontFamily: 'TimesNewRoman',
},
},
},
},
},
}}
>
{/*your component*/}
</CometChatThemeProvider>
);
```

To learn more about such attributes, refer to the [theme interface](https://github.com/cometchat/cometchat-uikit-react-native/blob/v5/packages/ChatUiKit/src/theme/type.ts).

Loading