AutoCompleteSuggestionHeader

Renders the header for the autocomplete list.

Best Practices

• Keep headers short and informative to avoid obscuring suggestions.
• Use triggerType to display context-specific labels or icons.
• Avoid expensive rendering in the header to keep input responsive.
• Keep styles consistent with suggestion items for visual cohesion.
• Use the customization hook instead of editing internal components.

General Usage

Customize AutoCompleteSuggestionHeader and pass it via AutoCompleteSuggestionHeader on Channel.

See Customizing autocomplete suggestions for details.

import {
  Channel,
  AutoCompleteSuggestionHeader,
} from "stream-chat-react-native";

const AutoCompleteSuggestionHeaderComponent = () => (
  <AutoCompleteSuggestionHeader />
);

<Channel
  AutoCompleteSuggestionHeader={AutoCompleteSuggestionHeaderComponent}
/>;

Props

queryText

The text typed in the message input to generate suggestions.

triggerType

The trigger that determines which autocomplete list to show.