---
source_url: https://www.pubnub.com/docs/chat/components/react-native/ui-theming/style-injection
title: Style injection for PubNub Chat Components for React Native
updated_at: 2026-05-20T11:04:24.873Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Style injection for PubNub Chat Components for React Native

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

Built-in themes can be customized by [injecting styles](https://reactnative.dev/docs/style) 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:

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

## Message list

### Styling

```tsx
{
  messageList: {
    backgroundColor: colors.messageListBackground,
  },
  messageListScroller: {
    backgroundColor: colors.messageListBackground,
    flexGrow: 1,
  },
  message: {
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  messageOwn: {},
  messagePressed: {
    backgroundColor: colors.messagePressedBackground,
  },
  messageAvatar: {
    alignItems: "center",
    borderRadius: 50,
    height: 36,
    justifyContent: "center",
    marginRight: 16,
    width: 36,
  },
  messageOwnAvatar: {},
  messageAvatarImage: {
    borderRadius: 50,
    height: "100%",
    resizeMode: "cover",
    width: "100%",
  },
  messageAvatarText: {
    color: colors.messageListBackground,
    fontWeight: "bold",
  },
  messageMain: {
    flex: 1,
  },
  messageOwnMain: {},
  messageTitle: {
    alignItems: "baseline",
    flexDirection: "row",
    marginBottom: 6,
  },
  messageOwnTitle: {},
  messageAuthor: {
    color: colors.messageColor,
    fontSize: 16,
    fontWeight: "bold",
  },
  messageTime: {
    color: colors.messageColor,
    fontSize: 12,
    paddingHorizontal: 10,
  },
  messageBubble: {
    color: colors.messageColor,
  },
  reactionWrapper: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
  reaction: {
    borderColor: colors.reactionBorder,
    borderRadius: 15,
    borderWidth: 1,
    marginRight: 5,
    marginTop: 6,
    paddingLeft: 4,
    paddingRight: 8,
    paddingVertical: 3,
  },
  reactionText: {
    color: colors.messageColor,
  },
  reactionActive: {
    backgroundColor: colors.reactionActiveBackground,
    borderColor: colors.reactionActiveBackground,
  },
  spinner: {
    height: 20,
    width: 20,
  },
  spinnerWrapper: {
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 16,
    paddingBottom: 8,
  },
  unread: {
    alignSelf: "center",
    backgroundColor: colors.unreadBackground,
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 8,
    position: "absolute",
    top: 20,
    zIndex: 10,
  },
  unreadText: {
    color: colors.unreadColor,
    fontSize: 13,
  },
}
```

### Colors

```tsx
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",
  unreadColor: "#2a2a39",
  reactionBorder: "#28293d",
  reactionActiveBackground: "rgba(239, 58, 67, 0.3)",
};
```

## Message input

### Styling

```tsx
{
  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,
    fontSize: 16,
    flex: 1,
  },
  messageInputPlaceholder: {
    color: colors.inputPlaceholder,
  },
  sendButton: {
    marginLeft: 16,
  },
  sendButtonActive: {},
  icon: {
    height: 20,
    width: 20,
  },
  extraActions: {
    marginRight: 16,
  },
}
```

### Colors

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

```tsx
{
  memberListWrapper: {
    flex: 1,
  },
  memberList: {
    backgroundColor: colors.memberListBackground,
  },
  member: {
    alignItems: "center",
    backgroundColor: colors.memberBackground,
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  memberPressed: {},
  memberTitle: {
    flex: 1,
  },
  memberName: {
    color: colors.memberNameColor,
    fontSize: 16,
    fontWeight: "500",
  },
  memberDescription: {
    color: colors.memberDescriptionColor,
    fontSize: 14,
    paddingTop: 5,
  },
  memberThumb: {
    alignItems: "center",
    borderRadius: 50,
    height: 36,
    justifyContent: "center",
    marginRight: 16,
    width: 36,
  },
  memberThumbImage: {
    borderRadius: 50,
    height: "100%",
    resizeMode: "cover",
    width: "100%",
  },
  memberThumbText: {
    color: colors.memberListBackground,
    fontWeight: "bold",
  },
  memberActions: {},
  memberPresence: {
    width: 8,
    height: 8,
    backgroundColor: colors.memberPresenceColor,
    borderRadius: 10,
    position: "absolute",
    left: 50,
    top: 42,
  },
}
```

### Colors

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

```tsx
{
  channelListWrapper: {
    flex: 1,
  },
  channelList: {
    backgroundColor: colors.channelListBackground,
  },
  channel: {
    alignItems: "center",
    backgroundColor: colors.channelBackground,
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  channelActive: {
    backgroundColor: colors.channelActiveBackground,
  },
  channelPressed: {
    backgroundColor: colors.channelPressedBackground,
  },
  channelTitle: {
    flex: 1,
  },
  channelName: {
    color: colors.channelNameColor,
    fontSize: 16,
    fontWeight: "500",
  },
  channelDescription: {
    color: colors.channelDescriptionColor,
    fontSize: 14,
    paddingTop: 5,
  },
  channelThumb: {
    borderRadius: 50,
    height: 36,
    marginRight: 16,
    width: 36,
  },
  channelActions: {},
}
```

### Colors

```tsx
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",
  channelDescriptionColor: "#929292",
};
```

## Typing indicator

### Styling

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

### Colors

```tsx
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:

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