# 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/v6/ui-components/message-list/), [MessageInput](/chat/docs/sdk/react-native/v6/ui-components/message-input/), and [Thread](/chat/docs/sdk/react-native/v6/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/v6/core-components/channel-list/), access the selected channel via the parameter passed to the [`onSelect`](/chat/docs/sdk/react-native/v6/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/v6/_assets/ui-components/channel/visual_guide_1.png)

</tabs-item>

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

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

</tabs-item>

<tabs-item value='indicators'>

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

</tabs-item>

<tabs-item value='input'>

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

</tabs-item>

</tabs>

## Props

### channel

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/channel"></partial>

### keyboardVerticalOffset

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

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

### additionalKeyboardAvoidingViewProps

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/additional_keyboard_avoiding_view_props"></partial>

### additionalTextInputProps

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/additional_text_input_props"></partial>

### additionalPressableProps

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/additional_pressable_props"></partial>

### allowThreadMessagesInChannel

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/allow_thread_messages_in_channel"></partial>

### ayncMessagesLockDistance

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/async_messages_lock_distance"></partial>

### ayncMessagesMinimumPressDuration

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/async_messages_minimum_press_duration"></partial>

### ayncMessagesMultiSendEnabled

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/async_messages_multi_send_enabled"></partial>

### ayncMessagesSlideToCancelDistance

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/async_messages_slide_to_cancel_distance"></partial>

### audioRecordingEnabled

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_recording_enabled"></partial>

### autoCompleteSuggestionsLimit

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/auto_complete_suggestions_limit"></partial>

### autoCompleteTriggerSettings

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/auto_complete_trigger_settings"></partial>

### compressImageQuality

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/compress_image_quality"></partial>

### deletedMessagesVisibilityType

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/deleted_messages_visibility_type"></partial>

### disableKeyboardCompatibleView

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

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

### disableTypingIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/disable_typing_indicator"></partial>

### dismissKeyboardOnMessageTouch

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/dismiss_keyboard_on_message_touch"></partial>

### doDocUploadRequest

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/do_doc_upload_request"></partial>

### doImageUploadRequest

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/do_image_upload_request"></partial>

### 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 |
| `setChannelUnreadUiState` \| `undefined` | `(state) =>void` |

### 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      |

### emojiSearchIndex

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/emoji_search_index"></partial>

### enableMessageGroupingByUser

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/enable_message_grouping_by_user"></partial>

### enableSwipeToReply

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/enable_swipe_to_reply"></partial>

### enforceUniqueReaction

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/enforce_unique_reaction"></partial>

### forceAlignMessages

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/force_align_messages"></partial>

### `formatDate`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/format_date"></partial>

### getMessagesGroupStyles

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/get_messages_group_styles"></partial>

### giphyEnabled

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/giphy_enabled"></partial>

### 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

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/giphy_version"></partial>

### `handleAttachButtonPress`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_attach_button_press"></partial>

### `handleBan`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_ban"></partial>

### `handleCopy`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_copy"></partial>

### `handleDelete`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_delete"></partial>

### `handleEdit`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_edit"></partial>

### `handleFlag`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_flag"></partial>

### `handleMarkUnread`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_mark_unread"></partial>

### `handleMute`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_mute"></partial>

### handlePinMessage

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_pin_message"></partial>

### handleReaction

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_reaction"></partial>

### handleQuotedReply

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_quoted_reply"></partial>

### `handleRetry`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_retry"></partial>

### handleThreadReply

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/handle_thread_reply"></partial>

### `hasCameraPicker`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/has_camera_picker"></partial>

### `hasCommands`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/has_commands"></partial>

### hasFilePicker

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/has_file_picker"></partial>

### hasImagePicker

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/has_image_picker"></partial>

### hideDateSeparators

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/hide_date_separators"></partial>

### hideStickyDateHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/hide_sticky_date_header"></partial>

### initialScrollToFirstUnreadMessage

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/initial_scroll_to_first_unread_message"></partial>

### `initialValue`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/initial_value"></partial>

### isAttachmentEqual

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/is_attachment_equal"></partial>

### `keyboardBehavior`

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

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

### legacyImageViewerSwipeBehaviour

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/legacy_image_viewer_swipe_behaviour"></partial>

### `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

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/markdown_rules"></partial>

### `markReadOnMount`

Boolean to enable/disable the marking of channel as read when the Channel component is mounted.

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

### maxMessageLength

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/max_message_length"></partial>

### maxNumberOfFiles

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/max_number_of_files"></partial>

### maxTimeBetweenGroupedMessages

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/max_time_between_grouped_messages"></partial>

### mentionAllAppUsersEnabled

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/mention_all_app_users_enabled"></partial>

### mentionAllAppUsersQuery

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/mention_all_app_users_query"></partial>

### `messageId`

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

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

### `messageActions`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message_actions"></partial>

### messageContentOrder

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message_content_order"></partial>

### messageSwipeToReplyHitSlop

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message_swipe_to_reply_hit_slop"></partial>

### `messageTextNumberOfLines`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-text-number-of-lines"></partial>

### myMessageTheme

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/my_message_theme"></partial>

### newMessageStateUpdateThrottleInterval

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/new_message_state_update_throttle_interval"></partial>

### numberOfLines

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/number_of_lines"></partial>

### onChangeText

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/on_change_text"></partial>

### onLongPressMessage

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/on_long_press_message"></partial>

### onPressMessage

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/on_press_message"></partial>

### onPressInMessage

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/on_press_in_message"></partial>

### overrideOwnCapabilities

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/override_own_capabilities"></partial>

### reactionListPosition

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/reaction-list-position"></partial>

### selectReaction

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/select_reaction"></partial>

### 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/v6/ui-components/message-input/).

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

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

### `shouldShowUnreadUnderlay`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/should_show_unread_underlay"></partial>

### stateUpdateThrottleInterval

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/state_update_throttle_interval"></partial>

### supportedReactions

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/supported_reactions"></partial>

### thread

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/thread"></partial>

### `threadList`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/thread_list"></partial>

### `openPollCreationDialog`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/open-poll-creation-dialog"></partial>

### `hasCreatePoll`

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/has-create-poll"></partial>

## UI Components Props

### AttachButton

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/attach_button"></partial>

### Attachment

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/attachment"></partial>

### AttachmentActions

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/attachment_actions"></partial>

### AudioAttachment

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_attachment"></partial>

### AudioAttachmentUploadPreview

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_attachment_upload_preview"></partial>

### AudioRecorder

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_recorder"></partial>

### AudioRecordingInProgress

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_recording_in_progress"></partial>

### AudioRecordingLockIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_recording_lock_indicator"></partial>

### AudioRecordingPreview

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_recording_preview"></partial>

### AudioRecordingWaveform

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/audio_recording_waveform"></partial>

### AutoCompleteSuggestionHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/autocomplete_suggestion_header"></partial>

### AutoCompleteSuggestionItem

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/autocomplete_suggestion_item"></partial>

### AutoCompleteSuggestionList

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/autocomplete_suggestion_list"></partial>

### Card

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/card"></partial>

### CardCover

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/card_cover"></partial>

### CardFooter

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/card_footer"></partial>

### CardHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/card_header"></partial>

### CommandsButton

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/commands_button"></partial>

### DateHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/date_header"></partial>

### EmptyStateIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/empty_state_indicator"></partial>

### FileAttachmentIcon

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/file_attachment_icon"></partial>

### FileAttachment

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/file_attachment"></partial>

### FileAttachmentGroup

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/file_attachment_group"></partial>

### FileUploadPreview

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/file_upload_preview"></partial>

### FlatList

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/flat_list"></partial>

### Gallery

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/gallery"></partial>

### Giphy

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/giphy"></partial>

### ImageLoadingFailedIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/image_loading_failed_indicator"></partial>

### ImageLoadingIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/image_loading_indicator"></partial>

### ImageUploadPreview

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/image_upload_preview"></partial>

### InlineDateSeparator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/inline_date_separator"></partial>

### InlineUnreadIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/inline_unread_indicator"></partial>

### Input

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/input"></partial>

### InputButtons

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/input_buttons"></partial>

### InputEditingStateHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/input_editing_state_header"></partial>

### InputGiphySearch

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/input_giphy_search"></partial>

### InputReplyStateHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/input_reply_state_header"></partial>

### 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                                                                                                                                                            |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [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                                                                                                                                              |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/LoadingErrorIndicator.tsx) |

### LoadingIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/loading_indicator"></partial>

### MessageActionList

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-action-list"></partial>

### MessageActionListItem

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-action-list-item"></partial>

### MessageAvatar

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-avatar"></partial>

### MessageBounce

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-bounce"></partial>

### MessageContent

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-content"></partial>

### MessageDeleted

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-deleted"></partial>

### MessageEditedTimestamp

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-edited-timestamp"></partial>

### MessageError

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-error"></partial>

### MessageFooter

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-footer"></partial>

### MessageHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-header"></partial>

### MessageMenu

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-menu"></partial>

### MessagePinnedHeader

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-pinned-header"></partial>

### MessageReplies

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-replies"></partial>

### MessageRepliesAvatars

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-replies-avatars"></partial>

### MessageSimple

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-simple"></partial>

### MessageStatus

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-status"></partial>

### MessageSwipeContent

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message_swipe_content"></partial>

### MessageSystem

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-system"></partial>

### MessageText

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-text"></partial>

### MessageReactionPicker

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-reaction-picker"></partial>

### MessageUserReactionsAvatar

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-user-reactions-avatar"></partial>

### MessageUserReactionsItem

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-user-reactions-item"></partial>

### MessageUserReactions

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/message-user-reactions"></partial>

### MoreOptionsButton

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/more-options-button"></partial>

### NetworkDownIndicator

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/network-down-indicator"></partial>

### ReactionListBottom

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/reaction-list-bottom"></partial>

### ReactionListTop

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/reaction-list-top"></partial>

### Reply

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

### ScrollToBottomButton

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/scroll-to-bottom-button"></partial>

### SendButton

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

### SendMessageDisallowedIndicator

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

### ShowThreadMessageInChannelButton

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

### StartAudioRecordingButton

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/start_audio_recording_button"></partial>

### TypingIndicator

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

### TypingIndicatorContainer

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

### UnreadMessagesNotification

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/channel/props/unread_messages_notification"></partial>

### UploadProgressIndicator

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

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

### UrlPreview

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

### CreatePollContent

<partial id="chat-sdk/react-native/v6/_partials/common-content/contexts/create-poll-context/create-poll-content"></partial>

### PollContent

<partial id="chat-sdk/react-native/v6/_partials/common-content/ui-components/poll/poll-content"></partial>

### StreamingMessageView

Custom UI component to display an AI generated message.

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

### StopMessageStreamingButton

Custom UI component to display the button to stop AI generation instead of the `SendButton` one in `MessageInput`.

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

---

This page was last updated at 2025-08-19T14:51:56.193Z.

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