# 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`](/chat/docs/sdk/react-native/v8/core-components/channel#autocompletesuggestionitem/) on `Channel`.

See [`Customizing autocomplete suggestions`](/chat/docs/sdk/react-native/v8/guides/customize-autocomplete-suggestion-list/) for details.

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

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

<Channel AutoCompleteSuggestionItem={AutoCompleteSuggestionItemComponent} />;
```

## Props

### `itemProps`

| type                                                           |
| -------------------------------------------------------------- |
| Suggestion(`CommandSuggestion` \| `Emoji` \| `UserSuggestion`) |

`CommandSuggestion` and `UserSuggestion` come from `stream-chat`; `Emoji` is defined in the SDK.

### `triggerType`

The trigger that determines which autocomplete list to show.

| Type                              |
| --------------------------------- |
| 'command' \| 'emoji' \| 'mention' |


---

This page was last updated at 2026-04-17T17:33:44.582Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/autocomplete-suggestion-item/](https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/autocomplete-suggestion-item/).