AutoCompleteSuggestionList

Renders the autocomplete list.

Best Practices

• Keep the list height reasonable so it doesn’t obscure the input.
• Use a consistent header/item design for clarity across triggers.
• Avoid heavy re-renders by memoizing list components.
• Use SDK-provided components as a base to preserve behavior.
• Ensure accessibility for keyboard and screen-reader users.

General Usage

Customize AutoCompleteSuggestionList and pass it via AutoCompleteSuggestionList on Channel.

See Customizing autocomplete suggestions for details.

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

const AutoCompleteSuggestionListComponent = () => (
  <AutoCompleteSuggestionList />
);

<Channel AutoCompleteSuggestionList={AutoCompleteSuggestionListComponent} />;

Props

AutoCompleteSuggestionHeader

Renders the autocomplete suggestion header.

AutoCompleteSuggestionItem

Renders an autocomplete suggestion item.