AutoCompleteSuggestionItem

Renders an item in the autocomplete list.

Best Practices

• Keep items compact to avoid pushing the list off-screen.
• Use triggerType to adjust item layout based on suggestion type.
• Avoid heavy rendering logic; memoize if items include images.
• Ensure tap targets are large enough for mobile UX.
• Use the SDK types for itemProps to avoid runtime mismatches.

General Usage

Customize AutoCompleteSuggestionItem and pass it via AutoCompleteSuggestionItem on Channel.

See Customizing autocomplete suggestions for details.

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

const AutoCompleteSuggestionItemComponent = () => (
  <AutoCompleteSuggestionItem />
);

<WithComponents
  overrides={{
    AutoCompleteSuggestionItem: AutoCompleteSuggestionItemComponent,
  }}
>
  <Channel channel={channel} />
</WithComponents>;

Props

Mention rows

The default mention row is a dispatcher (MentionSuggestionItem) that switches on itemProps.mentionType and renders a dedicated component per variant. To override one variant while keeping the SDK defaults for the rest, replace AutoCompleteSuggestionItem and delegate to the variant components — they are all exported from stream-chat-react-native:

• MentionUserItem, MentionBroadcastItem, MentionRoleItem, MentionUserGroupItem — the four default variant rows.
• MentionItem, EnhancedMentionContent, EnhancedMentionIcon, TokenizedSuggestionParts — building blocks for composing custom rows.

See Customizing per-mention-type rows for an end-to-end example.