Customization of Knock UI Components
How to customize the UI of our pre-built components.
InAppFeedTheme
Overview
InAppFeedTheme allows for UI customization of the InAppFeedView.
Properties
rowThemeFeedNotificationRowThemeDefines the UI customization of the row items.
filterTabThemeFilterTabThemeDefines the UI customization of the top filter tabs.
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.
textStyleTextStyle?Sets the textStyle for the title of the 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
backgroundColorColorBackground color of the FeedNoticationRow.
bodyTextStyleTextStyle?Set the textStyle of the body of the message.
unreadNotificationCircleColorColorColor of the unread circle indicator in the top left of the row.
showAvatarViewBoolShow or hide the avatar/initials view in the upper left corner of the row.
avatarViewThemeAvatarViewThemeCustomize styling of avatarview.
primaryActionButtonConfigActionButtonConfigStyling for primary action buttons.
secondaryActionButtonConfigActionButtonConfigStyling for secondary action buttons.
sentAtDateFormatterDateTimeFormatterDateTimeFormatter for the sent timestamp at the bottom of the row.
sentAtDateTextStleTextStyleTextStyle for sent timestamp.
markAsReadSwipeConfigSwipeConfig?This is the config to set the mark as read/unread swipe actions. Set to null to remove the action entirely.
archiveSwipeConfigSwipeConfig?This is the config to set the archive/unarchive swipe actions. Set to null to remove the action entirely.
AvatarViewTheme
Overview
AvatarViewTheme allows for UI customization of the user avatar view in the row item.
Properties
avatarViewBackgroundColorColor?Background color of the view. This is more apparent when the view is showing initials instead of an image.
avatarViewInitialsTextStyleTextStyle?TextStyle for the initials view.
avatarViewSizeCGFloatOverall size of the avatar view.
FilterTabTheme
Overview
FilterTabTheme allows for UI customization of the filter tab bar at the top of the view.
Properties
selectedColorColor?The color the tab will be in the selected state
unselectedColorColor?The color the tab will be in the unselected state.
textStyleTextStyleThe TextStyle of the filter tab text.
EmptyFeedViewTheme
Overview
EmptyFeedViewTheme allows for UI customization of the EmptyFeedView for each filter.
Properties
backgroundColorColor?The background color of the view.
titleString?The title of the EmptyFeedView.
titleTextStyleTextStyleThe TextStyle of the title.
subtitleTextStyleThe subtitle of the EmptyFeedView.
subtitleTextStyleTextStyleThe TextStyle of the subtitle.
iconImageVector?The TextStyle of the filter tab text.
iconResIdInt?The TextStyle of the filter tab text.
iconSizeInt?The TextStyle of the filter tab text.
iconColorColor?The TextStyle of the filter tab text.
FilterTabTheme
Overview
FilterTabTheme allows for UI customization of the filter tab bar at the top of the view.
Properties
selectedColorColor?The color the tab will be in the selected state
unselectedColorColor?The color the tab will be in the unselected state.
textStyleTextStyleThe TextStyle of the filter tab text.
SwipeConfig
Overview
SwipeConfig allows for UI customization of the left and right swipe actions of the FeedNoticationRow.
Properties
actionFeedNotificationRowSwipeAction?The action you want taken on the swipe
titleString?The title of the swipe action (e.g. `Read`).
inverseTitleString?The inverse title of the swipe action (e.g. `Unread`).
titleStyleTextStyle?The textStyle of the title.
imageIdInt?The image resourse.
inverseImageIdInt?The inverse image resourse.
imageSizeInt?The size of the image.
imageColorColor?The color of the image.
swipeColorColor?The background color of the swipe action.