# Theme object > **Info:** This is release candidate documentation for **Stream Chat React Native SDK v10**. For the latest stable version, see the [latest version (v9)](https://getstream.io/chat/docs/sdk/react-native/). The theme is one JavaScript object of the `Theme` type. Its `semantics` key holds the color tokens, and each of its other keys holds the styles of one component or one group of components. For example, `theme.channelPreview.title` is the style of a channel's name in the channel list, and `theme.semantics.accentPrimary` is the accent color. You pass a partial theme, and the SDK merges it over its default. This page lists every key of `Theme` and explains how the merge works, and so what an override can and can't change. [Theming](https://getstream.io/chat/docs/sdk/react-native/v10/ui/customizing/theming/) shows how to set a theme, and [Design tokens](https://getstream.io/chat/docs/sdk/react-native/v10/reference/theme/design-tokens/) lists the tokens. ## How the theme is built `OverlayProvider` takes a partial theme as `value.style`, and `Chat` takes one as `style`. Each wraps its children in a `ThemeProvider`, which builds the full theme with `mergeThemes()`: 1. It starts from a deep copy of `defaultTheme`. 2. It takes the light or the dark semantic tokens, by the color scheme `useColorScheme()` returns, and resolves every `$` reference in them, so `accentPrimary: "$brand500"` becomes `accentPrimary: "#005fff"`. 3. It deep-merges your partial theme over the result, with `lodash/merge`. The result is built again when the partial theme object, or the color scheme, changes. Every component reads it with `useTheme()`. These props take a theme: | Where | What it merges | | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value.style` on `OverlayProvider` | Your theme over the default, for everything below it, the image gallery and the backdrop of the message menu included | | `style` on `Chat` | Your theme over the default, not over `OverlayProvider`'s. Without `style`, `Chat` passes `OverlayProvider`'s theme on unchanged | | `myMessageTheme` on `Channel` and `Thread` | A partial theme over the current theme, for the current user's own messages and the date separators above them. See [The user's own messages](https://getstream.io/chat/docs/sdk/react-native/v10/ui/customizing/theming/#the-users-own-messages) | `ThemeProvider` is exported too, for a part of your own UI. It takes three props: - `style`, a partial theme to merge. - `theme`, a full theme to merge `style` over instead of the default. Its `semantics` are spread over the color scheme's tokens before the references are resolved. - `mergedStyle`, a full theme to provide as it is. `style` and `theme` are then ignored. To change a few styles for one part of your UI, pass the current theme as `theme`: ```tsx import type { PropsWithChildren } from "react"; import { ThemeProvider, useTheme } from "stream-chat-react-native"; import type { DeepPartial, Theme } from "stream-chat-react-native"; const compactTheme: DeepPartial = { channelPreview: { title: { fontSize: 14 }, }, }; export const CompactSection = ({ children }: PropsWithChildren) => { const { theme } = useTheme(); return ( {children} ); }; ``` Without `theme`, `ThemeProvider` merges `style` over the default, and the part below it loses the app's theme. ## What you can override ### Component styles Every key below except `semantics` belongs to a component, and your theme is merged into the default key by key. A component spreads a style key over its own style, so a property you set wins over the component's own value, and the properties you leave out keep it. Most defaults are empty objects, which leave the component's own style unchanged. A key that holds a number or a color, such as `screenPadding`, replaces the default value. ### Semantic tokens You can set any token under `semantics` to any color. The SDK resolves the default tokens before it merges your theme, so a token you set changes only the components that read that token. The tokens built from it keep their default values. For example, `buttonPrimaryBg` and `badgeBgPrimary` point at `accentPrimary`, but they were resolved from the default accent before your `accentPrimary` was merged, so setting `accentPrimary` doesn't recolor the primary buttons or the badges. Set each token you want to change. [Tokens that point at another token](https://getstream.io/chat/docs/sdk/react-native/v10/reference/theme/design-tokens/#tokens-that-point-at-another-token) lists them. ### What a theme can't change - `mergeThemes()` doesn't resolve `$` references in your theme. A value such as `"$brand500"` stays that string, and renders as an invalid color. Write the color itself. - Some tokens and keys exist, but no component reads them. Setting one changes nothing. [Design tokens](https://getstream.io/chat/docs/sdk/react-native/v10/reference/theme/design-tokens/#semantic-tokens) marks the tokens, and [Keys no component reads](#keys-no-component-reads) lists the keys. - The foundations, the primitives and the component tokens, such as `spacingMd` and `radiusLg`, aren't part of `Theme`. The components import them as constants, so a theme can't change them. Change the spacing, radius or size of one part through its component style instead. - `lodash/merge` skips a value that is `undefined`, so setting a key to `undefined` keeps the default. ## Reading the theme `useTheme()` returns `{ theme }`, the full theme of the nearest provider, with every token resolved. It throws outside `OverlayProvider` and `Chat`. `defaultTheme` is exported as well. Its component styles are the defaults below. Its `semantics` are the raw tokens of the color scheme the device had when the SDK loaded, with the `$` references unresolved, and `mergeThemes()` replaces them. Read the tokens a component sees from `useTheme()`, not from `defaultTheme`. ## Reading the tables - **Key** is the path below the top-level key, so `content.markdown` under `messageItemView` is `theme.messageItemView.content.markdown`. - **Type** is a React Native style type, `ViewStyle`, `TextStyle` or `ImageStyle`, for most keys. `IconProps` is the props of the SDK's SVG icons, such as `width`, `height`, `size`, `fill` and `stroke`, spread over the icon's own. `MarkdownStyle` holds one `TextStyle` or `ViewStyle` for each Markdown element. Numbers are in points, and `animationTime` in milliseconds. A key listed both alone and with keys below it, such as `actions.button` under `messageItemView`, takes a style with those extra keys in the same object. - **Default** is the value in `defaultTheme`. `{}` leaves the component's own style unchanged. "not set" means the key is optional and the default theme leaves it out, so the component uses its own value. ## Top-level keys `Theme` has these keys, with 754 keys below them: | Key | Styles | | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [`aiTypingIndicatorView`](#aitypingindicatorview) | `AITypingIndicatorView`, the AI state indicator of a channel. | | [`attachmentPicker`](#attachmentpicker) | The attachment picker, with its bottom sheet, the media grid and the content shown for the other attachment types. | | [`attachmentSelectionBar`](#attachmentselectionbar) | `AttachmentPickerSelectionBar`, the row of attachment type buttons in the attachment picker. | | [`audioAttachment`](#audioattachment) | `AudioAttachment`, which plays audio files and voice recordings. | | [`avatar`](#avatar) | `Avatar`, the base of the user and channel avatars. | | [`avatarStack`](#avatarstack) | `AvatarStack`, a row of overlapping avatars. | | [`bottomSheetModal`](#bottomsheetmodal) | `BottomSheetModal`, the SDK's bottom sheet. | | [`channel`](#channel) | The text `Channel` renders when it has no channel to show. | | [`channelDetails`](#channeldetails) | `ChannelDetails` and its screens, such as the profile, the actions, the members, media, files and pinned messages, and editing the channel. | | [`channelDetailsMenu`](#channeldetailsmenu) | `ChannelDetailsBottomSheet`, the sheet of channel actions opened from the channel list. | | [`channelListFooterLoadingIndicator`](#channellistfooterloadingindicator) | `ChannelListFooterLoadingIndicator`, shown while the channel list loads more channels. | | [`channelListHeaderErrorIndicator`](#channellistheadererrorindicator) | `ChannelListHeaderErrorIndicator` and `ChannelListHeaderNetworkDownIndicator`. | | [`channelListLoadingIndicator`](#channellistloadingindicator) | `ChannelListLoadingIndicator`. | | [`channelListSkeleton`](#channellistskeleton) | `Skeleton`, the placeholder rows of the channel list while it loads. | | [`channelListView`](#channellistview) | The `FlatList` of `ChannelListView`. | | [`channelPreview`](#channelpreview) | The rows of the channel list, `ChannelPreviewView` and its parts. | | [`dateHeader`](#dateheader) | `DateHeader`, the date that stays at the top of the message list while it scrolls. | | [`emptyList`](#emptylist) | `EmptyList`, the empty state of the media, files and pinned messages lists of `ChannelDetails`. | | [`emptySearchResult`](#emptysearchresult) | `EmptySearchResult`, shown when the member list, the member search or the pinned messages list of `ChannelDetails` is empty. | | [`emptyStateIndicator`](#emptystateindicator) | `EmptyStateIndicator`, the empty channel list, message list and thread list. | | [`fileAttachmentListSkeleton`](#fileattachmentlistskeleton) | The placeholder rows of the files list of `ChannelDetails`. | | [`groupAvatar`](#groupavatar) | No component reads it. | | [`iconBadge`](#iconbadge) | No component reads it. | | [`iconSquare`](#iconsquare) | No component reads it. | | [`imageGallery`](#imagegallery) | `ImageGallery`, the full-screen media viewer, with its header, footer, video controls and grid. | | [`inlineDateSeparator`](#inlinedateseparator) | `InlineDateSeparator`, the date between messages. | | [`loadingDots`](#loadingdots) | `LoadingDots`, the animated dots of the typing indicator. | | [`loadingErrorIndicator`](#loadingerrorindicator) | `LoadingErrorIndicator`. | | [`loadingIndicator`](#loadingindicator) | `LoadingIndicator`. | | [`memberListSkeleton`](#memberlistskeleton) | The placeholder rows of the member list of `ChannelDetails`. | | [`messageComposer`](#messagecomposer) | `MessageComposer` and its parts, such as the input, the buttons, the attachment previews, the audio recorder and the suggestions. | | [`messageItemView`](#messageitemview) | Each message, with the bubble and its content, attachments, reactions, status and timestamps. | | [`messageList`](#messagelist) | `MessageList` and `MessageFlashList`, with the list, the scroll-to-bottom button, the unread notification and system messages. | | [`messageMenu`](#messagemenu) | The message menu that a long press opens, with the actions, the reaction picker and the list of reactions. | | [`messagePreview`](#messagepreview) | No component reads it. The message previews of the channel list, the thread list and quoted messages read `channelPreview.messagePreview`, `threadListItem.messagePreview` and `reply.messagePreview`. | | [`notification`](#notification) | `Notification`, one in-app notification. | | [`notificationList`](#notificationlist) | `NotificationList`. | | [`pinnedMessageListSkeleton`](#pinnedmessagelistskeleton) | The placeholder rows of the pinned messages list of `ChannelDetails`. | | [`poll`](#poll) | Polls in messages, the poll creation screen and the poll modals. | | [`progressControl`](#progresscontrol) | `ProgressControl`, the progress bar of audio playback. | | [`reply`](#reply) | `Reply`, the quoted message in the composer and in messages. | | [`screenPadding`](#screenpadding) | The horizontal padding of every message row, in points. | | [`selectionCircle`](#selectioncircle) | `SelectionCircle`, the selection mark in the add-members list. | | `semantics` | The semantic color tokens. See [Design tokens](https://getstream.io/chat/docs/sdk/react-native/v10/reference/theme/design-tokens/#semantic-tokens). | | [`spinner`](#spinner) | `Spinner`, the loading spinner. | | [`thread`](#thread) | `ThreadFooterComponent`, the reply count under the parent message of a thread. | | [`threadListItem`](#threadlistitem) | The rows of `ThreadList`. | | [`threadListSkeleton`](#threadlistskeleton) | The placeholder rows of `ThreadList` while it loads. | | [`threadListUnreadBanner`](#threadlistunreadbanner) | `ThreadListUnreadBanner`, the banner at the top of `ThreadList` that appears when threads have new activity. | | [`typingIndicator`](#typingindicator) | `TypingIndicator`. | | [`userListSkeleton`](#userlistskeleton) | The placeholder rows of the add-members search of `ChannelDetails`. | | [`waveProgressBar`](#waveprogressbar) | `WaveProgressBar`, the waveform of voice recordings. | The AI components of the `ai-components` entry point have a theme of their own, provided by `StreamTheme` from that entry point. This page doesn't cover it. See [SDK integration](https://getstream.io/chat/docs/sdk/react-native/v10/features/ai/sdk-integration/). ## Keys ### `aiTypingIndicatorView` `AITypingIndicatorView`, the AI state indicator of a channel. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `text` | `TextStyle` | `{}` | ### `attachmentPicker` The attachment picker, with its bottom sheet, the media grid and the content shown for the other attachment types. | Key | Type | Default | | ------------------------------------- | ----------- | ------- | | `bottomSheetContentContainer` | `ViewStyle` | `{}` | | `durationText` | `TextStyle` | `{}` | | `content.actionContainer` | `ViewStyle` | `{}` | | `content.container` | `ViewStyle` | `{}` | | `content.infoContainer` | `ViewStyle` | `{}` | | `content.text` | `TextStyle` | `{}` | | `image` | `ViewStyle` | `{}` | | `imageOverlay` | `ViewStyle` | `{}` | | `imageOverlaySelectedComponent.check` | `ViewStyle` | `{}` | | `handle.container` | `ViewStyle` | `{}` | | `handle.indicator` | `ViewStyle` | `{}` | ### `attachmentSelectionBar` `AttachmentPickerSelectionBar`, the row of attachment type buttons in the attachment picker. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `icon` | `ViewStyle` | `{}` | ### `audioAttachment` `AudioAttachment`, which plays audio files and voice recordings. | Key | Type | Default | | -------------------------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `centerContainer` | `ViewStyle` | `{}` | | `audioInfo` | `ViewStyle` | `{}` | | `leftContainer` | `ViewStyle` | `{}` | | `playPauseButton` | `ViewStyle` | `{}` | | `progressControlContainer` | `ViewStyle` | `{}` | | `progressDurationText` | `TextStyle` | `{}` | | `rightContainer` | `ViewStyle` | `{}` | | `speedChangeButton` | `ViewStyle` | `{}` | | `speedChangeButtonText` | `TextStyle` | `{}` | ### `avatar` `Avatar`, the base of the user and channel avatars. | Key | Type | Default | | ----------- | ------------ | ------- | | `border` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `image` | `ImageStyle` | `{}` | ### `avatarStack` `AvatarStack`, a row of overlapping avatars. | Key | Type | Default | | ------------------- | ----------- | ------- | | `userAvatarWrapper` | `ViewStyle` | `{}` | ### `bottomSheetModal` `BottomSheetModal`, the SDK's bottom sheet. | Key | Type | Default | | ------------------ | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `contentContainer` | `ViewStyle` | `{}` | | `handle` | `ViewStyle` | `{}` | | `overlay` | `ViewStyle` | `{}` | | `wrapper` | `ViewStyle` | `{}` | ### `channel` The text `Channel` renders when it has no channel to show. | Key | Type | Default | | --------------- | ----------- | ------- | | `selectChannel` | `TextStyle` | `{}` | ### `channelDetails` `ChannelDetails` and its screens, such as the profile, the actions, the members, media, files and pinned messages, and editing the channel. | Key | Type | Default | | ----------------------------------------------- | ------------ | ------- | | `container` | `ViewStyle` | `{}` | | `scrollContent` | `ViewStyle` | `{}` | | `header.container` | `ViewStyle` | `{}` | | `header.title` | `TextStyle` | `{}` | | `profile.container` | `ViewStyle` | `{}` | | `profile.heading` | `ViewStyle` | `{}` | | `profile.subtitle` | `TextStyle` | `{}` | | `profile.title` | `TextStyle` | `{}` | | `sectionCard` | `ViewStyle` | `{}` | | `actionItem.container` | `ViewStyle` | `{}` | | `actionItem.destructiveLabel` | `TextStyle` | `{}` | | `actionItem.iconWrapper` | `ViewStyle` | `{}` | | `actionItem.label` | `TextStyle` | `{}` | | `actionItem.trailingValue` | `TextStyle` | `{}` | | `memberSection.addButtonWrapper` | `ViewStyle` | `{}` | | `memberSection.confirmButton` | `ViewStyle` | `{}` | | `memberSection.footer` | `ViewStyle` | `{}` | | `memberSection.header` | `ViewStyle` | `{}` | | `memberSection.headerTitle` | `TextStyle` | `{}` | | `memberSection.viewAllLabel` | `TextStyle` | `{}` | | `memberItem.container` | `ViewStyle` | `{}` | | `memberItem.name` | `TextStyle` | `{}` | | `memberItem.status` | `TextStyle` | `{}` | | `roleList.container` | `ViewStyle` | `{}` | | `roleItem.container` | `ViewStyle` | `{}` | | `roleItem.ownerBackgroundColor` | `string` | `''` | | `roleItem.ownerColor` | `string` | `''` | | `roleItem.roleBackgroundColor` | `string` | `''` | | `roleItem.roleColor` | `string` | `''` | | `roleItem.text` | `TextStyle` | `{}` | | `memberList.container` | `ViewStyle` | `{}` | | `memberList.list` | `ViewStyle` | `{}` | | `memberList.listContent` | `ViewStyle` | `{}` | | `memberActionsSheet.actionsList` | `ViewStyle` | `{}` | | `memberActionsSheet.container` | `ViewStyle` | `{}` | | `memberActionsSheet.header` | `ViewStyle` | `{}` | | `editImageSheet.actionsList` | `ViewStyle` | `{}` | | `editImageSheet.container` | `ViewStyle` | `{}` | | `editImageSheet.header` | `ViewStyle` | `{}` | | `editImageSheet.headerTitle` | `TextStyle` | `{}` | | `modal.body` | `ViewStyle` | `{}` | | `modal.header` | `ViewStyle` | `{}` | | `modal.headerTitle` | `TextStyle` | `{}` | | `addMembers.container` | `ViewStyle` | `{}` | | `addMembers.list` | `ViewStyle` | `{}` | | `addMembers.listContent` | `ViewStyle` | `{}` | | `addMembers.searchResultItem.alreadyMemberInfo` | `ViewStyle` | `{}` | | `addMembers.searchResultItem.memberLabel` | `TextStyle` | `{}` | | `addMembers.searchResultItem.userName` | `TextStyle` | `{}` | | `addMembers.searchResultItem.userRow` | `ViewStyle` | `{}` | | `editChannel.avatarSection` | `ViewStyle` | `{}` | | `editChannel.container` | `ViewStyle` | `{}` | | `editChannel.nameInput` | `ViewStyle` | `{}` | | `editChannel.uploadButton` | `ViewStyle` | `{}` | | `pinnedMessageList.container` | `ViewStyle` | `{}` | | `pinnedMessageList.list` | `ViewStyle` | `{}` | | `pinnedMessageList.listContent` | `ViewStyle` | `{}` | | `pinnedMessageItem.container` | `ViewStyle` | `{}` | | `pinnedMessageItem.content` | `ViewStyle` | `{}` | | `pinnedMessageItem.name` | `TextStyle` | `{}` | | `pinnedMessageItem.title` | `ViewStyle` | `{}` | | `fileAttachmentList.container` | `ViewStyle` | `{}` | | `fileAttachmentList.list` | `ViewStyle` | `{}` | | `fileAttachmentList.listContent` | `ViewStyle` | `{}` | | `fileAttachmentList.sectionHeader` | `ViewStyle` | `{}` | | `fileAttachmentList.sectionHeaderText` | `TextStyle` | `{}` | | `fileAttachmentItem.container` | `ViewStyle` | `{}` | | `mediaList.container` | `ViewStyle` | `{}` | | `mediaList.list` | `ViewStyle` | `{}` | | `mediaList.listContent` | `ViewStyle` | `{}` | | `mediaItem.avatar` | `ViewStyle` | `{}` | | `mediaItem.container` | `ViewStyle` | `{}` | | `mediaItem.thumbnail` | `ImageStyle` | `{}` | | `mediaItem.videoBadge` | `ViewStyle` | `{}` | | `mediaItem.videoBadgeText` | `TextStyle` | `{}` | ### `channelDetailsMenu` `ChannelDetailsBottomSheet`, the sheet of channel actions opened from the channel list. | Key | Type | Default | | ---------------------- | ----------- | ------- | | `contentContainer` | `ViewStyle` | `{}` | | `header.container` | `ViewStyle` | `{}` | | `header.metaContainer` | `ViewStyle` | `{}` | | `header.metaText` | `TextStyle` | `{}` | | `item.container` | `ViewStyle` | `{}` | | `item.destructiveText` | `TextStyle` | `{}` | | `item.standardText` | `TextStyle` | `{}` | ### `channelListFooterLoadingIndicator` `ChannelListFooterLoadingIndicator`, shown while the channel list loads more channels. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | ### `channelListHeaderErrorIndicator` `ChannelListHeaderErrorIndicator` and `ChannelListHeaderNetworkDownIndicator`. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `errorText` | `TextStyle` | `{}` | ### `channelListLoadingIndicator` `ChannelListLoadingIndicator`. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | ### `channelListSkeleton` `Skeleton`, the placeholder rows of the channel list while it loads. | Key | Type | Default | | --------------- | ----------- | ------- | | `animationTime` | `number` | `1000` | | `avatar` | `ViewStyle` | `{}` | | `badge` | `ViewStyle` | `{}` | | `content` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `headerRow` | `ViewStyle` | `{}` | | `subtitle` | `ViewStyle` | `{}` | | `textContainer` | `ViewStyle` | `{}` | | `title` | `ViewStyle` | `{}` | ### `channelListView` The `FlatList` of `ChannelListView`. | Key | Type | Default | | ----------------- | ----------- | ------- | | `flatList` | `ViewStyle` | `{}` | | `flatListContent` | `ViewStyle` | `{}` | ### `channelPreview` The rows of the channel list, `ChannelPreviewView` and its parts. | Key | Type | Default | | ------------------------------------ | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `contentContainer` | `ViewStyle` | `{}` | | `date` | `TextStyle` | `{}` | | `mutedStatus` | `IconProps` | `{}` | | `pinnedStatus` | `IconProps` | `{}` | | `messageDeliveryStatus.container` | `ViewStyle` | `{}` | | `messageDeliveryStatus.text` | `TextStyle` | `{}` | | `messageDeliveryStatus.checkAllIcon` | `IconProps` | `{}` | | `messageDeliveryStatus.checkIcon` | `IconProps` | `{}` | | `messageDeliveryStatus.timeIcon` | `IconProps` | `{}` | | `messageDeliveryStatus.username` | `TextStyle` | `{}` | | `lowerRow` | `ViewStyle` | `{}` | | `title` | `TextStyle` | `{}` | | `unreadContainer` | `ViewStyle` | `{}` | | `unreadText` | `TextStyle` | `{}` | | `typingIndicatorPreview.container` | `ViewStyle` | `{}` | | `typingIndicatorPreview.text` | `TextStyle` | `{}` | | `upperRow` | `ViewStyle` | `{}` | | `statusContainer` | `ViewStyle` | `{}` | | `titleContainer` | `ViewStyle` | `{}` | | `wrapper` | `ViewStyle` | `{}` | | `message.container` | `ViewStyle` | `{}` | | `message.subtitle` | `TextStyle` | `{}` | | `message.errorText` | `TextStyle` | `{}` | | `message.draftText` | `TextStyle` | `{}` | | `messagePreview.container` | `ViewStyle` | `{}` | | `messagePreview.draftText` | `TextStyle` | `{}` | | `messagePreview.subtitle` | `TextStyle` | `{}` | ### `dateHeader` `DateHeader`, the date that stays at the top of the message list while it scrolls. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `text` | `TextStyle` | `{}` | ### `emptyList` `EmptyList`, the empty state of the media, files and pinned messages lists of `ChannelDetails`. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `subtitle` | `TextStyle` | `{}` | | `title` | `TextStyle` | `{}` | ### `emptySearchResult` `EmptySearchResult`, shown when the member list, the member search or the pinned messages list of `ChannelDetails` is empty. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `text` | `TextStyle` | `{}` | ### `emptyStateIndicator` `EmptyStateIndicator`, the empty channel list, message list and thread list. | Key | Type | Default | | ------------------ | ----------- | ------- | | `channelContainer` | `ViewStyle` | `{}` | | `channelDetails` | `TextStyle` | `{}` | | `channelTitle` | `TextStyle` | `{}` | | `messageContainer` | `ViewStyle` | `{}` | | `messageTitle` | `TextStyle` | `{}` | ### `fileAttachmentListSkeleton` The placeholder rows of the files list of `ChannelDetails`. | Key | Type | Default | | --------------- | ----------- | ------- | | `animationTime` | `number` | `1000` | | `avatar` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `content` | `ViewStyle` | `{}` | | `subtitle` | `ViewStyle` | `{}` | | `textContainer` | `ViewStyle` | `{}` | | `title` | `ViewStyle` | `{}` | ### `groupAvatar` No component reads it. | Key | Type | Default | | ----------- | ------------ | ------------------------- | | `container` | `ViewStyle` | `{}` | | `image` | `ImageStyle` | `{ resizeMode: 'cover' }` | ### `iconBadge` No component reads it. | Key | Type | Default | | ------------- | ----------- | ------- | | `icon` | `ViewStyle` | `{}` | | `iconInner` | `ViewStyle` | `{}` | | `unreadCount` | `TextStyle` | `{}` | ### `iconSquare` No component reads it. | Key | Type | Default | | ----------- | ------------ | ------- | | `container` | `ViewStyle` | `{}` | | `image` | `ImageStyle` | `{}` | ### `imageGallery` `ImageGallery`, the full-screen media viewer, with its header, footer, video controls and grid. | Key | Type | Default | | ----------------------------------- | ------------ | ------- | | `footer.centerContainer` | `ViewStyle` | `{}` | | `footer.container` | `ViewStyle` | `{}` | | `footer.imageCountText` | `TextStyle` | `{}` | | `footer.innerContainer` | `ViewStyle` | `{}` | | `footer.activityIndicatorContainer` | `ViewStyle` | `{}` | | `footer.wrapper` | `ViewStyle` | `{}` | | `grid.container` | `ViewStyle` | `{}` | | `grid.contentContainer` | `ViewStyle` | `{}` | | `grid.gridAvatar` | `ImageStyle` | `{}` | | `grid.gridAvatarWrapper` | `ViewStyle` | `{}` | | `grid.gridImage` | `ImageStyle` | `{}` | | `grid.handle` | `ViewStyle` | `{}` | | `grid.handleText` | `TextStyle` | `{}` | | `grid.overlay` | `ViewStyle` | `{}` | | `header.centerContainer` | `ViewStyle` | `{}` | | `header.container` | `ViewStyle` | `{}` | | `header.dateText` | `TextStyle` | `{}` | | `header.innerContainer` | `ViewStyle` | `{}` | | `header.usernameText` | `TextStyle` | `{}` | | `videoControl.container` | `ViewStyle` | `{}` | | `videoControl.durationTextStyle` | `TextStyle` | `{}` | | `videoControl.leftContainer` | `ViewStyle` | `{}` | | `videoControl.progressContainer` | `ViewStyle` | `{}` | | `backgroundColor` | `string` | not set | | `pager` | `ViewStyle` | not set | | `slide` | `ImageStyle` | not set | ### `inlineDateSeparator` `InlineDateSeparator`, the date between messages. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `text` | `TextStyle` | `{}` | ### `loadingDots` `LoadingDots`, the animated dots of the typing indicator. | Key | Type | Default | | ------------ | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `loadingDot` | `ViewStyle` | `{}` | | `spacing` | `number` | `4` | ### `loadingErrorIndicator` `LoadingErrorIndicator`. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `errorText` | `TextStyle` | `{}` | | `retryText` | `TextStyle` | `{}` | ### `loadingIndicator` `LoadingIndicator`. | Key | Type | Default | | ------------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `loadingText` | `TextStyle` | `{}` | ### `memberListSkeleton` The placeholder rows of the member list of `ChannelDetails`. | Key | Type | Default | | --------------- | ----------- | ------- | | `animationTime` | `number` | `1000` | | `avatar` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `content` | `ViewStyle` | `{}` | | `subtitle` | `ViewStyle` | `{}` | | `textContainer` | `ViewStyle` | `{}` | | `title` | `ViewStyle` | `{}` | ### `messageComposer` `MessageComposer` and its parts, such as the input, the buttons, the attachment previews, the audio recorder and the suggestions. | Key | Type | Default | | ------------------------------------------------------- | ------------ | ------- | | `attachButton` | `ViewStyle` | `{}` | | `attachButtonContainer` | `ViewStyle` | `{}` | | `attachmentSelectionBar` | `ViewStyle` | `{}` | | `attachmentUploadPreviewList.audioAttachmentsContainer` | `ViewStyle` | `{}` | | `attachmentUploadPreviewList.flatList` | `ViewStyle` | `{}` | | `attachmentUploadPreviewList.itemSeparator` | `ViewStyle` | `{}` | | `audioRecordingButtonContainer` | `ViewStyle` | `{}` | | `audioRecorder.arrowLeftIcon` | `IconProps` | `{}` | | `audioRecorder.checkContainer` | `ViewStyle` | `{}` | | `audioRecorder.circleStopIcon` | `IconProps` | `{}` | | `audioRecorder.deleteContainer` | `ViewStyle` | `{}` | | `audioRecorder.deleteIcon` | `IconProps` | `{}` | | `audioRecorder.micContainer` | `ViewStyle` | `{}` | | `audioRecorder.micIcon` | `IconProps` | `{}` | | `audioRecorder.pausedContainer` | `ViewStyle` | `{}` | | `audioRecorder.sendCheckIcon` | `IconProps` | `{}` | | `audioRecorder.slideToCancelContainer` | `ViewStyle` | `{}` | | `audioRecordingInProgress.container` | `ViewStyle` | `{}` | | `audioRecordingInProgress.durationText` | `TextStyle` | `{}` | | `audioRecordingLockIndicator.arrowUpIcon` | `IconProps` | `{}` | | `audioRecordingLockIndicator.container` | `ViewStyle` | `{}` | | `audioRecordingLockIndicator.lockIcon` | `IconProps` | `{}` | | `audioRecordingPreview.container` | `ViewStyle` | `{}` | | `audioRecordingPreview.currentTime` | `TextStyle` | `{}` | | `audioRecordingPreview.infoContainer` | `ViewStyle` | `{}` | | `audioRecordingPreview.pauseIcon` | `IconProps` | `{}` | | `audioRecordingPreview.playIcon` | `IconProps` | `{}` | | `audioRecordingPreview.progressBar` | `ViewStyle` | `{}` | | `audioRecordingWaveform.container` | `ViewStyle` | `{}` | | `audioRecordingWaveform.waveform` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `contentContainer` | `ViewStyle` | `{}` | | `cooldownButtonContainer` | `ViewStyle` | `{}` | | `cooldownTimer.text` | `TextStyle` | `{}` | | `dismissAttachmentUpload.dismiss` | `ViewStyle` | `{}` | | `dismissAttachmentUpload.dismissIcon` | `IconProps` | `{}` | | `dismissAttachmentUpload.dismissIconColor` | `ColorValue` | `''` | | `editButton` | `ViewStyle` | `{}` | | `editButtonContainer` | `ViewStyle` | `{}` | | `fileAttachmentUploadPreview.fileContainer` | `ViewStyle` | `{}` | | `fileAttachmentUploadPreview.filenameText` | `TextStyle` | `{}` | | `fileAttachmentUploadPreview.fileSizeText` | `TextStyle` | `{}` | | `fileAttachmentUploadPreview.fileTextContainer` | `ViewStyle` | `{}` | | `fileAttachmentUploadPreview.uploadProgressOverlay` | `ViewStyle` | `{}` | | `fileAttachmentUploadPreview.wrapper` | `ViewStyle` | `{}` | | `fileUploadInProgressIndicator.container` | `ViewStyle` | `{}` | | `fileUploadInProgressIndicator.indicator` | `ViewStyle` | `{}` | | `fileUploadRetryIndicator.container` | `ViewStyle` | `{}` | | `fileUploadRetryIndicator.networkErrorContainer` | `ViewStyle` | `{}` | | `fileUploadRetryIndicator.networkErrorText` | `TextStyle` | `{}` | | `fileUploadRetryIndicator.retryButton` | `ViewStyle` | `{}` | | `fileUploadRetryIndicator.retryText` | `TextStyle` | `{}` | | `fileUploadNotSupportedIndicator.container` | `ViewStyle` | `{}` | | `fileUploadNotSupportedIndicator.notSupportedText` | `TextStyle` | `{}` | | `imageUploadInProgressIndicator.container` | `ViewStyle` | `{}` | | `imageUploadInProgressIndicator.indicator` | `ViewStyle` | `{}` | | `imageUploadRetryIndicator.container` | `ViewStyle` | `{}` | | `imageUploadNotSupportedIndicator.container` | `ViewStyle` | `{}` | | `fileUploadPreview.flatList` | `ViewStyle` | `{}` | | `floatingWrapper` | `ViewStyle` | `{}` | | `focusedInputBoxContainer` | `ViewStyle` | `{}` | | `imageAttachmentUploadPreview.container` | `ViewStyle` | `{}` | | `imageAttachmentUploadPreview.upload` | `ImageStyle` | `{}` | | `imageAttachmentUploadPreview.wrapper` | `ViewStyle` | `{}` | | `inputContainer` | `ViewStyle` | `{}` | | `inputBox` | `TextStyle` | `{}` | | `inputBoxContainer` | `ViewStyle` | `{}` | | `inputBoxWrapper` | `ViewStyle` | `{}` | | `inputButtonsContainer` | `ViewStyle` | `{}` | | `inputFloatingContainer` | `ViewStyle` | `{}` | | `micButtonContainer` | `ViewStyle` | `{}` | | `nativeAttachmentPicker.buttonContainer` | `ViewStyle` | `{}` | | `nativeAttachmentPicker.buttonDimmerStyle` | `ViewStyle` | `{}` | | `nativeAttachmentPicker.container` | `ViewStyle` | `{}` | | `outputButtonsContainer` | `ViewStyle` | `{}` | | `sendButton` | `ViewStyle` | `{}` | | `sendButtonContainer` | `ViewStyle` | `{}` | | `sendMessageDisallowedIndicator.container` | `ViewStyle` | `{}` | | `sendMessageDisallowedIndicator.text` | `TextStyle` | `{}` | | `showThreadMessageInChannelButton.check` | `IconProps` | `{}` | | `showThreadMessageInChannelButton.checkBoxActive` | `ViewStyle` | `{}` | | `showThreadMessageInChannelButton.checkBoxInactive` | `ViewStyle` | `{}` | | `showThreadMessageInChannelButton.container` | `ViewStyle` | `{}` | | `showThreadMessageInChannelButton.innerContainer` | `ViewStyle` | `{}` | | `showThreadMessageInChannelButton.text` | `TextStyle` | `{}` | | `stopMessageStreamingButton` | `ViewStyle` | `{}` | | `stopMessageStreamingIcon` | `IconProps` | `{}` | | `suggestions.command.args` | `TextStyle` | `{}` | | `suggestions.command.container` | `ViewStyle` | `{}` | | `suggestions.command.iconContainer` | `ViewStyle` | `{}` | | `suggestions.command.title` | `TextStyle` | `{}` | | `suggestions.emoji.container` | `ViewStyle` | `{}` | | `suggestions.emoji.text` | `TextStyle` | `{}` | | `suggestions.header.container` | `ViewStyle` | `{}` | | `suggestions.header.title` | `TextStyle` | `{}` | | `suggestions.item` | `ViewStyle` | `{}` | | `suggestions.mention.avatarSize` | `number` | `40` | | `suggestions.mention.column` | `ViewStyle` | `{}` | | `suggestions.mention.container` | `ViewStyle` | `{}` | | `suggestions.mention.enhancedMentionContainer` | `ViewStyle` | `{}` | | `suggestions.mention.enhancedMentionIcon` | `ViewStyle` | `{}` | | `suggestions.mention.enhancedMentionSubtitle` | `TextStyle` | `{}` | | `suggestions.mention.enhancedMentionTitle` | `TextStyle` | `{}` | | `suggestions.mention.name` | `TextStyle` | `{}` | | `suggestions.mention.tag` | `TextStyle` | `{}` | | `suggestionsListContainer.container` | `ViewStyle` | `{}` | | `suggestionsListContainer.flatlist` | `ViewStyle` | `{}` | | `suggestionsListContainer.flatlistContentContainer` | `ViewStyle` | `{}` | | `videoAttachmentUploadPreview.durationContainer` | `ViewStyle` | `{}` | | `videoAttachmentUploadPreview.durationText` | `TextStyle` | `{}` | | `wrapper` | `ViewStyle` | `{}` | | `linkPreviewList.linkContainer` | `ViewStyle` | `{}` | | `linkPreviewList.linkIcon` | `ViewStyle` | `{}` | | `linkPreviewList.container` | `ViewStyle` | `{}` | | `linkPreviewList.imageWrapper` | `ViewStyle` | `{}` | | `linkPreviewList.dismissWrapper` | `ViewStyle` | `{}` | | `linkPreviewList.thumbnail` | `ImageStyle` | `{}` | | `linkPreviewList.wrapper` | `ViewStyle` | `{}` | | `linkPreviewList.metadataContainer` | `ViewStyle` | `{}` | | `linkPreviewList.text` | `TextStyle` | `{}` | | `linkPreviewList.titleText` | `TextStyle` | `{}` | ### `messageItemView` Each message, with the bubble and its content, attachments, reactions, status and timestamps. | Key | Type | Default | | --------------------------------------------------- | ------------------------------ | -------------------------------------------------- | | `blockedMessageContainer` | `ViewStyle` | `{}` | | `bubbleContentContainer` | `ViewStyle` | `{}` | | `bubbleErrorContainer` | `ViewStyle` | `{}` | | `bubbleReactionListTopContainer` | `ViewStyle` | `{}` | | `bubbleWrapper` | `ViewStyle` | `{}` | | `actions.button` | `ViewStyle` | `{}` | | `actions.button.defaultBackgroundColor` | `ViewStyle['backgroundColor']` | not set | | `actions.button.defaultBorderColor` | `ViewStyle['borderColor']` | not set | | `actions.button.primaryBackgroundColor` | `ViewStyle['backgroundColor']` | not set | | `actions.button.primaryBorderColor` | `ViewStyle['borderColor']` | not set | | `actions.buttonText` | `TextStyle` | `{}` | | `actions.buttonText.defaultColor` | `TextStyle['color']` | not set | | `actions.buttonText.primaryColor` | `TextStyle['color']` | not set | | `actions.container` | `ViewStyle` | `{}` | | `authorWrapper.container` | `ViewStyle` | `{}` | | `authorWrapper.spacer` | `ViewStyle` | `{ height: 24, width: 24 }` | | `card.container` | `ViewStyle` | `{}` | | `card.cover` | `ImageStyle` | `{}` | | `card.footer` | `ViewStyle` | `{}` | | `card.footer.description` | `TextStyle` | `{}` | | `card.footer.title` | `TextStyle` | `{}` | | `card.linkPreview` | `ViewStyle` | `{}` | | `card.linkPreviewText` | `TextStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `repliesContainer` | `ViewStyle` | `{}` | | `content.container` | `ViewStyle` | `{}` | | `content.containerInner` | `ViewStyle` | `{}` | | `content.contentContainer` | `ViewStyle` | `{}` | | `content.editedTimestampContainer` | `ViewStyle` | `{}` | | `content.errorContainer` | `ViewStyle` | `{ paddingRight: 12, paddingTop: 0 }` | | `content.errorIcon` | `IconProps` | `{ height: 20, width: 20 }` | | `content.errorIconContainer` | `ViewStyle` | `{ bottom: -2, position: 'absolute', right: -12 }` | | `content.eyeIcon` | `IconProps` | `{ height: 16, width: 16 }` | | `content.lastMessageContainer` | `ViewStyle` | `{}` | | `content.markdown` | `MarkdownStyle` | `{}` | | `content.messageGroupedSingleOrBottomContainer` | `ViewStyle` | `{}` | | `content.messageGroupedTopContainer` | `ViewStyle` | `{}` | | `content.metaText` | `TextStyle` | `{ fontSize: 12 }` | | `content.replyBorder` | `ViewStyle` | `{}` | | `content.replyContainer` | `ViewStyle` | `{}` | | `content.textContainer` | `ViewStyle` | `{}` | | `content.textContainer.onlyEmojiMarkdown` | `MarkdownStyle` | `{ text: { fontSize: 50 } }` | | `content.timestampText` | `TextStyle` | `{}` | | `deleted.containerInner` | `ViewStyle` | `{}` | | `deleted.deletedText` | `TextStyle` | `{}` | | `deleted.container` | `ViewStyle` | `{}` | | `footer.container` | `ViewStyle` | `{}` | | `footer.name` | `TextStyle` | `{}` | | `footer.editedText` | `TextStyle` | `{}` | | `contentWrapper` | `ViewStyle` | `{}` | | `contentContainer` | `ViewStyle` | `{}` | | `leftAlignItems` | `ViewStyle` | `{}` | | `rightAlignItems` | `ViewStyle` | `{}` | | `messageGroupedSingleStyles` | `ViewStyle` | `{}` | | `messageGroupedBottomStyles` | `ViewStyle` | `{}` | | `messageGroupedTopStyles` | `ViewStyle` | `{}` | | `messageGroupedMiddleStyles` | `ViewStyle` | `{}` | | `file.container` | `ViewStyle` | `{}` | | `file.details` | `ViewStyle` | `{}` | | `file.fileSize` | `TextStyle` | `{}` | | `file.icon` | `IconProps` | `{}` | | `file.title` | `TextStyle` | `{}` | | `unsupportedAttachment.container` | `ViewStyle` | `{}` | | `unsupportedAttachment.details` | `ViewStyle` | `{}` | | `unsupportedAttachment.title` | `TextStyle` | `{}` | | `fileAttachmentGroup.attachmentContainer` | `ViewStyle` | `{}` | | `fileAttachmentGroup.container` | `ViewStyle` | `{}` | | `attachmentUploadIndicator.indicator` | `ViewStyle` | `{}` | | `attachmentUploadIndicator.overlay` | `ViewStyle` | `{}` | | `attachmentUploadIndicator.overlayContent` | `ViewStyle` | `{}` | | `gallery.galleryContainer` | `ViewStyle` | `{}` | | `gallery.galleryItemColumn` | `ViewStyle` | `{}` | | `gallery.gridHeight` | `number` | `192` | | `gallery.gridWidth` | `number` | `256` | | `gallery.image` | `ImageStyle` | `{}` | | `gallery.imageContainer` | `ViewStyle` | `{}` | | `gallery.imageContainerStyle` | `ViewStyle` | `{}` | | `gallery.maxHeight` | `number` | `192` | | `gallery.maxWidth` | `number` | `256` | | `gallery.minHeight` | `number` | `120` | | `gallery.minWidth` | `number` | `120` | | `gallery.moreImagesContainer` | `ViewStyle` | `{}` | | `gallery.moreImagesText` | `TextStyle` | `{}` | | `gallery.thumbnail` | `ViewStyle` | `{}` | | `gallery.imageBorderRadius.borderBottomLeftRadius` | `number` | not set | | `gallery.imageBorderRadius.borderBottomRightRadius` | `number` | not set | | `gallery.imageBorderRadius.borderTopLeftRadius` | `number` | not set | | `gallery.imageBorderRadius.borderTopRightRadius` | `number` | not set | | `giphy.actionButtonContainer` | `ViewStyle` | `{}` | | `giphy.actionButton` | `ViewStyle` | `{}` | | `giphy.actionButtonText` | `TextStyle` | `{}` | | `giphy.container` | `ViewStyle` | `{}` | | `giphy.giphy` | `ImageStyle` | `{}` | | `giphy.giphyContainer` | `ViewStyle` | `{}` | | `giphy.giphyHeaderText` | `TextStyle` | `{}` | | `giphy.giphyMask` | `ViewStyle` | `{}` | | `giphy.giphyMaskText` | `TextStyle` | `{}` | | `giphy.header` | `ViewStyle` | `{}` | | `giphy.imageIndicatorContainer` | `ViewStyle` | `{}` | | `compactUrlPreview.wrapper` | `ViewStyle` | `{}` | | `compactUrlPreview.container` | `ViewStyle` | `{}` | | `compactUrlPreview.cardCover` | `ImageStyle` | `{}` | | `compactUrlPreview.cardFooter` | `ViewStyle` | `{}` | | `compactUrlPreview.title` | `TextStyle` | `{}` | | `compactUrlPreview.description` | `TextStyle` | `{}` | | `compactUrlPreview.linkPreview` | `ViewStyle` | `{}` | | `compactUrlPreview.linkPreviewText` | `TextStyle` | `{}` | | `lastMessageContainer` | `ViewStyle` | `{}` | | `loadingIndicator.container` | `ViewStyle` | `{}` | | `loadingIndicator.roundedView` | `ViewStyle` | `{}` | | `messageGroupedSingleOrBottomContainer` | `ViewStyle` | `{}` | | `messageGroupedTopContainer` | `ViewStyle` | `{}` | | `messageBlocked.container` | `ViewStyle` | `{}` | | `messageBlocked.text` | `TextStyle` | `{}` | | `pinnedHeader.container` | `ViewStyle` | `{}` | | `pinnedHeader.label` | `TextStyle` | `{}` | | `savedForLaterHeader.container` | `ViewStyle` | `{}` | | `savedForLaterHeader.label` | `TextStyle` | `{}` | | `reminderHeader.container` | `ViewStyle` | `{}` | | `reminderHeader.label` | `TextStyle` | `{}` | | `reminderHeader.dot` | `TextStyle` | `{}` | | `reminderHeader.time` | `TextStyle` | `{}` | | `sentToChannelHeader.container` | `ViewStyle` | `{}` | | `sentToChannelHeader.label` | `TextStyle` | `{}` | | `sentToChannelHeader.dot` | `TextStyle` | `{}` | | `sentToChannelHeader.link` | `TextStyle` | `{}` | | `reactionListBottom.contentContainer` | `ViewStyle` | `{}` | | `reactionListBottom.columnWrapper` | `ViewStyle` | `{}` | | `reactionListBottom.rowSeparator` | `ViewStyle` | `{}` | | `reactionListItem.reactionCount` | `TextStyle` | `{}` | | `reactionListItem.icon.size` | `number` | `12` | | `reactionListItem.icon.style` | `ViewStyle` | `{}` | | `reactionListClustered.contentContainer` | `ViewStyle` | `{}` | | `reactionListClustered.reactionCount` | `TextStyle` | `{}` | | `reactionListClustered.iconStyle` | `ViewStyle` | `{}` | | `reactionListClustered.icon.size` | `number` | `12` | | `reactionListClustered.icon.style` | `ViewStyle` | `{}` | | `reactionListItemWrapper.wrapper` | `ViewStyle` | `{}` | | `reactionListItemWrapper.container` | `ViewStyle` | `{}` | | `reactionListItemWrapper.containerSelected` | `ViewStyle` | `{}` | | `reactionListItemWrapper.containerPressed` | `ViewStyle` | `{}` | | `reactionListTop.container` | `ViewStyle` | `{}` | | `reactionListTop.contentContainer` | `ViewStyle` | `{}` | | `reactionListTop.list` | `ViewStyle` | `{}` | | `reactionListTop.position` | `number` | `8` | | `replies.container` | `ViewStyle` | `{}` | | `replies.messageRepliesText` | `TextStyle` | `{}` | | `replies.content` | `ViewStyle` | `{}` | | `replies.avatarStackContainer` | `ViewStyle` | `{}` | | `status.checkAllIcon` | `IconProps` | `{}` | | `status.checkIcon` | `IconProps` | `{}` | | `status.container` | `ViewStyle` | `{}` | | `status.timeIcon` | `IconProps` | `{}` | | `swipeContentContainer` | `ViewStyle` | `{}` | | `swipeLeftContent.container` | `ViewStyle` | `{}` | | `targetedMessageContainer` | `ViewStyle` | `{}` | | `videoThumbnail.container` | `ViewStyle` | `{}` | | `videoThumbnail.roundedView` | `ViewStyle` | `{}` | | `wrapper` | `ViewStyle` | `{}` | ### `messageList` `MessageList` and `MessageFlashList`, with the list, the scroll-to-bottom button, the unread notification and system messages. | Key | Type | Default | | ------------------------------------------------------- | ----------- | ------- | | `systemMessageContainer` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `contentContainer` | `ViewStyle` | `{}` | | `errorNotification` | `ViewStyle` | `{}` | | `errorNotificationText` | `TextStyle` | `{}` | | `inlineUnreadIndicator.container` | `ViewStyle` | `{}` | | `inlineUnreadIndicator.text` | `TextStyle` | `{}` | | `listContainer` | `ViewStyle` | `{}` | | `messageContainer` | `ViewStyle` | `{}` | | `inlineDateSeparatorContainer` | `ViewStyle` | `{}` | | `unreadUnderlayContainer` | `ViewStyle` | `{}` | | `messageSystem.container` | `ViewStyle` | `{}` | | `messageSystem.dateText` | `TextStyle` | `{}` | | `messageSystem.line` | `ViewStyle` | `{}` | | `messageSystem.text` | `TextStyle` | `{}` | | `messageSystem.textContainer` | `ViewStyle` | `{}` | | `scrollToBottomButtonContainer` | `ViewStyle` | `{}` | | `scrollToBottomButton.container` | `ViewStyle` | `{}` | | `scrollToBottomButton.unreadCountNotificationContainer` | `ViewStyle` | `{}` | | `scrollToBottomButton.unreadCountNotificationText` | `TextStyle` | `{}` | | `stickyHeaderContainer` | `ViewStyle` | `{}` | | `typingIndicatorContainer` | `ViewStyle` | `{}` | | `unreadMessagesNotificationContainer` | `ViewStyle` | `{}` | | `unreadMessagesNotification.container` | `ViewStyle` | `{}` | | `unreadMessagesNotification.leftButtonContainer` | `ViewStyle` | `{}` | | `unreadMessagesNotification.rightButtonContainer` | `ViewStyle` | `{}` | ### `messageMenu` The message menu that a long press opens, with the actions, the reaction picker and the list of reactions. | Key | Type | Default | | ------------------------------------------ | ------------ | ------- | | `actionList.container` | `ViewStyle` | `{}` | | `actionList.contentContainer` | `ViewStyle` | `{}` | | `actionListItem.container` | `ViewStyle` | `{}` | | `actionListItem.icon` | `ViewStyle` | `{}` | | `actionListItem.title` | `TextStyle` | `{}` | | `bottomSheet.height` | `number` | not set | | `reactionButton.filledColor` | `ColorValue` | not set | | `reactionButton.unfilledColor` | `ColorValue` | not set | | `reactionButton.filledBackgroundColor` | `ColorValue` | not set | | `reactionButton.unfilledBackgroundColor` | `ColorValue` | not set | | `reactionPicker.buttonContainer` | `ViewStyle` | `{}` | | `reactionPicker.container` | `ViewStyle` | `{}` | | `reactionPicker.contentContainer` | `ViewStyle` | `{}` | | `reactionPicker.reactionIconSize` | `number` | `24` | | `reactionPicker.emojiViewerButton` | `ViewStyle` | `{}` | | `userReactions.avatarContainer` | `ViewStyle` | `{}` | | `userReactions.avatarInnerContainer` | `ViewStyle` | `{}` | | `userReactions.avatarName` | `TextStyle` | `{}` | | `userReactions.avatarNameContainer` | `ViewStyle` | `{}` | | `userReactions.avatarSize` | `number` | `64` | | `userReactions.container` | `ViewStyle` | `{}` | | `userReactions.contentContainer` | `ViewStyle` | `{}` | | `userReactions.filledBackgroundColor` | `ColorValue` | not set | | `userReactions.flatlistContainer` | `ViewStyle` | `{}` | | `userReactions.iconFilledColor` | `ColorValue` | not set | | `userReactions.iconUnFilledColor` | `ColorValue` | not set | | `userReactions.radius` | `number` | `2` | | `userReactions.reactionBubble` | `ViewStyle` | `{}` | | `userReactions.reactionBubbleBackground` | `ViewStyle` | `{}` | | `userReactions.reactionBubbleBorderRadius` | `number` | `24` | | `userReactions.reactionSelectorContainer` | `ViewStyle` | `{}` | | `userReactions.reactionsText` | `TextStyle` | `{}` | | `userReactions.title` | `TextStyle` | `{}` | | `userReactions.unfilledBackgroundColor` | `ColorValue` | not set | ### `messagePreview` No component reads it. The message previews of the channel list, the thread list and quoted messages read `channelPreview.messagePreview`, `threadListItem.messagePreview` and `reply.messagePreview`. | Key | Type | Default | | --------- | ----------- | ------- | | `message` | `TextStyle` | `{}` | ### `notification` `Notification`, one in-app notification. | Key | Type | Default | | ------------------ | ----------- | ------- | | `actionButton` | `ViewStyle` | `{}` | | `actionButtonText` | `TextStyle` | `{}` | | `actionsContainer` | `ViewStyle` | `{}` | | `closeButton` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `contentContainer` | `ViewStyle` | `{}` | | `iconContainer` | `ViewStyle` | `{}` | | `message` | `TextStyle` | `{}` | ### `notificationList` `NotificationList`. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | ### `pinnedMessageListSkeleton` The placeholder rows of the pinned messages list of `ChannelDetails`. | Key | Type | Default | | --------------- | ----------- | ------- | | `animationTime` | `number` | `1000` | | `avatar` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `content` | `ViewStyle` | `{}` | | `subtitle` | `ViewStyle` | `{}` | | `textContainer` | `ViewStyle` | `{}` | | `title` | `ViewStyle` | `{}` | ### `poll` Polls in messages, the poll creation screen and the poll modals. | Key | Type | Default | | ---------------------------------------------------------------- | ----------- | ------- | | `allOptions.listContainer` | `ViewStyle` | `{}` | | `allOptions.titleContainer` | `ViewStyle` | `{}` | | `allOptions.titleText` | `TextStyle` | `{}` | | `allOptions.wrapper` | `ViewStyle` | `{}` | | `answersList.container` | `ViewStyle` | `{}` | | `answersList.contentContainer` | `ViewStyle` | `{}` | | `answersList.item.answerText` | `TextStyle` | `{}` | | `answersList.item.container` | `ViewStyle` | `{}` | | `answersList.item.infoContainer` | `ViewStyle` | `{}` | | `answersList.item.userInfoContainer` | `ViewStyle` | `{}` | | `answersList.item.wrapper` | `ViewStyle` | `{}` | | `button.container` | `ViewStyle` | `{}` | | `button.text` | `TextStyle` | `{}` | | `createContent.addComment.title` | `TextStyle` | `{}` | | `createContent.addComment.description` | `TextStyle` | `{}` | | `createContent.addComment.wrapper` | `ViewStyle` | `{}` | | `createContent.addComment.optionCardContent` | `ViewStyle` | `{}` | | `createContent.addComment.optionCardSwitch` | `ViewStyle` | `{}` | | `createContent.anonymousPoll.title` | `TextStyle` | `{}` | | `createContent.anonymousPoll.description` | `TextStyle` | `{}` | | `createContent.anonymousPoll.wrapper` | `ViewStyle` | `{}` | | `createContent.anonymousPoll.optionCardContent` | `ViewStyle` | `{}` | | `createContent.anonymousPoll.optionCardSwitch` | `ViewStyle` | `{}` | | `createContent.headerContainer` | `ViewStyle` | `{}` | | `createContent.maxVotes.input` | `TextStyle` | `{}` | | `createContent.maxVotes.validationText` | `TextStyle` | `{}` | | `createContent.maxVotes.wrapper` | `ViewStyle` | `{}` | | `createContent.multipleAnswers.description` | `TextStyle` | `{}` | | `createContent.multipleAnswers.input` | `TextStyle` | `{}` | | `createContent.multipleAnswers.row` | `ViewStyle` | `{}` | | `createContent.multipleAnswers.settingsWrapper` | `ViewStyle` | `{}` | | `createContent.multipleAnswers.title` | `TextStyle` | `{}` | | `createContent.multipleAnswers.optionCard` | `ViewStyle` | `{}` | | `createContent.multipleAnswers.optionCardContent` | `ViewStyle` | `{}` | | `createContent.multipleAnswers.optionCardSwitch` | `ViewStyle` | `{}` | | `createContent.multipleAnswers.wrapper` | `ViewStyle` | `{}` | | `createContent.name.input` | `TextStyle` | `{}` | | `createContent.name.title` | `TextStyle` | `{}` | | `createContent.optionCardWrapper` | `ViewStyle` | `{}` | | `createContent.pollOptions.addOption.text` | `TextStyle` | `{}` | | `createContent.pollOptions.addOption.wrapper` | `ViewStyle` | `{}` | | `createContent.pollOptions.container` | `ViewStyle` | `{}` | | `createContent.pollOptions.optionStyle.content` | `ViewStyle` | `{}` | | `createContent.pollOptions.optionStyle.input` | `TextStyle` | `{}` | | `createContent.pollOptions.optionStyle.validationErrorText` | `TextStyle` | `{}` | | `createContent.pollOptions.optionStyle.wrapper` | `ViewStyle` | `{}` | | `createContent.pollOptions.optionStyle.validationErrorContainer` | `ViewStyle` | `{}` | | `createContent.pollOptions.title` | `TextStyle` | `{}` | | `createContent.scrollView` | `ViewStyle` | `{}` | | `createContent.sendButton` | `ViewStyle` | `{}` | | `createContent.suggestOption.title` | `TextStyle` | `{}` | | `createContent.suggestOption.description` | `TextStyle` | `{}` | | `createContent.suggestOption.wrapper` | `ViewStyle` | `{}` | | `createContent.suggestOption.optionCardContent` | `ViewStyle` | `{}` | | `createContent.suggestOption.optionCardSwitch` | `ViewStyle` | `{}` | | `fullResults.container` | `ViewStyle` | `{}` | | `fullResults.contentContainer` | `ViewStyle` | `{}` | | `fullResults.headerContainer` | `ViewStyle` | `{}` | | `fullResults.headerText` | `TextStyle` | `{}` | | `fullResults.headerTitle` | `TextStyle` | `{}` | | `inputDialog.button` | `TextStyle` | `{}` | | `inputDialog.buttonContainer` | `ViewStyle` | `{}` | | `inputDialog.container` | `ViewStyle` | `{}` | | `inputDialog.input` | `TextStyle` | `{}` | | `inputDialog.title` | `TextStyle` | `{}` | | `inputDialog.transparentContainer` | `ViewStyle` | `{}` | | `message.container` | `ViewStyle` | `{}` | | `message.header.subtitle` | `TextStyle` | `{}` | | `message.header.title` | `TextStyle` | `{}` | | `message.option.container` | `ViewStyle` | `{}` | | `message.option.info` | `ViewStyle` | `{}` | | `message.option.header` | `ViewStyle` | `{}` | | `message.option.votesText` | `TextStyle` | `{}` | | `message.option.progressBarContainer` | `ViewStyle` | `{}` | | `message.option.progressBar` | `ViewStyle` | `{}` | | `message.option.text` | `TextStyle` | `{}` | | `message.option.voteButtonContainer` | `ViewStyle` | `{}` | | `message.option.votesContainer` | `ViewStyle` | `{}` | | `message.option.wrapper` | `ViewStyle` | `{}` | | `message.optionsWrapper` | `ViewStyle` | `{}` | | `modalHeader.container` | `ViewStyle` | `{}` | | `modalHeader.title` | `TextStyle` | `{}` | | `results.container` | `ViewStyle` | `{}` | | `results.item.container` | `ViewStyle` | `{}` | | `results.item.headerContainer` | `ViewStyle` | `{}` | | `results.item.title` | `TextStyle` | `{}` | | `results.item.titleMeta` | `TextStyle` | `{}` | | `results.item.voteCount` | `TextStyle` | `{}` | | `results.scrollView` | `ViewStyle` | `{}` | | `results.title` | `TextStyle` | `{}` | | `results.titleMeta` | `TextStyle` | `{}` | | `results.vote.container` | `ViewStyle` | `{}` | | `results.vote.dateText` | `TextStyle` | `{}` | | `results.vote.userName` | `TextStyle` | `{}` | ### `progressControl` `ProgressControl`, the progress bar of audio playback. | Key | Type | Default | | -------------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `filledStyles` | `ViewStyle` | `{}` | | `thumb` | `ViewStyle` | `{}` | ### `reply` `Reply`, the quoted message in the composer and in messages. | Key | Type | Default | | -------------------------- | ----------- | ------- | | `audioIcon` | `IconProps` | `{}` | | `container` | `ViewStyle` | `{}` | | `dismissWrapper` | `ViewStyle` | `{}` | | `fileIcon` | `IconProps` | `{}` | | `leftContainer` | `ViewStyle` | `{}` | | `locationIcon` | `IconProps` | `{}` | | `linkIcon` | `IconProps` | `{}` | | `photoIcon` | `IconProps` | `{}` | | `pollIcon` | `IconProps` | `{}` | | `rightContainer` | `ViewStyle` | `{}` | | `title` | `TextStyle` | `{}` | | `subtitle` | `TextStyle` | `{}` | | `subtitleContainer` | `ViewStyle` | `{}` | | `videoIcon` | `IconProps` | `{}` | | `wrapper` | `ViewStyle` | `{}` | | `messagePreview.container` | `ViewStyle` | `{}` | | `messagePreview.subtitle` | `TextStyle` | `{}` | ### `screenPadding` The horizontal padding of every message row, in points. Type `number`, default `16`. ### `selectionCircle` `SelectionCircle`, the selection mark in the add-members list. | Key | Type | Default | | ---------------- | ----------- | ------- | | `circle` | `ViewStyle` | `{}` | | `circleSelected` | `ViewStyle` | `{}` | ### `spinner` `Spinner`, the loading spinner. Type `ViewStyle`, default `{}`. ### `thread` `ThreadFooterComponent`, the reply count under the parent message of a thread. | Key | Type | Default | | ----------------------------------- | ----------- | ------- | | `newThread.container` | `ViewStyle` | `{}` | | `newThread.text` | `TextStyle` | `{}` | | `newThread.backgroundGradientStart` | `string` | not set | | `newThread.backgroundGradientStop` | `string` | not set | | `newThread.threadHeight` | `number` | not set | ### `threadListItem` The rows of `ThreadList`. | Key | Type | Default | | ---------------------------------------- | ----------- | ------- | | `wrapper` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `content` | `ViewStyle` | `{}` | | `channelName` | `TextStyle` | `{}` | | `dateText` | `TextStyle` | `{}` | | `lowerRow` | `ViewStyle` | `{}` | | `messageRepliesText` | `TextStyle` | `{}` | | `previewMessageContainer` | `ViewStyle` | `{}` | | `unreadBubbleWrapper` | `ViewStyle` | `{}` | | `messagePreview.container` | `ViewStyle` | `{}` | | `messagePreview.draftText` | `TextStyle` | `{}` | | `messagePreview.subtitle` | `TextStyle` | `{}` | | `messagePreviewDeliveryStatus.container` | `ViewStyle` | `{}` | | `messagePreviewDeliveryStatus.text` | `TextStyle` | `{}` | | `messagePreviewDeliveryStatus.username` | `TextStyle` | `{}` | ### `threadListSkeleton` The placeholder rows of `ThreadList` while it loads. | Key | Type | Default | | ------------------ | ----------- | ------- | | `animationTime` | `number` | `1000` | | `avatar` | `ViewStyle` | `{}` | | `body` | `ViewStyle` | `{}` | | `content` | `ViewStyle` | `{}` | | `contentContainer` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `footerIcon` | `ViewStyle` | `{}` | | `footerPill` | `ViewStyle` | `{}` | | `footerRow` | `ViewStyle` | `{}` | | `headerLabel` | `ViewStyle` | `{}` | | `textContainer` | `ViewStyle` | `{}` | | `timestamp` | `ViewStyle` | `{}` | ### `threadListUnreadBanner` `ThreadListUnreadBanner`, the banner at the top of `ThreadList` that appears when threads have new activity. | Key | Type | Default | | ----------- | ----------- | ------- | | `text` | `TextStyle` | `{}` | | `container` | `ViewStyle` | `{}` | ### `typingIndicator` `TypingIndicator`. | Key | Type | Default | | ---------------------- | ----------------------- | ------- | | `container` | `ViewStyle` | `{}` | | `loadingDotsBubble` | `ViewStyle` | `{}` | | `avatarStackContainer` | `ViewStyle` | `{}` | | `text` | `TextStyle` | `{}` | | `text.fontSize` | `TextStyle['fontSize']` | `14` | ### `userListSkeleton` The placeholder rows of the add-members search of `ChannelDetails`. | Key | Type | Default | | --------------- | ----------- | ------- | | `animationTime` | `number` | `1000` | | `avatar` | `ViewStyle` | `{}` | | `container` | `ViewStyle` | `{}` | | `content` | `ViewStyle` | `{}` | | `subtitle` | `ViewStyle` | `{}` | | `textContainer` | `ViewStyle` | `{}` | | `title` | `ViewStyle` | `{}` | ### `waveProgressBar` `WaveProgressBar`, the waveform of voice recordings. | Key | Type | Default | | ----------- | ----------- | ------- | | `container` | `ViewStyle` | `{}` | | `thumb` | `ViewStyle` | `{}` | | `waveform` | `ViewStyle` | `{}` | ## Markdown styles `messageItemView.content.markdown` holds the styles of a message's text, which the SDK renders as Markdown. It's a `MarkdownStyle`, with one style for each element: | Key | What it styles | | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | `text` | All text. The styles of bold, italic, underlined and heading text are merged over it. | | `paragraph` | A paragraph | | `paragraphCenter` | A paragraph that holds only bold text, which the renderer centers | | `strong`, `em`, `del`, `u` | Bold, italic, struck-through and underlined text | | `heading1` to `heading6` | The six levels of headings | | `autolink` | A link | | `mentions` | A mention | | `inlineCode`, `codeBlock` | Inline code, and a code block | | `blockQuoteSection`, `blockQuoteSectionBar`, `blockQuoteText` | A quote's row, the bar at its leading edge, and the view around its text | | `list`, `listRow`, `listItemBullet`, `listItemNumber`, `listItemText` | A list, one item's row, the bullet of an unordered item, the number of an ordered item, and the item's text | | `table`, `tableHeader`, `tableHeaderCell`, `tableRow`, `tableRowCell`, `tableRowLast` | A table, its header row and header cells, its rows and cells, and the last row | | `hr` | A horizontal rule | | `view` | The view around the whole text | A style you set is merged over the SDK's own. The SDK sets the font size, line height and color of `text`, with `chatTextOutgoing` or `chatTextIncoming` for the color, and the colors of links, code, quotes, tables and mentions from the semantic tokens. Two properties can't be changed through this key: - `writingDirection` in `text` always follows `I18nManager.isRTL`. - `color` in `mentions` is replaced by the mention's own color, `chatTextMentionUser`, `chatTextMentionBroadcast`, `chatTextMentionRole`, `chatTextMentionGroup` or `chatTextMention`. Set those tokens to color mentions. `MarkdownStyle` also has `heading`, `image`, `paragraphWithImage`, `listItem`, `blockQuoteBar` and `mailTo`, which the message text doesn't apply: headings take the style of their level, images in the text aren't rendered, lists and quotes are drawn by the SDK's own rules with the keys above, and the renderer reads email links' style from `mailto`, not `mailTo`. The other keys of the type, `br`, `newline`, `noMargin` and `sublist`, go to the Markdown renderer as they are. `messageItemView.content.textContainer.onlyEmojiMarkdown` is a `MarkdownStyle` too, merged over `markdown` for a message that holds only emoji. Its default sets the `text` font size to 50. This theme sets a font for all message text, and colors code blocks and quotes: ```tsx import type { DeepPartial, Theme } from "stream-chat-react-native"; export const theme: DeepPartial = { messageItemView: { content: { markdown: { blockQuoteSectionBar: { backgroundColor: "#7C3AED" }, blockQuoteText: { opacity: 0.8 }, codeBlock: { backgroundColor: "#1E1E2E", color: "#CDD6F4" }, inlineCode: { fontFamily: "Menlo" }, text: { fontFamily: "Inter-Regular" }, }, }, }, }; ``` The font has to be loaded by your app first. ## Keys no component reads These keys are in the type, but no component reads them, so setting them changes nothing. No component reads any key of `groupAvatar`, `iconBadge`, `iconSquare` and `messagePreview`. Below the other top-level keys, no component reads these: | Top-level key | Keys below it that no component reads | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `audioAttachment` | `speedChangeButton`, `speedChangeButtonText` | | `channelDetails` | `actionItem.trailingValue` | | `channelPreview` | `unreadContainer`, `unreadText` | | `imageGallery` | `grid.gridAvatar`, `grid.gridAvatarWrapper`, `grid.handleText` | | `messageComposer` | `attachButton`, `audioRecorder.circleStopIcon`, `audioRecorder.deleteIcon`, `audioRecorder.sendCheckIcon`, `editButton`, `fileAttachmentUploadPreview.fileSizeText`, `fileAttachmentUploadPreview.fileTextContainer`, `fileAttachmentUploadPreview.uploadProgressOverlay`, `nativeAttachmentPicker.buttonDimmerStyle` | | `messageItemView` | `actions.button.defaultBackgroundColor`, `actions.button.defaultBorderColor`, `actions.button.primaryBackgroundColor`, `actions.button.primaryBorderColor`, `actions.buttonText.defaultColor`, `actions.buttonText.primaryColor`, `content.editedTimestampContainer`, `content.errorIcon`, `content.errorIconContainer`, `content.eyeIcon`, `gallery.imageContainerStyle`, `giphy.actionButtonText`, `giphy.giphyMaskText`, `loadingIndicator.roundedView`, `videoThumbnail.roundedView` | | `messageList` | `scrollToBottomButton.unreadCountNotificationText` | | `messageMenu` | `reactionButton.filledBackgroundColor`, `reactionButton.unfilledBackgroundColor`, `userReactions.filledBackgroundColor`, `userReactions.iconFilledColor`, `userReactions.iconUnFilledColor`, `userReactions.radius`, `userReactions.reactionBubble`, `userReactions.reactionBubbleBorderRadius`, `userReactions.unfilledBackgroundColor` | | `notification` | `actionButtonText` | | `poll` | `createContent.maxVotes.validationText` | | `reply` | `audioIcon`, `fileIcon`, `locationIcon`, `photoIcon`, `pollIcon`, `videoIcon` | | `thread` | `newThread.backgroundGradientStart`, `newThread.backgroundGradientStop`, `newThread.threadHeight` | ## Best practices - Declare the theme at module scope, or build it with `useMemo`. A new object on every render merges the whole theme again. - Pass the same theme to `OverlayProvider` and `Chat`. `Chat` with its own `style` doesn't build on `OverlayProvider`'s. - Set colors through `semantics`, and pick the theme by the color scheme to use different colors in each. A color you set, in `semantics` or in a component style, shows in both schemes. - Set every token the parts you want to change read, not only the token they were built from. - Wrap a part of your UI in `ThemeProvider` with the current theme as `theme`, not with `style` alone. The tables on this page are generated from the `Theme` type and `defaultTheme` in [`package/src/contexts/themeContext/utils/theme.ts`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/utils/theme.ts), by a script that walks the type with the TypeScript compiler API. [Keys no component reads](#keys-no-component-reads) lists the keys whose own name appears nowhere else in the SDK's source, so it can miss a key whose name the source uses for something else. --- For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v10/reference/theme/theme-object/](https://getstream.io/chat/docs/sdk/react-native/v10/reference/theme/theme-object/).