Customization of Knock UI Components
How to customize the UI of our pre-built components.
InAppFeedTheme
Overview
InAppFeedTheme allows for UI customization of the KnockInAppFeedView.
Properties
rowThemeFeedNotificationRowThemeDefines the UI customization of the row items.
titleStringString?Sets the title of the view. If set to nil, then the title view will be hidden entirely. This is usefor if you want to have a completely custom title view.
titleFontFont?Sets the font of the title view.
titleColorColor?Sets the color of the title view.
upperBackgroundColorColor?Sets the background color of the top portion of the view (title view, filter view, and top action buttons view).
lowerBackgroundColorColor?Sets the background color of the bottom portion of the view (the list).
FeedNotificationRowTheme
Overview
FeedNotificationRowTheme allows for UI customization of the row items in the KnockInAppFeedView.
Properties
showAvatarViewBoolShow or hide the avatar/initials view in the upper left corner of the row.
avatarViewThemeAvatarViewThemeCustomize styling of avatarview.
notificationContentCSSString?Customize the css of the markdown html of the notification body.
backgroundColorColorBackground color of the FeedNoticationRow.
swipeRightConfigSwipeButtonConfig?Set this to nil to remove the right swipe action.
swipeLeftConfigSwipeButtonConfig?Set this to nil to remove the left swipe action.
unreadNotificationCircleColorColorColor of the unread circle indicator in the top left of the row.
sentAtDateFormatterDateFormatterDateFormatter for the sent timestamp at the bottom of the row.
sentAtDateFontFontFont for sent timestamp.
sentAtDateTextColorColorColor for sent timestamp.
primaryActionButtonConfigActionButtonConfigStyling for primary action buttons.
secondaryActionButtonConfigActionButtonConfigStyling for secondary action buttons.
tertiaryActionButtonConfigActionButtonConfigStyling for tertiary action buttons.
AvatarViewTheme
Overview
AvatarViewTheme allows for UI customization of the user avatar view in the row item.
Properties
avatarViewBackgroundColorColorBackground color of the view. This is more apparent when the view is showing initials instead of an image.
avatarViewInitialsFontFontFont for the initials view.
avatarViewInitialsColorColorText color for the initials view.
avatarViewSizeCGFloatOverall size of the avatar view.