Style injection for PubNub Chat Components for React Native

USED BY THE OLD IA, PLEASE DISREGARD

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:

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

Message list

Styling

1{
2  messageList: {
3    backgroundColor: colors.messageListBackground,
4  },
5  messageListScroller: {
6    backgroundColor: colors.messageListBackground,
7    flexGrow: 1,
8  },
9  message: {
10    flexDirection: "row",
11    paddingHorizontal: 16,
12    paddingVertical: 8,
13  },
14  messageOwn: {},
15  messagePressed: {
16    backgroundColor: colors.messagePressedBackground,
17  },
18  messageAvatar: {
19    alignItems: "center",
20    borderRadius: 50,
21    height: 36,
22    justifyContent: "center",
23    marginRight: 16,
24    width: 36,
25  },
26  messageOwnAvatar: {},
27  messageAvatarImage: {
28    borderRadius: 50,
29    height: "100%",
30    resizeMode: "cover",
31    width: "100%",
32  },
33  messageAvatarText: {
34    color: colors.messageListBackground,
35    fontWeight: "bold",
36  },
37  messageMain: {
38    flex: 1,
39  },
40  messageOwnMain: {},
41  messageTitle: {
42    alignItems: "baseline",
43    flexDirection: "row",
44    marginBottom: 6,
45  },
46  messageOwnTitle: {},
47  messageAuthor: {
48    color: colors.messageColor,
49    fontSize: 16,
50    fontWeight: "bold",
51  },
52  messageTime: {
53    color: colors.messageColor,
54    fontSize: 12,
55    paddingHorizontal: 10,
56  },
57  messageBubble: {
58    color: colors.messageColor,
59  },
60  reactionWrapper: {
61    flexDirection: "row",
62    flexWrap: "wrap",
63  },
64  reaction: {
65    borderColor: colors.reactionBorder,
66    borderRadius: 15,
67    borderWidth: 1,
68    marginRight: 5,
69    marginTop: 6,
70    paddingLeft: 4,
71    paddingRight: 8,
72    paddingVertical: 3,
73  },
74  reactionText: {
75    color: colors.messageColor,
76  },
77  reactionActive: {
78    backgroundColor: colors.reactionActiveBackground,
79    borderColor: colors.reactionActiveBackground,
80  },
81  spinner: {
82    height: 20,
83    width: 20,
84  },
85  spinnerWrapper: {
86    alignItems: "center",
87    justifyContent: "center",
88    paddingTop: 16,
89    paddingBottom: 8,
90  },
91  unread: {
92    alignSelf: "center",
93    backgroundColor: colors.unreadBackground,
94    borderRadius: 20,
95    paddingHorizontal: 16,
96    paddingVertical: 8,
97    position: "absolute",
98    top: 20,
99    zIndex: 10,
100  },
101  unreadText: {
102    color: colors.unreadColor,
103    fontSize: 13,
104  },
105}

show all 105 lines

Colors

1const lightTheme = {
2  messagePressedBackground: "#e9eef4",
3  messageListBackground: "#f0f3f7",
4  messageColor: "#585858",
5  unreadBackground: "#999999",
6  unreadColor: "#ffffff",
7  reactionBorder: "#ced6e0",
8  reactionActiveBackground: "rgba(239, 58, 67, 0.2)",
9};
10

11const darkTheme = {
12  messagePressedBackground: "#28293d",
13  messageListBackground: "#1c1c28",
14  messageColor: "rgba(228, 228, 235, 0.8)",
15  unreadBackground: "#999999",
16  unreadColor: "#2a2a39",
17  reactionBorder: "#28293d",
18  reactionActiveBackground: "rgba(239, 58, 67, 0.3)",
19};

show all 19 lines

Message input

Styling

1{
2  messageInputWrapper: {
3    backgroundColor: colors.wrapperBackground,
4    paddingHorizontal: 16,
5    paddingVertical: 10,
6    flexDirection: "row",
7    alignItems: "center",
8  },
9  messageInput: {
10    backgroundColor: colors.inputBackground,
11    borderRadius: 20,
12    color: colors.inputColor,
13    paddingHorizontal: 14,
14    paddingTop: 8,
15    paddingBottom: 10,
16    fontSize: 16,
17    flex: 1,
18  },
19  messageInputPlaceholder: {
20    color: colors.inputPlaceholder,
21  },
22  sendButton: {
23    marginLeft: 16,
24  },
25  sendButtonActive: {},
26  icon: {
27    height: 20,
28    width: 20,
29  },
30  extraActions: {
31    marginRight: 16,
32  },
33}

show all 33 lines

Colors

1const lightTheme = {
2  wrapperBackground: "#f0f3f7",
3  inputBackground: "#e4e9f0",
4  inputColor: "#585858",
5  inputPlaceholder: "#999999",
6};
7

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

Member list

Styling

1{
2  memberListWrapper: {
3    flex: 1,
4  },
5  memberList: {
6    backgroundColor: colors.memberListBackground,
7  },
8  member: {
9    alignItems: "center",
10    backgroundColor: colors.memberBackground,
11    flexDirection: "row",
12    paddingHorizontal: 16,
13    paddingVertical: 12,
14  },
15  memberPressed: {},
16  memberTitle: {
17    flex: 1,
18  },
19  memberName: {
20    color: colors.memberNameColor,
21    fontSize: 16,
22    fontWeight: "500",
23  },
24  memberDescription: {
25    color: colors.memberDescriptionColor,
26    fontSize: 14,
27    paddingTop: 5,
28  },
29  memberThumb: {
30    alignItems: "center",
31    borderRadius: 50,
32    height: 36,
33    justifyContent: "center",
34    marginRight: 16,
35    width: 36,
36  },
37  memberThumbImage: {
38    borderRadius: 50,
39    height: "100%",
40    resizeMode: "cover",
41    width: "100%",
42  },
43  memberThumbText: {
44    color: colors.memberListBackground,
45    fontWeight: "bold",
46  },
47  memberActions: {},
48  memberPresence: {
49    width: 8,
50    height: 8,
51    backgroundColor: colors.memberPresenceColor,
52    borderRadius: 10,
53    position: "absolute",
54    left: 50,
55    top: 42,
56  },
57}

show all 57 lines

Colors

1const lightTheme = {
2  memberListBackground: "#ffffff",
3  memberBackground: "transparent",
4  memberNameColor: "#585858",
5  memberDescriptionColor: "#9b9b9b",
6  memberPresenceColor: "#01bd4c",
7};
8

9const darkTheme = {
10  memberListBackground: "#2a2a39",
11  memberBackground: "transparent",
12  memberNameColor: "#dcddde",
13  memberDescriptionColor: "#929292",
14  memberPresenceColor: "#01bd4c",
15};

Channel list

Styling

1{
2  channelListWrapper: {
3    flex: 1,
4  },
5  channelList: {
6    backgroundColor: colors.channelListBackground,
7  },
8  channel: {
9    alignItems: "center",
10    backgroundColor: colors.channelBackground,
11    flexDirection: "row",
12    paddingHorizontal: 16,
13    paddingVertical: 12,
14  },
15  channelActive: {
16    backgroundColor: colors.channelActiveBackground,
17  },
18  channelPressed: {
19    backgroundColor: colors.channelPressedBackground,
20  },
21  channelTitle: {
22    flex: 1,
23  },
24  channelName: {
25    color: colors.channelNameColor,
26    fontSize: 16,
27    fontWeight: "500",
28  },
29  channelDescription: {
30    color: colors.channelDescriptionColor,
31    fontSize: 14,
32    paddingTop: 5,
33  },
34  channelThumb: {
35    borderRadius: 50,
36    height: 36,
37    marginRight: 16,
38    width: 36,
39  },
40  channelActions: {},
41}

show all 41 lines

Colors

1const lightTheme = {
2  channelListBackground: "#ffffff",
3  channelBackground: "transparent",
4  channelActiveBackground: "#f0f3f7",
5  channelPressedBackground: "#e4e9f0",
6  channelNameColor: "#585858",
7  channelDescriptionColor: "#9b9b9b",
8};
9

10const darkTheme = {
11  channelListBackground: "#2a2a39",
12  channelBackground: "transparent",
13  channelActiveBackground: "#1c1c28",
14  channelPressedBackground: "#232333",
15  channelNameColor: "#dcddde",
16  channelDescriptionColor: "#929292",
17};

show all 17 lines

Typing indicator

Styling

1{
2  typingIndicator: {
3    backgroundColor: colors.textBackground,
4    color: colors.textColor,
5    fontSize: 12,
6    paddingHorizontal: 16,
7    paddingVertical: 5,
8  },
9}

Colors

1const lightTheme = {
2  textBackground: "#f0f3f7",
3  textColor: "#585858",
4};
5

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

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:

1<MessageList
2  style={{
3    messageOwn: { flexDirection: "row-reverse" },
4    messageOwnTitle: { flexDirection: "row-reverse" },
5    messageOwnMain: { alignItems: "flex-end" },
6    messageOwnAvatar: { marginRight: 0, marginLeft: 16 },
7  }}
8/>