Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Search messages

Copy link

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.


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

Copy link

The following table lists the properties of MessageSearchFragment.

Properties
RequiredTypeDescription

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.

OptionalTypeDescription

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

Copy link

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

Copy link

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.

List of properties

Copy link

The following table lists the properties of MessageSearchModule.List.

Property nameTypeDescription

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

Copy link

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

StatusEmpty

Copy link

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

StatusError

Copy link

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


Customization

Copy link

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