# Channel

The `Channel` component is the main entry point for many Stream Chat customizations and contains the majority of the content providers and a significant amount of the logic utilized by Stream Chat for React Native.
Components, custom and out of the box, channel information, and UI integrated chat functions are disseminated by the contexts contained in `Channel`.
[MessageList](/chat/docs/sdk/react-native/v4/ui-components/message-list/), [MessageInput](/chat/docs/sdk/react-native/v4/ui-components/message-input/), and [Thread](/chat/docs/sdk/react-native/v4/ui-components/thread/) all rely on `Channel` to function correctly.

## Basic Usage

`Channel` takes an instance of a StreamChat `channel` as a prop.
You can [create a channel](/chat/docs/javascript/creating-channels/), or if you are navigating from the [`ChannelList`](/chat/docs/sdk/react-native/v4/core-components/channel-list/), access the selected channel via the parameter passed to the [`onSelect`](/chat/docs/sdk/react-native/v4/core-components/channel-list#required-onselect/) function.

```tsx {7-17,22,25}
import { StreamChat } from "stream-chat";
import {
  Channel,
  Chat,
  MessageInput,
  MessageList,
  OverlayProvider,
} from "stream-chat-react-native";

const client = StreamChat.getInstance("api_key");

export const App = () => {
  const [channel, setChannel] = useState();

  useEffect(() => {
    const createAndWatchChannel = async () => {
      const newChannel = client.channel("messaging", "channel_id");
      await newChannel.watch();
      setChannel(newChannel);
    };

    createAndWatchChannel();
  }, []);

  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <MessageList />
          <MessageInput />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};
```

## Context Providers

`Channel` contains providers for the `ChannelContext`, `KeyboardContext`, `MessageInputContext`, `MessagesContext`, `PaginatedMessageListContext`, `SuggestionsContext`, `ThreadContext`, and `TypingContext`.
These can be accessed using the corresponding hooks.

| Context                       | Hook                             |
| ----------------------------- | -------------------------------- |
| `ChannelContext`              | `useChannelContext`              |
| `KeyboardContext`             | `useKeyboardContext`             |
| `MessageInputContext`         | `useMessageInputContext`         |
| `MessagesContext`             | `useMessagesContext`             |
| `PaginatedMessageListContext` | `usePaginatedMessageListContext` |
| `SuggestionsContext`          | `useSuggestionsContext`          |
| `ThreadContext`               | `useThreadContext`               |
| `TypingContext`               | `useTypingContext`               |

## UI Customizations

`Channel` is the entry point for customizing the majority of the Stream Chat for React Native SDK.
The UI can be tailored to your design by replacing any number of components with custom components.
Custom components provided as props to `Channel` will be utilized throughout the SDK where appropriate.

Customizing the message avatar can be done easily by providing a custom component to the appropriate prop.

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

const CustomAvatar = () => {
  const { message } = useMessageContext();

  return <Image source={{ uri: message.user?.image }} />;
};

<Channel MessageAvatar={CustomAvatar} />;
```

<tabs>

<tabs-item value="messages" label="Messages">

![](@chat-sdk/react-native/v8/_assets/ui-components/channel/visual_guide_1.png)

</tabs-item>

<tabs-item value="attachments" label="Attachments">

![](@chat-sdk/react-native/v8/_assets/ui-components/channel/visual_guide_2.png)

</tabs-item>

<tabs-item value='indicators'>

![](@chat-sdk/react-native/v8/_assets/ui-components/channel/visual_guide_3.png)

</tabs-item>

<tabs-item value='input'>

![](@chat-sdk/react-native/v8/_assets/ui-components/channel/visual_guide_4.png)

</tabs-item>

</tabs>

## Props

### channel

Channel instance from the StreamChat client.

| Type                                                |
| --------------------------------------------------- |
| [Channel](/chat/docs/javascript/creating-channels/) |


### keyboardVerticalOffset

Distance between top of the screen and top of Channel component.
This is often the header height.

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

### additionalKeyboardAvoidingViewProps

Additional props provided to the underlying [KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview#props).

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


### additionalTextInputProps

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

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


### additionalTouchableProps

Additional props provided to the underlying [TouchableOpacity](https://reactnative.dev/docs/touchableopacity#props) used by components within a message such as [`MessageContent`](/chat/docs/sdk/react-native/v4/ui-components/message-content#additionaltouchableprops/).

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


### allowThreadMessagesInChannel

Display the _Show thread message in channel_ button inside the thread MessageInput.

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


### autoCompleteSuggestionsLimit

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

| Type   | Default |
| ------ | ------- |
| number | 10      |


### AutoCompleteSuggestionHeader

Component to render the autocomplete suggestion header.

| Type      | Default                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------- |
| Component | [`AutoCompleteSuggestionHeader`](/chat/docs/sdk/react-native/v4/ui-components/autocomplete-suggestion-header/) |


### AutoCompleteSuggestionItem

Component to render the autocomplete suggestion item.

| Type      | Default                                                                                                    |
| --------- | ---------------------------------------------------------------------------------------------------------- |
| Component | [`AutoCompleteSuggestionItem`](/chat/docs/sdk/react-native/v4/ui-components/autocomplete-suggestion-item/) |


### AutoCompleteSuggestionList

Component to render the autocomplete suggestion list.

| Type      | Default                                                                                                    |
| --------- | ---------------------------------------------------------------------------------------------------------- |
| Component | [`AutoCompleteSuggestionItem`](/chat/docs/sdk/react-native/v4/ui-components/autocomplete-suggestion-list/) |


### autoCompleteTriggerSettings

Function that returns the trigger settings for the auto complete input.

| Type     | Default                                                                                                                                           |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| function | [ACITriggerSettings](https://github.com/GetStream/stream-chat-react-native/blob/6f59551d46b24a0d62a5de2dce8121a2ed3c900b/src/utils/utils.ts#L258) |


### compressImageQuality

Image compression quality prior to uploading.

<admonition type="note">

On iOS values of 0.8 and above don't reduce the quality noticeably in most images.
A value of 0.8 will reduce the file size in iOS by approximately half compared to a value of 1.

</admonition>

| Type                                   | Default                  |
| -------------------------------------- | ------------------------ |
| number 0 to 1<br />(1 is best quality) | iOS: 0.8<br />Android: 1 |


### deletedMessagesVisibilityType

Controls the visibility of the deleted messages within the channel.

- `always`: The deleted messages in the channel will be visible to both the sender and receiver.
- `never`: The deleted messages will not be visible to anyone.
- `sender`: The deleted messages in the channel will only be visible to sender.
- `receiver`: The deleted messages in the channel will only be visible to receiver.

| Type                                          | Default |
| --------------------------------------------- | ------- |
| enum('always', 'never', 'receiver', 'sender') | 'both'  |


### disableIfFrozenChannel

Disable all interaction with the Channel component if the channel is _frozen_.

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

### disableKeyboardCompatibleView

Enable or disable the underlying [KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview#enabled).

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

### disableTypingIndicator

Disable typing indicator in `MessageList`.

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


### dismissKeyboardOnMessageTouch

Dismiss the keyboard when a user touches any of the messages in the list.

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


### doDocUploadRequest

Override of the file upload request when a user selects a file from the file picker.
The function must return a `Promise` that is resolved to an object with the key `file` that is the URL of the uploaded file.

<admonition type="note">

This can be used to store file attachments in your own custom CDN.

</admonition>

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

| Parameter | Description                 |
| --------- | --------------------------- |
| file      | `{ name, size, type, uri }` |
| channel   | current channel instance    |


### doImageUploadRequest

Override of the image upload request when a user selects an image from the image picker.
The function must return a `Promise` that is resolved to an object with the key `file` that is the URL of the uploaded image.

<admonition type="note">

This can be used to store image attachments in your own custom CDN.

</admonition>

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

| Parameter | Description              |
| --------- | ------------------------ |
| image     | `{ name, uri }`          |
| channel   | current channel instance |


### doMarkReadRequest

Override the mark read request.

<admonition type="note">

This prop should only be used for advanced functionality in which you want to conditionally allow mark-read requests.

Don not use this function to disable the read-receipts feature.
If you would like to disable read-receipts, this can be done via _Read Events_ on the dashboard.

</admonition>

#### Example

```tsx
const doMarkReadRequest = (channel) => {
  if (/** Some custom logic here */) {
    channel.markRead();
  }
};
```

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

| Parameter | Description      |
| --------- | ---------------- |
| channel   | channel instance |

### doSendMessageRequest

Override the send message request.
This function must return a Promise equivalent to `client.sendMessage`.

<admonition type="note">

This prop should only be used for advanced functionality in which you want to alter the message object before sending.

</admonition>

#### Example

```tsx
const doSendMessageRequest = (channelId, messageObject) => {
  if (/** Some custom logic here */) {
    messageObject.isSpecial = true;
  }
  return channel.sendMessage(messageObject);
}
```

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

| Parameter     | Description |
| ------------- | ----------- |
| channelId     | string      |
| messageObject | object      |

### doUpdateMessageRequest

Override the update message request.
This function must return a Promise equivalent to `client.updateMessage`.

<admonition type="note">

This prop should only be used for advanced functionality in which you want to alter the message object before updating it.

</admonition>

```tsx
const doUpdateMessageRequest = (channelId, messageObject) => {
  const numberOfUpdates = (messageObject.numberOfUpdates ?? 0) + 1;
  const messageToSend = { ...messageObject, numberOfUpdates };
  return client.updateMessage(messageToSend);
};
```

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

| Parameter     | Description |
| ------------- | ----------- |
| channelId     | string      |
| messageObject | object      |

### enableMessageGroupingByUser

**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)

If false, consecutive messages from same user won't be grouped together.

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


### enforceUniqueReaction

Limits reactions to one per user.
If a user selects another reaction, their previous reaction will be replaced.
This is similar to reaction UX of [iMessage](https://en.wikipedia.org/wiki/IMessage).

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


### forceAlignMessages

Forces alignment of messages in the list to either the left or right side of the screen.
By default, received messages are aligned on the left side of the screen, and sent messages are aligned on the right.

| Type                       | Default |
| -------------------------- | ------- |
| 'left' \| 'right' \| false | false   |


### `formatDate`

Format function that returns a string to be used for the date in the message status and delete message component.

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

| Parameter | Description                                                                                                                                                    |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| date      | date to format provided as a string, [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), or number (Unix Timestamp) |


### giphyEnabled

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

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


### globalUnreadCountLimit

Maximum number of unread messages to show as a count on a channel before adding a `+`.
The max allowable is 255, which when reached displays as `255+`.

| Type   | Default |
| ------ | ------- |
| number | 255     |

### giphyVersion

The Giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values.

| Type   | Default        |
| ------ | -------------- |
| string | 'fixed_height' |


### `handleBlock`

Function called when the _Block User_ action is invoked from message actions list.
This function does not override the default behavior of the _Block User_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### `handleCopy`

Function called when the _Copy Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Copy Message_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### `handleDelete`

Function called when the _Delete Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Delete Message_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### `handleEdit`

Function called when the _Edit Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Edit Message_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### `handleFlag`

Function called when the _Flag Message_ action is invoked from message actions list.
This function does not override the default behavior of the _Flag Message_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### `handleMute`

Function called when the _Mute User_ action is invoked from message actions list.
This function does not override the default behavior of the _Mute User_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### handlePinMessage

Function called when the _Pin to Conversation_ or _Unpin from Conversation_ action is invoked from message actions list.
This function does not override the default behavior of the _Pin to Conversation_ or _Unpin from Conversation_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### handleReaction

Function called when a reaction is selected in the message overlay, this is called on both the add and remove action.
This function does not override the default behavior of the reaction being selected.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter    | Description                             |
| ------------ | --------------------------------------- |
| message      | message the action is called on         |
| reactionType | string designating the type of reaction |


### handleQuotedReply

Function called when the _Reply_ action is invoked from message actions list.
This function does not override the default behavior of the _Reply_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### `handleRetry`

Function called when the _Retry_ action is invoked from message actions list.
This function does not override the default behavior of the _Retry_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### handleThreadReply

Function called when the _Thread Reply_ action is invoked from message actions list.
This function does not override the default behavior of the _Thread Reply_ action.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

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

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### `hasCommands`

Enable commands on the [`MessageInput`](/chat/docs/sdk/react-native/v4/ui-components/message-input/) component.

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


### hasFilePicker

Enable the file picker on the [`MessageInput`](/chat/docs/sdk/react-native/v4/ui-components/message-input/) component.

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


### hasImagePicker

Enable the image picker on the [`MessageInput`](/chat/docs/sdk/react-native/v4/ui-components/message-input/) component.

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


### hideDateSeparators

Hide inline date separators in [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/) component.

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


### hideStickyDateHeader

**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)

Hide sticky date header in [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/) component.

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


### initialScrollToFirstUnreadMessage

Load messages in a channel at the first unread message.

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


### `initialValue`

The initial value for the [`MessageInput`](/chat/docs/sdk/react-native/v4/ui-components/message-input/) component.

| Type   |
| ------ |
| string |


### isAttachmentEqual

Function which returns true if passing `nextAttachment` to render would return the same result as passing `prevAttachment` to render, otherwise return false.

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

| Parameter      | Description                                |
| -------------- | ------------------------------------------ |
| prevAttachment | previous message attachment to be compared |
| nextAttachment | next message attachment to be compared     |


### `keyboardBehavior`

Behavior for the keyboard passed to the underlying [KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview#behavior).

| Type                                |
| ----------------------------------- |
| 'height' \| 'position' \| 'padding' |

### legacyImageViewerSwipeBehaviour

**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)

Enables/disables the legacy image viewer behavior.

When true, within the image viewer you can keep swiping left to scroll through all the images that have been loaded within a channel so far.
Be aware that this creates quite a lot of extra work for the JS thread to keep track of image attachments loaded in a channel and pre-populating them in the viewer for smooth transitions.

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


### `loadingMore`

Override the `loadingMore` value supplied by the channel query logic.

| Type    |
| ------- |
| boolean |

### loadingMoreRecent

Override the `loadingMoreRecent` value supplied by the channel query logic.

| Type    |
| ------- |
| boolean |

### `markdownRules`

Object specifying rules defined within [simple-markdown](https://github.com/Khan/simple-markdown#adding-a-simple-extension).

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


### maxMessageLength

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

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


### maxNumberOfFiles

Maximum number of files (documents & images), that can be attached per message.

| Type   | Default |
| ------ | ------- |
| number | 10      |


### maxTimeBetweenGroupedMessages

Maximum time in milliseconds between consecutive messages from the same user to still consider them `grouped` together.

| Type   | Default  |
| ------ | -------- |
| number | infinite |


### 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](/chat/docs/javascript/update-users/) docs for
more details on filters/sort/options.

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

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


### `messageId`

Load the channel at a specified message instead of the most recent message.

| Type   |
| ------ |
| string |

### `messageActions`

An array of, or function that returns and array of, actions that can be performed on a message shown in the message overlay.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

| Type              | Default                                                                                                                                  |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| array \| function | [messageActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/utils/messageActions.ts) |

| Parameter  | Description                                                         |
| ---------- | ------------------------------------------------------------------- |
| actionInfo | an object containing the original actions and relevant message data |


### messageContentOrder

Order in which to render the content of a message.

| Type  | Default                                                     |
| ----- | ----------------------------------------------------------- |
| array | ['quoted_reply', 'gallery', 'files', 'text', 'attachments'] |


### myMessageTheme

[Theme](/chat/docs/sdk/react-native/v4/customization/theming/) applied to messages of the current user.

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


### newMessageStateUpdateThrottleInterval

**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)

Throttling interval (in milliseconds) for react state update for channel, when new messages arrive in chat. By default state updates are throttled at 500 ms, but for high concurrency
application this prop should be adjusted to 1000 ms to avoid excessive overload on JS thread.

| Type   | Default |
| ------ | ------- |
| number | 500     |


### numberOfLines

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

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


### onChangeText

Callback that is called when the text input's text changes.

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

| Parameter | Description  |
| --------- | ------------ |
| text      | changed text |


### onLongPressMessage

Function called when a user long presses a message.
The default opens the message actions overlay.

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

| Parameter | Description                   |
| --------- | ----------------------------- |
| payload   | `{ actionHandlers, message }` |


### onPressMessage

Function called when a user presses a message.

<admonition type="warning">

The default handler for message press interactions acts differently when pressing on reactions and attachments.
You will have to handle these cases when overriding this function.

</admonition>

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

| Parameter | Description                                   |
| --------- | --------------------------------------------- |
| payload   | `{ additionalInfo, actionHandlers, message }` |

The `additionalInfo` prop is handy for getting information from certain click events.
A good example of this is getting the user details when a `textMention` (for example @Enigma-I-am) is clicked.

For example:

```tsx
    <Channel
      onPressMessage={({ additionalInfo, defaultHandler, emitter }) => {

          if (emitter === 'textMention') {
            console.log(additionalInfo?.user);
            return;
          }

          if (emitter === 'card' || emitter === 'textLink') {
            console.log(additionalInfo?.url);
            return;
          }

          defaultHandler?.();
      }}
    >
```

:::info

The `additionalInfo` prop will change over time as we explore more use-cases for different `emitter's`.


### onPressInMessage

Function called immediately when a touch is engaged on a message, before [`onPressMessage`](#onpressmessage).

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

| Parameter | Description                   |
| --------- | ----------------------------- |
| payload   | `{ actionHandlers, message }` |


### overrideOwnCapabilities

Object to override the capabilities of current user, which are affected by number of factors such as user permissions, channel type configurations and channel settings.
These capabilities are used to enable or disable certain UI features within the SDK. To know more about capabilities, please take a look at following documentation:

/chat/docs/javascript/chat_permission_policies/

For example:

```tsx
<Channel
  overrideOwnCapabilities={{
    uploadFile: false,
    sendLinks: false
  }}
```

Available keys for the object:

- `banChannelMembers` When false, "Block User" message action won't be available within overlay.
- `deleteAnyMessage` When false, "Delete Message" action won't be available for received message within overlay.
- `deleteOwnMessage` When false, "Delete Message" action won't be available for own message within overlay.
- `flagMessage` When false, "Flag Message" message action won't be available within overlay.
- `pinMessage` When false, "Pin Message" action won't be available within overlay.
- `quoteMessage` When false, "Reply" message action won't be available within overlay.
- `readEvents` When false, read receipts for message won't be rendered.
- `sendLinks` When false, user will not be allowed to send URLs in message.
- `sendMessage` When false, message input component will render `SendMessageDisallowedIndicator` instead of input box.
- `sendReaction` When false, reaction selector (`OverlayReactionList`) component won't be available within overlay.
- `sendReply` When false, "Thread Reply" message action won't be available within overlay.
- `sendTypingEvents` When false, typing events won't be sent from current user.
- `updateAnyMessage` When false, "Edit Message" action won't be available for received messages within overlay.
- `updateOwnMessage` When false, "Edit Message" action won't be available for own messages within overlay.
- `uploadFile` When false, upload file button (`AttachButton`) won't be available within `MessageInput` component.

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


### selectReaction

Full override of the reaction function on a message.
This function must return a function that takes as a parameter the `reactionType` as a string.
Please refer to [the guide on customizing message actions](/chat/docs/sdk/react-native/v4/guides/customize-message-actions/) for details.

| Type             |
| ---------------- |
| function \| null |

| Parameter | Description                     |
| --------- | ------------------------------- |
| message   | message the action is called on |


### sendImageAsync

Sends a message with attachments in asynchronous way. By default, a message can't be sent until all the image/file attachments have been
uploaded. If this prop is set to true, every attachment will be sent as a separate message, as soon as the upload is complete.

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

### setInputRef

Callback function to set the [ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the underlying `TextInput` in [`MessageInput`](/chat/docs/sdk/react-native/v4/ui-components/message-input/).

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

| Parameter | Description          |
| --------- | -------------------- |
| ref       | ref of the TextInput |

### stateUpdateThrottleInterval

**Note:** This prop is available only in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/releases)

Throttling interval (in milliseconds) for react state update for channel, (except new messages). By default state updates are throttled at 500 ms, but for high concurrency
application this prop should be adjusted to 1000 ms to avoid excessive overload on JS thread.

| Type   | Default |
| ------ | ------- |
| number | 500     |


### supportedReactions

List of reactions which can be added on message.
Please refer to [the guide on customizing reactions](/chat/docs/sdk/react-native/v4/guides/message-customization#message-with-custom-reactions/) for details.

| Type  | Default                                                                                                                                                             |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| array | [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129) |


### thread

A message object that when set indicates a thread is open.
When used with the [`Thread`](/chat/docs/sdk/react-native/v4/ui-components/thread/) component this will display the thread.
When used with the standard [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/) component this will prevent any singleton components in the [`OverlayProvider`](/chat/docs/sdk/react-native/v4/core-components/overlay-provider/) form getting out of sync.

<admonition type="note">

`thread` should be set on all `Channel` components when a thread is open.

</admonition>

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


### `threadList`

Tells the Channel component if it is rendering a thread. We use this flag to avoid concurrency problems between a
regular channel and a channel containing a thread.

| Type    |
| ------- |
| boolean |


### AttachButton

Component to render the attach button next to input box.

| Type      | Default                                                                       |
| --------- | ----------------------------------------------------------------------------- |
| component | [`AttachButton`](/chat/docs/sdk/react-native/v4/ui-components/attach-button/) |


### Attachment

Component for rendering attachments in MessageList.

Available props:

- `attachment` `{object}`

| Type      | Default                                                                  |
| --------- | ------------------------------------------------------------------------ |
| component | [`Attachment`](/chat/docs/sdk/react-native/v4/ui-components/attachment/) |


### AttachmentActions

Component to render additional actions on attachment. for example send, shuffle, cancel in case of Giphy.

| Type      | Default                                                                                                                                      |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/AttachmentActions.tsx) |


### Card

Component to render any custom type of attachment. Please check the guides for [Custom Attachment](/chat/docs/sdk/react-native/v4/guides/custom-attachment/)

| Type      | Default                                                      |
| --------- | ------------------------------------------------------------ |
| component | [`Card`](/chat/docs/sdk/react-native/v4/ui-components/card/) |


### CardCover

Component to render main body for [`Card`](/chat/docs/sdk/react-native/v4/ui-components/card/) component which renders custom type of attachment.
Please check the guides for [Custom Attachment](/chat/docs/sdk/react-native/v4/guides/custom-attachment/).

| Type      |
| --------- |
| component |


### CardFooter

Component to render footer for [`Card`](/chat/docs/sdk/react-native/v4/ui-components/card/) component which renders custom type of attachment. Please check the guides for [Custom Attachment](/chat/docs/sdk/react-native/v4/guides/custom-attachment/).

| Type      |
| --------- |
| component |


### CardHeader

Component to render header for [`Card`](/chat/docs/sdk/react-native/v4/ui-components/card/) component which renders custom type of attachment. Please check the guides for [Custom Attachment](/chat/docs/sdk/react-native/v4/guides/custom-attachment/).

| Type      |
| --------- |
| component |


### CommandsButton

Component to render button next to input box, which when pressed opens commands list.

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`CommandsButton`](/chat/docs/sdk/react-native/v4/ui-components/commands-button/) |


### DateHeader

Component to render sticky date header within enclosed MessageList component.

| Type      | Default                                                                                                                         |
| --------- | ------------------------------------------------------------------------------------------------------------------------------- |
| component | [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx) |


### EmptyStateIndicator

Component to render, when channel has no messages.

| Type      | Default                                                                                                                                          |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| component | [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx) |


### FileAttachmentIcon

Component to render file icon for `file` type attachment.

| Type      | Default                                                               |
| --------- | --------------------------------------------------------------------- |
| component | [`FileIcon`](/chat/docs/sdk/react-native/v4/ui-components/file-icon/) |


### FileAttachment

Component to render 'file' type attachment in `MessageList`.

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`FileAttachment`](/chat/docs/sdk/react-native/v4/ui-components/file-attachment/) |


### FileAttachmentGroup

Component to render group of `file` type attachments, when there are multiple `file` type attachments in message.

| Type      | Default                                                                                      |
| --------- | -------------------------------------------------------------------------------------------- |
| component | [`FileAttachmentGroup`](/chat/docs/sdk/react-native/v4/ui-components/file-attachment-group/) |


### FileUploadPreview

Component to render preview of attached file, within enclosed `MessageInput` component.

| Type      | Default                                                                                  |
| --------- | ---------------------------------------------------------------------------------------- |
| component | [`FileUploadPreview`](/chat/docs/sdk/react-native/v4/ui-components/file-upload-preview/) |


### FlatList

`FlatList` component for underlying `MessageList` component.

| Type      | Default                                                                                                                            |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| component | [flat-list-mvcp](https://github.com/GetStream/flat-list-mvcp#maintainvisiblecontentposition-prop-support-for-android-react-native) |


### Gallery

Component to render 'image' type attachments in the `MessageList`.

| Type      | Default                                                            |
| --------- | ------------------------------------------------------------------ |
| component | [`Gallery`](/chat/docs/sdk/react-native/v4/ui-components/gallery/) |


### Giphy

Component to render Giphy type attachments in `MessageList`.

| Type      | Default                                                        |
| --------- | -------------------------------------------------------------- |
| component | [`Giphy`](/chat/docs/sdk/react-native/v4/ui-components/giphy/) |


### ImageLoadingFailedIndicator

Component to render when image fails to load in `Gallery`.

| Type      | Default                       |
| --------- | ----------------------------- |
| component | `ImageLoadingFailedIndicator` |


### ImageLoadingIndicator

Component to render when image is loading in `Gallery`.

| Type      | Default                 |
| --------- | ----------------------- |
| component | `ImageLoadingIndicator` |


### ImageUploadPreview

Component to render preview of attached images, within enclosed MessageInput component

| Type      | Default                                                                                    |
| --------- | ------------------------------------------------------------------------------------------ |
| component | [`ImageUploadPreview`](/chat/docs/sdk/react-native/v4/ui-components/image-upload-preview/) |


### InlineDateSeparator

Component to render inline date separators between messages which were created at a difference of more than a day.

| Type      | Default                                                                                                                                           |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [InlineDateSeparator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/InlineDateSeparator.tsx) |


### InlineUnreadIndicator

Component to render inline separator in MessageList, to indicate the position of last read message in list.

| Type      | Default                                                                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [InlineUnreadIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/InlineUnreadIndicator.tsx) |


### Input

Component to render UI part of enclosed MessageInput component.
Please read section in guides about [Customizing Message Input](/chat/docs/sdk/react-native/v4/guides/message-input-customization/).

| Type      |
| --------- |
| component |


### InputButtons

Component to render action buttons (CommandsButton and AttachButton) on left side of input box, within enclosed `MessageInput` component.

| Type      | Default                                                                       |
| --------- | ----------------------------------------------------------------------------- |
| component | [`InputButtons`](/chat/docs/sdk/react-native/v4/ui-components/input-buttons/) |


### InputEditingStateHeader

Component to render the header when a message is been edited on the message input.

| Type      | Default                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------- |
| component | [`InputEditingStateHeader`](/chat/docs/sdk/react-native/v4/ui-components/input-editing-state-header/) |


### InputGiphySearch

Component to render the message input when the Giphy command is triggered.

| Type      | Default                                                                                |
| --------- | -------------------------------------------------------------------------------------- |
| component | [`InputGiphySearch`](/chat/docs/sdk/react-native/v4/ui-components/input-giphy-search/) |


### InputReplyStateHeader

Component to render the header on the message input when a message is been replied to.

| Type      | Default                                                                                           |
| --------- | ------------------------------------------------------------------------------------------------- |
| component | [`InputReplyStateHeader`](/chat/docs/sdk/react-native/v4/ui-components/input-reply-state-header/) |


### KeyboardCompatibleView

Component to override underlying default `KeyboardCompatibleView`. Generally you won't need to use this prop at all,
you can simply use following props instead:

- [`keyboardVerticalOffset`](#required-keyboardverticaloffset)
- [`disableKeyboardCompatibleView`](#disablekeyboardcompatibleview)

| Type      | Default                                                                                                                                                            |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| component | [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx) |

### LoadingErrorIndicator

Component to render full screen error indicator, when channel fails to load.

| Type      | Default                                                                                                                                              |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/LoadingErrorIndicator.tsx) |

### LoadingIndicator

Component to render full screen error indicator, when channel fails to load.

| Type      | Default                                                                                                                                    |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| component | [LoadingIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/LoadingIndicator.tsx) |


### Message

### MessageAvatar

Component to render avatar of sender for message, within [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/). This component is only rendered for messages from other users.

| Type      | Default                                                                         |
| --------- | ------------------------------------------------------------------------------- |
| component | [`MessageAvatar`](/chat/docs/sdk/react-native/v4/ui-components/message-avatar/) |


### MessageContent

Component to render content of message including status, attachments, reactions etc., within [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/).

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`MessageContent`](/chat/docs/sdk/react-native/v4/ui-components/message-content/) |


### MessageDeleted

Component to render deleted message.

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`MessageDeleted`](/chat/docs/sdk/react-native/v4/ui-components/message-deleted/) |


### MessageFooter

Component to render footer for message, within [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/).

| Type      | Default                                                                         |
| --------- | ------------------------------------------------------------------------------- |
| component | [`MessageFooter`](/chat/docs/sdk/react-native/v4/ui-components/message-footer/) |


### MessageHeader

Component to render header for message, within [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/).

| Type      |
| --------- |
| component |


### MessagePinnedHeader

Component to render pinned message label for message, within [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/).

| Type      |
| --------- |
| component |


### MessageReplies

Component to show number of thread replies and avatars of members who replied on message

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`MessageReplies`](/chat/docs/sdk/react-native/v4/ui-components/message-replies/) |


### MessageRepliesAvatars

Component to show avatars of members who thread replied on message.

| Type      | Default                                                                                         |
| --------- | ----------------------------------------------------------------------------------------------- |
| component | [`MessageRepliesAvatars`](/chat/docs/sdk/react-native/v4/ui-components/message-replies-avatar/) |


### MessageSimple

Component to render a message within [`MessageList`](/chat/docs/sdk/react-native/v4/ui-components/message-list/).

Please check guides section for [Customizing Message UI](/chat/docs/sdk/react-native/v4/guides/message-customization/) for details.

| Type      | Default                                                                         |
| --------- | ------------------------------------------------------------------------------- |
| component | [`MessageSimple`](/chat/docs/sdk/react-native/v4/ui-components/message-simple/) |


### MessageStatus

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/message_status"></partial>

### MessageSystem

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/message_system"></partial>

### MessageText

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/message_text"></partial>

### MoreOptionsButton

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/more_options_button"></partial>

### NetworkDownIndicator

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/network_down_indicator"></partial>

### OverlayReactionList

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/overlay-provider/props/overlay_reaction_list"></partial>

### ReactionList

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/reaction_list"></partial>

### Reply

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/reply"></partial>

### ScrollToBottomButton

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/scroll_to_bottom_button"></partial>

### SendButton

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/send_button"></partial>

### SendMessageDisallowedIndicator

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/send_message_disallowed_indicator"></partial>

### ShowThreadMessageInChannelButton

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/show_thread_message_in_channel_button"></partial>

### TypingIndicator

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/typing_indicator"></partial>

### TypingIndicatorContainer

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/typing_indicator_container"></partial>

### UploadProgressIndicator

Component to render upload progress indicator as an overlay above [ImageUploadPreview](#imageuploadpreview) and [FileUploadPreview](#fileuploadpreview).

| Type      | Default                                                                                                                                                    |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [UploadProgressIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/UploadProgressIndicator.tsx) |

### UrlPreview

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/url_preview"></partial>


---

This page was last updated at 2026-07-16T15:13:11.650Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel/](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel/).