UI theming for PubNub Chat Components for iOS

PubNub Chat Components for iOS rely on UIKit from Apple - a graphical framework for creating unified app interfaces that defines classes of similar UIViews and UIControls, like buttons.

UIKit uses the imperative programming model where you must clearly describe each view for the app - what it will consist of and how it will look like. This is done by defining object-oriented view models that are hierarchical structures of views - all of them being ultimately child classes of the root UIVIew.

This hierarchical model is also reflected in how PubNub Chat Components for iOS are themed. Each UI component has an overarching component theme that consists of a list of subthemes defining the detailed theming options for each subelement of a given UI component. For example, ChannelListComponentTheme, that provides the overall theme for the ChannelList component, is composed of three subthemes: CollectionViewComponentTheme, BasicComponentTheme, and ChannelListCellComponentTheme. All these subthemes contain their own definitions of how a given subview for the ChannelList should look like and what default values it should take.

The overarching ChannelListComponentTheme itself is only one of the four main building blocks that provide default theming in PubNub Chat Components for iOS and compose the overall ThemeTemplate.

Theme template

ThemeTemplate is a class that provides default appearance and structural configuration for all UI components and their subcomponents through these themes:

  • ChannelListComponentTheme
  • MemberListComponentTheme
  • MessageListComponentTheme
  • MessageInputComponentTheme

ThemeTemplate compiles all these high-level UI component themes into a single object (ObservableObject):

public class ThemeTemplate: ObservableObject {
@Published public var channelListComponent: ChannelListComponentTheme
@Published public var memberListComponent: MemberListComponentTheme
@Published public var messageListComponent: MessageListComponentTheme
@Published public var messageInputComponent: MessageInputComponentTheme

public init(
channelListComponent: ChannelListComponentTheme = .pubnubDefaultGroupChannelList,
memberListComponent: MemberListComponentTheme = .pubnubDefaultGroupMemberList,
messageListComponent: MessageListComponentTheme = .pubnubGroupChat,
messageInputComponent: MessageInputComponentTheme = .pubnubGroupChat
) {
self.channelListComponent = channelListComponent
self.memberListComponent = memberListComponent
self.messageListComponent = messageListComponent
show all 18 lines

ThemeTemplate provides the default theming values for all components, like pubnubDefaultGroupChannelList for the ChannelList. This is done through a wrapper called themeProvider that's a property of a ChatProvider instance.

open class ComponentThemeProvider {
public static var shared = ComponentThemeProvider()
private init() {}

@Published public var template: ThemeTemplate = .init()
}

extension ChatProvider {
public var themeProvider: ComponentThemeProvider {
return ComponentThemeProvider.shared
}
}

On initializing a given view model, such as ChannelList, Chat Provider applies the default theme for the component (provider.themeProvider.template.channelListComponent) passed in the ThemeTemplate (template):

  public init(
provider: ChatProvider<ModelData,ManagedEntities>,
fetchedEntities: NSFetchedResultsController<ManagedEntities.Member>,
componentTheme: ChannelListComponentTheme? = nil
) {
self.fetchedEntities = fetchedEntities
self.componentTheme = componentTheme ?? provider.themeProvider.template.channelListComponent

super.init(provider: provider)

self.layoutShouldContainSupplimentaryViews = fetchedEntities.sectionNameKeyPath != nil
self.fetchedEntities.delegate = self
}

Light and dark layouts

PubNub Chat Components for iOS support a single theme for your app. Depending on whether you have the dark or light system-wide appearance settings active on your device, the app automatically adapts a dark or light version of all colors defined in themes for PubNub Chat Components for iOS. This is supported automatically through Apple's adaptive elements.

Let's look at the example of BubbleComponentTheme that's a nested subclass of the MessageListComponentTheme and is responsible for theming a message bubble.

public class BubbleComponentTheme: ObservableObject {
@Published public var alignment: UICollectionViewCell.Alignment
@Published public var containerType: BubbleContainerType
@Published public var backgroundColor: UIColor?
@Published public var tailSize: CGFloat
@Published public var layoutMargin: UIEdgeInsets

public init(
alignment: UICollectionViewCell.Alignment = .leading,
containerType: BubbleContainerType = .tailed,
backgroundColor: UIColor = .systemBlue,
tailSize: CGFloat = 5,
layoutMargin: UIEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
) {
self.alignment = alignment
show all 21 lines

As you can see, it is set to use systemBlue, one of Apple's standard colors, for the backgroundColor of the message bubble. Depending on whether you have the light or dark mode active, backgroundColor will automatically adapt the light and dark version of systemBlue.

Component themes

As already mentioned, PubNub Chat Components for iOS provide ThemeTemplate that's a skeleton class for the four high-level component themes: ChannelListComponentTheme, MemberListComponentTheme, MessageListComponentTheme, and MessageInputComponentTheme.

public class ThemeTemplate: ObservableObject {
@Published public var channelListComponent: ChannelListComponentTheme
@Published public var memberListComponent: MemberListComponentTheme
@Published public var messageListComponent: MessageListComponentTheme
@Published public var messageInputComponent: MessageInputComponentTheme
...
}

Each of these high-level themes has a nested structure of its own. They are composed of various subthemes that define all subelements (subviews) of the whole UICollectionView for a given component. For example, MemberListComponentTheme is made up of three subthemes - the list itself (collectionViewTheme), the header for the UICollectionView (sectionHeaderLabel), and the actual member list items (cellTheme).

public class MemberListComponentTheme: ViewControllerComponentTheme {
@Published public var collectionViewTheme: CollectionViewComponentTheme
@Published public var sectionHeaderLabel: LabelComponentTheme
@Published public var cellTheme: MemberListCellComponentTheme

Further down the structure, you can see that MemberListCellComponentTheme, which defines a single item theme, specifies backgroundColor, highlightColor, and selectedColor for the list item and references BasicComponentTheme for further default values.

public class MemberListCellComponentTheme: CollectionViewCellTheme {
// Appearance
@Published public var itemTheme: BasicComponentTheme

public init(
cellType: CollectionViewCellComponent.Type,
backgroundColor: UIColor = .clear,
highlightColor: UIColor = .clear,
selectedColor: UIColor = .clear,
itemTheme: BasicComponentTheme = .pubnubGroupMemberList
) {
self.itemTheme = itemTheme

super.init(
customType: cellType,
show all 21 lines

As you can see, the four major component themes are composed of multiple building blocks that either provide the default values that should be applied for the component theming or reference different subthemes that define these values down the hierarchy. All themes end with the Theme suffix and are named after the UI element they refer to, like NavigationBarTheme for the NavigationBar UI element.

Default values and configurable parameters

Default values for all component themes are passed through these group variables:

public class ThemeTemplate: ObservableObject {
...
public init(
channelListComponent: ChannelListComponentTheme = .pubnubDefaultGroupChannelList,
memberListComponent: MemberListComponentTheme = .pubnubDefaultGroupMemberList,
messageListComponent: MessageListComponentTheme = .pubnubGroupChat,
messageInputComponent: MessageInputComponentTheme = .pubnubGroupChat
)
...
}

Read on to learn what are the default implementations of all high-level component themes and which parameters you can configure to adjust theming to your use case.

ChannelList

The default implementation is available through ChannelListComponentTheme.pubnubDefaultGroupChannelList which is composed of the following values:

ChannelListComponentTheme(
controllerType: CollectionViewComponent.self,
backgroundColor: .clear,
navigationTitleView: BasicComponentTheme(
imageView: ImageComponentTheme(
customType: PubNubAvatarComponentView.self,
localImage: AppearanceTemplate.Image.avatar,
diameterSize: 42,
margin: .init(top: .zero, left: .zero, bottom: .zero, right: 5.0)
),
primaryLabel: LabelComponentTheme(
customType: PubNubLabelComponentView.self,
textFont: AppearanceTemplate.Font.title2.bold,
textColor: AppearanceTemplate.Color.label,
adjustsFontForContentSizeCategory: true,
show all 73 lines

You can configure the ChannelListComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
controllerTypeComponentViewControllerNoDefault class type that's used when creating new UIViewController instances.
backgroundColorUIColorYesView Controller’s background color.
navigationTitleViewBasicComponentTheme?YesTheming for UIView found on the UINavigationItem component.
collectionViewThemeCollectionViewComponentThemeYesTheming for UICollectionView found on the UIViewController component.
sectionHeaderLabelLabelComponentThemeYesTheming for UILabel you can attach to the UICollectionReusableView section Header-type.
cellThemeMemberListCellComponentThemeYesTheming for UICollectionViewCell found on the UIViewController component.

You can configure the CollectionViewComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
viewTypeUICollectionView.TypeNoDefault class type that's used when creating new UICollectionView instances.
layoutTypeCollectionViewLayoutComponent.TypeNoDefault class type that's used when creating new UICollectionViewLayout instances.
headerTypeUICollectionReusableView.TypeNoDefault class type that's used when creating new UICollectionView section headers.
footerTypeUICollectionReusableView.TypeNoDefault class type that's used when creating new UICollectionView section footers.
backgroundColorUIColorYesView background color.
scrollViewThemeScrollViewComponentThemeYesTheming for the UIScrollView properties of UICollectionView.
refreshControlThemeRefreshControlTheme?YesTheming for the UIRefreshControl properties of UICollectionView.
prefetchIndexThresholdInt?YesList index that when scrolled past triggers a remote sync request to fetch additional data to be stored into the local database.
isPrefetchingEnabledBoolNoA Boolean value that indicates whether cell and data pre-fetching are enabled. This allows for more efficient pre-fetching, but isn't required.

You can configure the ChannelListCellComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
cellTypeCollectionViewCellComponent.TypeNoDefault class type that's used when creating new UICollectionViewCell instances.
backgroundColorUIColor?YesView's background color.
highlightColorUIColor?YesView's background color during highlighted state.
selectedColorUIColor?YesView's background color during selected state.
itemThemeBasicComponentThemeYesTheming for the sub-views of the channel list cell.

You can configure the BasicComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
imageViewImageComponentThemeYesTheming for the User avatar UIImageView
primaryLabelLabelComponentThemeYesTheming for the primary UILabelView that can be displayed on the channel list cell.
secondaryLabelLabelComponentThemeYesTheming for the secondary UILabelView that can be displayed on the channel list cell.
tertiaryLabelLabelComponentThemeYesTheming for the tertiary UILabelView that can be displayed on the channel list cell.
quaternaryLabelLabelComponentThemeYesTheming for the quaternary UILabelView that can be displayed on the channel list cell.

You can configure the ImageComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
customTypeImageComponentView.TypeNoDefault class type that's used when creating new UIImageView instances.
localImageUIImage?YesLocally sourced UIImage you can use as a placeholder while fetching remote images.
cornerRadiusCGFloatYesThe radius to use when drawing rounded corners for the layer’s background.
marginUIEdgeInsetsYesThe default spacing to use when laying out content in the view.

You can configure the LabelComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
textFontUIFontYesFont of the text.
textColorUIColorYesColor of the text.
textAlignmentNSTextAlignmentYesTechnique for aligning the text.
adjustsFontForContentSizeCategoryBoolYesBoolean that determines whether the text's font size is reduced to fit inside the bounds of the UILabelView.

MemberList

The default implementation is available through MemberListComponentTheme.pubnubDefaultGroupMemberList which is composed of the following values:

MemberListComponentTheme(
controllerType: CollectionViewComponent.self,
backgroundColor: .clear,
navigationTitleView: BasicComponentTheme(
imageView: ImageComponentTheme(
customType: PubNubAvatarComponentView.self,
localImage: AppearanceTemplate.Image.avatar,
diameterSize: 42,
margin: .init(top: .zero, left: .zero, bottom: .zero, right: 5.0)
),
primaryLabel: LabelComponentTheme(
customType: PubNubLabelComponentView.self,
textFont: AppearanceTemplate.Font.title2.bold,
textColor: AppearanceTemplate.Color.label,
adjustsFontForContentSizeCategory: true,
show all 73 lines

You can configure the MemberListComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
controllerTypeComponentViewControllerNoDefault class type that's used when creating new UIViewController instances.
backgroundColorUIColorYesView Controller’s background color.
navigationTitleViewBasicComponentTheme?YesTheming for UIView found on the UINavigationItem component.
collectionViewThemeCollectionViewComponentThemeYesTheming for UICollectionView found on the UIViewController component.
sectionHeaderLabelLabelComponentThemeYesTheming for UILabel you can attach to the UICollectionReusableView section Header-type.
cellThemeMemberListCellComponentThemeYesTheming for UICollectionViewCell found on the UIViewController component.

You can configure the CollectionViewComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
viewTypeUICollectionView.TypeNoDefault class type that's used when creating new UICollectionView instances.
layoutTypeCollectionViewLayoutComponent.TypeNoDefault class type that's used when creating new UICollectionViewLayout instances.
headerTypeUICollectionReusableView.TypeNoDefault class type that's used when creating new UICollectionView section headers.
footerTypeUICollectionReusableView.TypeNoDefault class type that's used when creating new UICollectionView section footers.
backgroundColorUIColorYesView background color.
scrollViewThemeScrollViewComponentThemeYesTheming for UIScrollView properties of UICollectionView.
refreshControlThemeRefreshControlTheme?YesTheming for UIRefreshControl properties of UICollectionView.
prefetchIndexThresholdInt?YesList index that when scrolled past triggers a remote sync request to fetch additional data to be stored into the local database.
isPrefetchingEnabledBoolNoA Boolean value that indicates whether cell and data pre-fetching are enabled. This allows for more efficient pre-fetching, but isn't required.

You can configure the MemberListCellComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
cellTypeCollectionViewCellComponent.TypeNoDefault class type that's used when creating new UICollectionViewCell instances.
backgroundColorUIColor?YesView's background color.
highlightColorUIColor?YesView's background color during highlighted state.
selectedColorUIColor?YesView's background color during selected state.
itemThemeBasicComponentThemeYesTheming for the sub-views of the member list cell..

You can configure the BasicComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
imageViewImageComponentThemeYesTheming for the User avatar UIImageView
primaryLabelLabelComponentThemeYesTheming for the primary UILabelView you can display on the member list cell.
secondaryLabelLabelComponentThemeYesTheming for the secondary UILabelView you can display on the member list cell.
tertiaryLabelLabelComponentThemeYesTheming for the tertiary UILabelView you can display on the member list cell.
quaternaryLabelLabelComponentThemeYesTheming for the quaternary UILabelView you can display on the member list cell.

You can configure the ImageComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
customTypeImageComponentView.TypeNoDefault class type that's used when creating new UIImageView instances.
localImageUIImage?YesLocally sourced UIImage you can use as a placeholder while fetching remote images.
cornerRadiusCGFloatYesThe radius to use when drawing rounded corners for the layer’s background.
marginUIEdgeInsetsYesThe default spacing to use when laying out content in the view.

You can configure the LabelComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
textFontUIFontYesFont of the text.
textColorUIColorYesColor of the text.
textAlignmentNSTextAlignmentYesTechnique for aligning the text.
adjustsFontForContentSizeCategoryBoolYesBoolean that determines whether the text's font size is reduced to fit inside the bounds of UILabelView.

MessageList

The default implementation is available through MessageInputComponentTheme.pubnubGroupChat which is composed of the following values:

MessageListComponentTheme(
controllerType: CollectionViewComponent.self,
backgroundColor: .systemBackground,
messageInputComponent: .pubnubGroupChat,
collectionViewTheme: CollectionViewComponentTheme(
layoutType: ChatLayout.self,
backgroundColor: .secondarySystemBackground,
scrollViewTheme: .enabled,
refreshControlTheme: .init(
pullToRefreshTitle: .init(string: "Pull to Refresh"),
pullToRefreshTintColor: nil
),
prefetchIndexThreshold: 35,
isPrefetchingEnabled: false
),
show all 69 lines

You can configure the MessageListComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
controllerTypeComponentViewController.TypeNoDefault class type that's used when creating new UIViewController instances.
backgroundColorUIColor?YesView Controller’s background color.
collectionViewThemeCollectionViewComponentThemeYesTheming for UICollectionView found on the UIViewController component.
incomingItemThemeMessageListCellComponentThemeYesTheming for messages that are sent from users other than the current user.
authorItemThemeMessageListCellComponentTheme?YesTheming for messages that are sent from the current user.
typingIndicatorCellThemeTypingIndicatorCellThemeYesTheming for UICollectionViewCell that's displayed when another member is typing.

You can configure the MessageListCellComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
textMessageContentCellTypeCollectionViewCellComponent.TypeNoDefault class for the UICollectionViewCell specific to text based messages.
richMessageContentCellTypes[MessageContentType: CollectionViewCellComponent.Type]NoDictionary that maps UICollectionViewCell class types to known rich message content types.
backgroundColorUIColor?YesView's background color.
highlightColorUIColor?YesView's background color during highlighted state.
selectedColorUIColor?YesView's background color during selected state.
alignmentUICollectionViewCell.AlignmentYesVertical list edge the message is anchored to.
maxWidthPercentageCGFloatYesMaximum width a Cell spans inside the message list frame.
bubbleContainerThemeBubbleComponentThemeYesTheming for the bubble view container you can wrap around message content.
contentTextThemeTextViewComponentThemeYesTheming for UITextView that displays message text content.
contentLinkThemeLinkViewComponentThemeYesTheming for LPLinkView that displays message URL content.
itemThemeBasicComponentThemeYesTheming for the accessory views around the message content.
dateFormatterDateFormatterYesDataFormatter used when displaying message dates.

You can configure the TypingIndicatorCellTheme theme using the following parameters.

NameTypeAuto update on changeDescription
cellTypeCollectionViewCellComponent.TypeNoDefault class for UICollectionViewCell when creating typing indicator cells.
contentViewTypeUIViewNoDefault class for contentView inside the UICollectionViewCell typing indicator.
backgroundColorUIColor?YesView's background color.
highlightColorUIColor?YesView's background color during highlighted state.
selectedColorUIColor?YesView's background color during selected state.
alignmentUICollectionViewCell.AlignmentYesThe vertical list edge contentViewType is anchored to.
primaryContentColorUIColor?YesPrimary color by the contentViewType view.
secondaryContentColorUIColor?YesSecondary color used by the contentViewType view.
animationEnabledBoolNoWhether the typing indicator is animated.
pulsingBoolNoWhether the typing indicator animation pulses.
bouncesBoolNoWhether the typing indicator animation bounces.
bounceDelayTimeIntervalNoDelay between each distinct sub-view's bounce animation.
bounceOffsetCGFloatNoDistance each distinct sub-view bounces during its animation.
fadesBoolNoWhether the typing indicator animation fades as it animates.

MessageInput

The default implementation is available through MessageInputComponentTheme.pubnubGroupChat which is composed of the following values:

MessageInputComponentTheme(
viewType: MessageInputBarComponent.self,
backgroundColor: .secondarySystemBackground,
placeholderText: "Type Message",
placeholderTextColor: .systemGray2,
placeholderTextFont: AppearanceTemplate.Font.body,
textInputTheme: InputTextViewComponentTheme(
customType: UITextView.self,
backgroundColor: .tertiarySystemBackground,
textColor: .systemGray2,
textFont: AppearanceTemplate.Font.body,
usesStandardTextScaling: true,
dataDetectorTypes: .all,
linkTextAttributes: [:],
isEditable: true,
show all 45 lines

You can configure the MessageInputComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
viewTypeMessageInputComponentNoDefault class type that's used when creating new view instances.
backgroundColorUIColor?YesView’s background color.
placeholderTextString?YesText that appears whens the user hasn't entered the text.
placeholderTextColorUIColor?YesPlaceholder text's color.
placeholderTextFontUIFont?YesPlaceholder text's font.
textInputThemeInputTextViewComponentThemeYesTheming for UITextView used as the input view.
sendButtonThemeButtonComponentThemeYesTheming for UIButton responsible for sending message input.
typingIndicatorServiceTypingIndicatorServiceNoService that coordinates typing indicator events across all channels.
publishTypingIndicatorBoolYesWhether typing indicator signals are sent to other chat users.
displayTypingIndicatorBoolYesWhether typing indicator signals are displayed from other chat users.

You can configure the ButtonComponentTheme theme using the following parameters.

NameTypeAuto update on changeDescription
backgroundColorUIColor?YesView’s background color.
tintColorUIColor?YesTint color to apply to the button title and image.
titleButtonTitleStateThemeYesTitle during normal button state.
titleHighlightedButtonTitleStateThemeYesTitle during highlighted button state.
titleFontUIFont?YesFont of the button text.
imageButtonImageStateThemeYesImage during normal button state.
imageHighlightedButtonImageStateThemeYesImage during highlighted button state.

You can configure the ButtonTitleStateTheme theme using the following parameters.

NameTypeAuto update on changeDescription
titleString?YesTitle that the button displays.
attributedTitleNSAttributedString?YesStyled text that the button displays.
titleColorUIColor?YesColor of the text.
titleShadowColorUIColor?YesShadow color of the text.

You can configure the ButtonImageStateTheme theme using the following parameters.

NameTypeAuto update on changeDescription
imageUIImage?YesImage used for a button state.
backgroundImageUIImage?YesBackground image used for a button state.

Customize component themes

UI component and element themes provide theming skeletons that set limitations as to what you can theme in PubNub Chat Components for iOS. For example, if you look at BasicComponentTheme, you can see it only supports theming for one image and four different labels. This means that if you define an additional image for your cell item, you will only be able to theme one of them by default.

public class BasicComponentTheme: ObservableObject {
// Appearance
@Published public var imageView: ImageComponentTheme
@Published public var primaryLabel: LabelComponentTheme
@Published public var secondaryLabel: LabelComponentTheme
@Published public var tertiaryLabel: LabelComponentTheme
@Published public var quaternaryLabel: LabelComponentTheme

Look at the three use cases to see how you can customize some basic appearance values provided by our default themes.

Change message list bubble color

Customize the message list bubble color to be different depending on whether the message in a chat is sent by you (authorItemTheme) or someone else (incomingItemTheme).

// Create a configured Chat Provider
let config =PubNubConfiguration(
publishKey: PUBNUB_PUBLISH_KEY,
subscribeKey: PUBNUB_SUBSCRIBE_KEY,
uuid: "myFirstUser"
)

var provider = PubNubChatProvider(
pubnubProvider: PubNub(configuration: pubnubConfiguration)
)

// Set the message bubble color for incoming messages
provider.themeProvider.template.messageListComponent
.incomingItemTheme.bubbleContainerTheme.backgroundColor = .systemGray

show all 18 lines

As you can see, to change these colors you must call the Chat Provider through the themeProvider wrapper and reference the default template for the messageListComponent. Since backgroundColor for the incoming (incomingItemTheme) and outgoing (authorItemTheme) message bubble is defined in the bubbleContainerTheme, you can define them separately with different system colors.

Change the message sender's name

Change the font for the message sender name that appears above the message:

// Create a configured Chat Provider
let config =PubNubConfiguration(
publishKey: PUBNUB_PUBLISH_KEY,
subscribeKey: PUBNUB_SUBSCRIBE_KEY,
uuid: "myFirstUser"
)

var provider = PubNubChatProvider(
pubnubProvider: PubNub(configuration: pubnubConfiguration)
)

// Change the font for the name of the message sender
provider.themeProvider.template.messageListComponent
.incomingItemTheme.itemTheme.primaryLabel.textFont = UIFont.preferredFont(forTextStyle: .headline)

As you can see, to change the font, you must call the Chat Provider through the themeProvider wrapper and reference the default template for messageListComponent. Define the headline font by overriding the default textFont parameter value. This parameter is nested down the theme hierarchy and its structure looks as follows:

  • MessageListComponentTheme contains incomingItemTheme of the MessageListCellComponentTheme type:
public class MessageListComponentTheme: ViewControllerComponentTheme {
...
@Published public var incomingItemTheme: MessageListCellComponentTheme
...
}
  • MessageListCellComponentTheme contains itemTheme of the BasicComponentTheme type:
public class MessageListCellComponentTheme: CollectionViewCellTheme {
...
@Published public var itemTheme: BasicComponentTheme
...
}
  • BasicComponentTheme contains primaryLabel of the LabelComponentTheme type:
public class BasicComponentTheme: ObservableObject {
...
@Published public var primaryLabel: LabelComponentTheme
...
}
  • Finally, LabelComponentTheme contains the textFont parameter that's of the UIFont? type. This is the parameter you must override.
open class LabelComponentTheme: ObservableObject {
...
@Published public var textFont: UIFont?
...

Change placeholder text for message input

Replace the default "Type Message" placeholder text of the message input associated with the MessageList component.

// Create a configured Chat Provider
let config = PubNubConfiguration(
publishKey: PUBNUB_PUBLISH_KEY,
subscribeKey: PUBNUB_SUBSCRIBE_KEY,
userId: "myFirstUser"
)

var provider = PubNubChatProvider(
pubnubProvider: PubNub(configuration: pubnubConfiguration)
)

// Change the string to be the desired placeholder text
provider.themeProvider.template.messageListComponent
.messageInputComponent.placeholderText = "Message..."

To change this text, call the Chat Provider through the themeProvider wrapper and reference the default template for the messageListComponent. Override the default value of "Type Message" that the placeholderText defines in the messageInputComponent that's a subclass of messageListComponent.