Search messages

Channel members are able to search for messages with keywords using MessageSearchFragment. When the user taps Search in the group channel settings screen, the message search screen appears. Once the user enters a keyword into the search bar, a list of messages that contains the search query is retrieved.

Usage

You can start building a message search screen by first creating a fragment. To do so, call the createMessageSearchFragment method. Once a message search fragment is built, you need to set up the navigation props and register the screen to a navigation library. Refer to the code below.

import React from 'react';

import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import { MessageSearchProps, createMessageSearchFragment, useSendbirdChat } from '@sendbird/uikit-react-native';

const MessageSearchFragment = createMessageSearchFragment();
const MessageSearchScreen = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();

  const { channel } = useGroupChannel(sdk, params.channelUrl);
  if (!channel) return null;
  
  const navigateToBack = () => {};
  const navigateToGroupChannelWithSearchItem: MessageSearchProps['Fragment']['onPressSearchResultItem'] = ({
    message,
  }) => {
    // You must pass `searchItem` to `GroupChannelFragment`
    const searchItem = { startingPoint: message.createdAt };

    // <GroupChannelFragment searchItem={searchItem} />
  };
  
  return (
    <MessageSearchFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressSearchResultItem={navigateToGroupChannelWithSearchItem}
    />
  );
};

List of properties

The following table lists the properties of MessageSearchFragment.

Properties

Required	Type	Description
channel	object	Specifies the group channel to search for messages.
onPressHeaderLeft	function	Specifies the prop to execute a custom navigation operation when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen.
onPressSearchResultItem	function	Specifies the prop to execute a custom navigation operation when the message search result item is selected. By default, the screen changes to the group channel screen.

Optional	Type	Description
renderSearchResultItem	function	Renders a customized view of each message in the search result.
queryCreator	function	Creates and returns a custom message search query to retrieve a list of search results.

Module components

A message search screen is composed of four module components: header, list, loading status, empty status and error status. These components make up the MessageSearchModule and are used to create and display the message search UI.

Header

The view of the header component shows a text input field and a button that searches for the keyword.

List

The message search list component shows a list of messages that contains the search results from specified group channels.

List of properties

The following table lists the properties of MessageSearchModule.List.

Property name	Type	Description
channel	object	Specifies the group channel to search for messages.
messages	array of objects	Specifies a group of messages from the list of search results.
onPressSearchResultItem	function	Specifies the prop to execute custom operations when the search result is selected.
renderSearchResultItem	function	Renders a customized view of each message in the search result.
flatListProps	object	Specifies a FlatList prop that renders a list view in the list component of `MessageSearchModule`.

StatusLoading

The StatusLoading component lets the user know if the list is loading.

StatusEmpty

The StatusEmpty component lets the user know if the list is empty.

StatusError

The StatusError component lets the user know if fetching the message search result has failed.

Customization

In the search message function, you can customize the default MessageSearchFragment to change various elements of the screen such as the module and its components. See the code below on how to replace the default message search result item component with a custom search result item component in MessageSearchFragment as an example.

Note: To learn more about how to customize a fragment, go to the fragment page.

import { Text } from 'react-native';
import React from 'react';

import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import { MessageSearchProps, createMessageSearchFragment, useSendbirdChat } from '@sendbird/uikit-react-native';

const MessageSearchFragment = createMessageSearchFragment({
  Header: () => <Text>{'Custom Header'}</Text>,
  List: () => <Text>{'Custom List'}</Text>,
  StatusLoading: () => <Text>{'Custom Loading'}</Text>,
  StatusEmpty: () => <Text>{'Custom Empty'}</Text>,
  StatusError: () => <Text>{'Custom Error'}</Text>,
});
const MessageSearchScreen = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();

  const { channel } = useGroupChannel(sdk, params.channelUrl);
  if (!channel) return null;
  
  const navigateToBack = () => {};
  const navigateToGroupChannelWithSearchItem = () => {};
  
  return (
    <MessageSearchFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressSearchResultItem={navigateToGroupChannelWithSearchItem}
      renderSearchResultItem={(props) => {
        return <MySearchResultItem {...props} />;
      }}
    />
  );
};

On this page

Usage Module components

Header List StatusLoading StatusEmpty StatusError

Customization

Sample app