Style injection for PubNub Chat Components for React Native

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

Built-in themes can be customized by injecting styles that should override the defaults used to style different parts of each component. This document provides the full list of available subcomponents along with their default styling.

For example, to remove the default padding around MessageInput, you can simply pass your own values to the style property:

<MessageInput style={{ messageInputWrapper: { paddingHorizontal: 0, paddingVertical: 0 }}} />

Message List

Styling

{
  messageList: {
    backgroundColor: colors.messageListBackground,
  },
  messageListScroller: {
    backgroundColor: colors.messageListBackground,
    flexGrow: 1,
  },
  message: {
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  messageOwn: {},
  messagePressed: {

show all 105 lines

Colors

const lightTheme = {
  messagePressedBackground: "#e9eef4",
  messageListBackground: "#f0f3f7",
  messageColor: "#585858",
  unreadBackground: "#999999",
  unreadColor: "#ffffff",
  reactionBorder: "#ced6e0",
  reactionActiveBackground: "rgba(239, 58, 67, 0.2)",
};

const darkTheme = {
  messagePressedBackground: "#28293d",
  messageListBackground: "#1c1c28",
  messageColor: "rgba(228, 228, 235, 0.8)",
  unreadBackground: "#999999",

show all 19 lines

Message Input

Styling

{
  messageInputWrapper: {
    backgroundColor: colors.wrapperBackground,
    paddingHorizontal: 16,
    paddingVertical: 10,
    flexDirection: "row",
    alignItems: "center",
  },
  messageInput: {
    backgroundColor: colors.inputBackground,
    borderRadius: 20,
    color: colors.inputColor,
    paddingHorizontal: 14,
    paddingTop: 8,
    paddingBottom: 10,

show all 33 lines

Colors

const lightTheme = {
  wrapperBackground: "#f0f3f7",
  inputBackground: "#e4e9f0",
  inputColor: "#585858",
  inputPlaceholder: "#999999",
};

const darkTheme = {
  wrapperBackground: "#1c1c28",
  inputBackground: "#2a2a39",
  inputColor: "rgba(228, 228, 235, 0.8)",
  inputPlaceholder: "#555770",
};

Member List

Styling

{
  memberListWrapper: {
    flex: 1,
  },
  memberList: {
    backgroundColor: colors.memberListBackground,
  },
  member: {
    alignItems: "center",
    backgroundColor: colors.memberBackground,
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  memberPressed: {},

show all 57 lines

Colors

const lightTheme = {
  memberListBackground: "#ffffff",
  memberBackground: "transparent",
  memberNameColor: "#585858",
  memberDescriptionColor: "#9b9b9b",
  memberPresenceColor: "#01bd4c",
};

const darkTheme = {
  memberListBackground: "#2a2a39",
  memberBackground: "transparent",
  memberNameColor: "#dcddde",
  memberDescriptionColor: "#929292",
  memberPresenceColor: "#01bd4c",
};

Channel List

Styling

{
  channelListWrapper: {
    flex: 1,
  },
  channelList: {
    backgroundColor: colors.channelListBackground,
  },
  channel: {
    alignItems: "center",
    backgroundColor: colors.channelBackground,
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  channelActive: {

show all 41 lines

Colors

const lightTheme = {
  channelListBackground: "#ffffff",
  channelBackground: "transparent",
  channelActiveBackground: "#f0f3f7",
  channelPressedBackground: "#e4e9f0",
  channelNameColor: "#585858",
  channelDescriptionColor: "#9b9b9b",
};

const darkTheme = {
  channelListBackground: "#2a2a39",
  channelBackground: "transparent",
  channelActiveBackground: "#1c1c28",
  channelPressedBackground: "#232333",
  channelNameColor: "#dcddde",

show all 17 lines

Typing Indicator

Styling

{
  typingIndicator: {
    backgroundColor: colors.textBackground,
    color: colors.textColor,
    fontSize: 12,
    paddingHorizontal: 16,
    paddingVertical: 5,
  },
}

Colors

const lightTheme = {
  textBackground: "#f0f3f7",
  textColor: "#585858",
};

const darkTheme = {
  textBackground: "#1c1c28",
  textColor: "rgba(228, 228, 235, 0.8)",
};

Examples

Customize messages sent by current user

Differentiating the looks of messages, depending on who sent them, is a common use case across some types of chat apps.

PubNub Chat Components for React Native do not come with a separate default styling for messages that were sent by the current chat user. To change the appearance of such messages, apply style injection using sub-components dedicated to that purpose.

Here is an example of how to align your messages to the right side of the chat window:

<MessageList
  style={{
    messageOwn: { flexDirection: "row-reverse" },
    messageOwnTitle: { flexDirection: "row-reverse" },
    messageOwnMain: { alignItems: "flex-end" },
    messageOwnAvatar: { marginRight: 0, marginLeft: 16 },
  }}
/>