Message search

Message search is a feature that allows users to search for messages within a specific channel. It retrieves a list of messages that contains a search query from group channels joined by a user. You can search for either an exact match or a partial match.

Users can use this feature through the search bar in the message search view. When they search for a keyword in the search bar, the message search view will display the search results as shown below. Users can locate the message that they’re looking for by selecting the specific result.

Note : To learn more about implementing message search, refer to Search messages.

To turn on the message search feature on the group channel settings screen, set uikitOptions.groupChannelSettings.enableMessageSearch to true in the SendbirdUIKitContainer component. The default value is set to false.

const App = () => {
    return (
        <SendbirdUIKitContainer
          uikitOptions={{
            groupChannelSettings: {
              enableMessageSearch: true
            }
          }}
        />
    );
};

Customize the UI for message search

You can customize the component for message search by using renderSearchResultItem as shown in the code below.

import { createMessageSearchFragment } from '@sendbird/uikit-react-native';

const MessageSearchFragment = createMessageSearchFragment();

const MessageSearchScreen = () => {
    return (
        <MessageSearchFragment
          renderSearchResultItem={(props) => {
            return <MySearchResultItem {...props} />;
          }}
        />
    );
};

String resource

The following table shows customizable properties of StringSet.

Category	Property	Description
MESSAGE_SEARCH	HEADER_INPUT_PLACEHOLDER	A placeholder text in the search text field.
MESSAGE_SEARCH	HEADER_RIGHT	A search button on the right side of the search text field.
MESSAGE_SEARCH	SEARCH_RESULT_ITEM_TITLE	A title text for the search result.
MESSAGE_SEARCH	SEARCH_RESULT_ITEM_TITLE_CAPTION	A caption text for the search result.
MESSAGE_SEARCH	SEARCH_RESULT_ITEM_BODY	A body text for the search result.
PLACEHOLDER	NO_RESULTS_FOUND	A placeholder text in case of empty results.

interface StringSet {
    MESSAGE_SEARCH: {
        HEADER_INPUT_PLACEHOLDER: string;
        HEADER_RIGHT: string;
        SEARCH_RESULT_ITEM_TITLE: (message: SendbirdBaseMessage) => string;
        SEARCH_RESULT_ITEM_TITLE_CAPTION: (message: SendbirdBaseMessage, locale?: Locale) => string;
        SEARCH_RESULT_ITEM_BODY: (message: SendbirdBaseMessage) => string;
    };
    PLACEHOLDER: {
        NO_RESULTS_FOUND: string;
    };
}

Icon resource

The following table shows customizable file sharing icons.

Icon	Image	Description
photo		An icon indicating an image file message.
play		An icon indicating an video file message.
file-audio		An icon indicating an audio file message.
file-document		An icon indicating a document file message.
search		Indicates the message search feature.
remove		Clear the text field in message search bar.

import { Icon } from '@sendbird/uikit-react-native-foundation';

Icon.Assets['photo'] = require('your_icons/photo_icon.png');
Icon.Assets['play'] = require('your_icons/play_icon.png');
Icon.Assets['file-audio'] = require('your_icons/file-audio_icon.png');
Icon.Assets['file-document'] = require('your_icons/file-document_icon.png');
Icon.Assets['search'] = require('your_icons/search_icon.png');
Icon.Assets['remove'] = require('your_icons/remove_icon.png');

On this page

Customize the UI for message search

Sample app