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.

To view the image in full screen, click on the

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}
    />
  );
};

The following table lists the properties of MessageSearchFragment.

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.

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

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

The following table lists the properties of MessageSearchModule.List.

The StatusLoading component exists in the MessageSearchModule and lets the user know if the list is loading.

The StatusEmpty component exists in the MessageSearchModule and lets the user know if the list is empty.

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

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 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 = () => {};
  
  return (
    <MessageSearchFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressSearchResultItem={navigateToGroupChannelWithSearchItem}
      renderSearchResultItem={(props) => {
        return <MySearchResultItem {...props} />;
      }}
    />
  );
};