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,
  WithComponents,
} from "stream-chat-react-native";

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

<WithComponents
  overrides={{
    AutoCompleteSuggestionHeader: AutoCompleteSuggestionHeaderComponent,
  }}
>
  <Channel channel={channel} />
</WithComponents>;

Props