Skip to main content

Themes

You can override anything from some defined theme or create a new one from scratch. See the default theme implementation here. To override theme partially, destructure any defined theme and change what is needed, like on this example:

import { Chat, defaultTheme } from '@flyerhq/react-native-chat-ui'
<Chat
theme={{
...defaultTheme,
colors: { ...defaultTheme.colors, inputBackground: 'red' },
}}
/>

If you created a theme from scratch just pass it to the theme prop. We also provide darkTheme implementation, you can import it from the library and pass to the theme prop.

Types#

note

Question mark shows optional types.

NameTypeDescription
bordersThemeBordersBorder radiuses
colorsThemeColorsColors
fontsThemeFontsText styles
icons?ThemeIconsIcons

ThemeBorders#

NameTypeDescription
inputBorderRadiusnumberBottom bar border radius
messageBorderRadiusnumberMessage bubble border radius

ThemeColors#

NameTypeDescription
backgroundColorValueUsed as a background color of a chat component
captionColorValueColor usually goes with a caption text style
errorColorValueColor to indicate something bad happened (usually - shades of red)
inputBackgroundColorValueColor of the bottom bar where text input is
inputTextColorValueColor of the text input's text and attachment/send buttons
primaryColorValuePrimary color of the chat used as a background of sent messages
primaryTextColorValueColor of the text on a primary color
secondaryColorValueSecondary color, used as a background of received messages
secondaryTextColorValueColor of the text on a secondary color
subtitle2ColorValueColor of the subtitle2 text style

ThemeFonts#

NameTypeDescription
body1StyleProp<TextStyle>Used as a primary text style in messages
body2StyleProp<TextStyle>Slightly smaller body1
captionStyleProp<TextStyle>Smallest text style, used for displaying message's time
subtitle1StyleProp<TextStyle>Largest text style, used for displaying title of a link preview
subtitle2StyleProp<TextStyle>Subtitle, used for date dividers in the chat

ThemeIcons#

NameTypeDescription
attachmentButtonIcon?ImageSourcePropTypeIcon for select attachment button
deliveredIcon?ImageSourcePropTypeIcon for message's delivered status
documentIcon?ImageSourcePropTypeIcon inside file message
readIcon?ImageSourcePropTypeIcon for message's read status
sendButtonIcon?ImageSourcePropTypeIcon for send button