# AutoCompleteInput

Component to render input box within the [`MessageInput`](https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/message-input/).
This component provides autocomplete functionality for the commands and mentions feature.
Commands suggestions will show up when user types "`/`" while mentions suggestions will show up when user types "`@`."

Check the [Customize Message Input guide](https://getstream.io/chat/docs/sdk/react-native/v5/guides/message-input-customization/) for more details on how to customize this component

## Props

### `cooldownActive`

Whether there is currently a cool-down active in a channel with [slow mode](https://getstream.io/chat/docs/javascript/slow-mode/#channel-slow-mode) enabled.

| type    | default |
| ------- | ------- |
| Boolean | false   |

### `additionalTextInputProps`

Additional props provided to the underlying [TextInput](https://reactnative.dev/docs/textinput#props) within [`MessageInput`](https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/message-input/).

| Type   |
| ------ |
| object |

### `autoCompleteSuggestionsLimit`

Maximum number of suggestions to display as part of autocomplete feature within input box.

| Type   | Default |
| ------ | ------- |
| Number | 10      |

### `closeSuggestions`

Function to close the autocomplete suggestions popup.

| Type     |
| -------- |
| function |

### `giphyActive`

True if a user selects the `giphy` command from commands list (which is shown when you type a `/` in the input box).
This value is set back to `false` when the user sends the message for searching Giphy.

| Type    |
| ------- |
| Boolean |

### `giphyEnabled`

Enable Giphy commands feature on the [`MessageInput`](https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/message-input/) component.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### `maxMessageLength`

Maximum length of the message text.
The default value is supplied by the [channel config](https://getstream.io/chat/docs/javascript/channel-features/).

| Type   |
| ------ |
| number |

### `numberOfLines`

Maximum number of lines that underlying [`TextInput`](https://reactnative.dev/docs/textinput) component within [`MessageInput`](https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/message-input/) should expand to.

| Type   | Default |
| ------ | ------- |
| number | 5       |

### `mentionAllAppUsersEnabled`

Allows any of the app users to be mentioned in a message, as part of autocomplete feature within input box.
By default only members of channel can be mentioned while composing a message.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### `mentionAllAppUsersQuery`

Query to be used for searching users as part of autocomplete mention feature within input box.
Please check the [Querying Users](https://getstream.io/docs/platform/users/) docs for
more details on filters/sort/options.

```tsx
mentionAllAppUsersQuery={{
  filters: {
    id: {
      $in: ['vishal', 'lucas']
    }
  },
  sort: {},
  options: {}
}}
```

| Type   |
| ------ |
| object |

### `onChange`

### `openSuggestions`

Function to open the autocomplete suggestions popup. This function takes following two parameters:

- `component` - You can either pass a string or a react element.
  - string - `enum('MentionsItem' | 'CommandsItem' | 'EmojisItem')`. Based on value, one of the default components will be rendered as list item within suggestions list.
  - element - React element which takes `item` as a prop, which is a suggestion item within list set using `updateSuggestions`. This element is used to render item in the suggestions list.
- `title` - component to render a title for suggestions list.

| Type     |
| -------- |
| function |

### `setGiphyActive`

Setter function for [`giphyActive`](https://getstream.io/chat/docs/sdk/react-native/v5/contexts/message-input-context/#giphyactive)

| Type                 |
| -------------------- |
| `(isActive) => void` |

### `setInputBoxRef`

Setter function for [`inputBoxRef`](https://getstream.io/chat/docs/sdk/react-native/v5/contexts/message-input-context/#inputboxref)

| Type            |
| --------------- |
| `(ref) => void` |

### `setShowMoreOptions`

Setter function for [`showMoreOptions`](https://getstream.io/chat/docs/sdk/react-native/v5/contexts/message-input-context/#showmoreoptions).

| Type                        |
| --------------------------- |
| `(showMoreOptions) => void` |

### `text`

Text message entered by user in underlying [`TextInput`](https://reactnative.dev/docs/textinput) within `MessageInput` component.
This value is attached to `TextInput`'s [`value prop`](https://reactnative.dev/docs/textinput#value)

| Type   |
| ------ |
| String |

### `triggerSettings`

Trigger settings for the auto complete input.

| Type   | Default                                                                                                               |
| ------ | --------------------------------------------------------------------------------------------------------------------- |
| Object | [TriggerSettings](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/utils/utils.ts#L177) |

### `updateSuggestions`

Update the suggestions in autocomplete suggestions list. This function takes following two parameters:

- `suggestions` - `{ data: array<object>, onSelect: function }`
- `title` - new title component for suggestions list.

| Type     |
| -------- |
| function |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/auto-complete-input/](https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/auto-complete-input/).