Customization of Knock UI Components
How to customize the UI of our pre-built components for React Native.
NotificationFeedCellStyle
Overview
NotificationFeedCellStyle allows for UI customization of the rows in the NotificationFeed.
Properties
unreadNotificationCircleColorstringColor of the unread circle indicator in the top left of the row.
showAvatarViewbooleanDetermines whether to show the avatar/initials view in the upper left corner of the row.
avatarViewStyleAvatarViewStyleCustomizes the styling of the avatar view.
primaryActionButtonStyleActionButtonStyleCustomizes the styling of primary action buttons.
secondaryActionButtonStyleActionButtonStyleCustomizes the styling of secondary action buttons.
tertiaryActionButtonStyleActionButtonStyleCustomizes the styling of tertiary action buttons.
sentAtDateFormatterIntl.DateTimeFormatFormatter for the sent timestamp at the bottom of the row.
sentAtDateTextStyleTextStyleText style for the sent timestamp.
htmlStylesRecord<string, TextStyle | ViewStyle | ImageStyle>Customizes the CSS styles of the HTML content in the notification body.
EmptyNotificationFeedStyle
Overview
EmptyNotificationFeedStyle allows for UI customization of the empty state view when there are no notifications in the NotificationFeed.
Properties
titleStringstringThe title text displayed when the feed is empty.
subtitleStringstringThe subtitle text displayed when the feed is empty.
titleStyleTextStyleCustomizes the style of the title text.
subtitleStyleTextStyleCustomizes the style of the subtitle text.
iconStyleImageStyleCustomizes the style of the icon displayed in the empty state view.
iconstringThe URL or local path to the icon image displayed in the empty state view.
ActionButtonStyle
Overview
ActionButtonStyle allows for UI customization of the action buttons in the NotificationFeed.
Properties
buttonContainerStyleViewStyleCustomizes the container style of the action button.
buttonTextStyleTextStyleCustomizes the text style of the action button.
buttonIconStyleImageStyleCustomizes the icon style of the action button.
AvatarViewStyle
Overview
AvatarViewStyle allows for UI customization of the avatar view in the NotificationFeed.
Properties
containerViewStyleCustomizes the overall container style of the avatar view.
imageImageStyleCustomizes the image style of the avatar view.
textTextStyleCustomizes the text style for initials when no avatar image is available.