In-App UI
React Native
UI components
Customization
Customizing Knock UI components in React Native
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
unreadNotificationCircleColorstring
Color of the unread circle indicator in the top left of the row.showAvatarViewboolean
Determines whether to show the avatar/initials view in the upper left corner of the row.avatarViewStyleAvatarViewStyle
Customizes the styling of the avatar view.primaryActionButtonStyleActionButtonStyle
Customizes the styling of primary action buttons.secondaryActionButtonStyleActionButtonStyle
Customizes the styling of secondary action buttons.tertiaryActionButtonStyleActionButtonStyle
Customizes the styling of tertiary action buttons.sentAtDateFormatterIntl.DateTimeFormat
Formatter for the sent timestamp at the bottom of the row.sentAtDateTextStyleTextStyle
Text 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
titleStringstring
The title text displayed when the feed is empty.subtitleStringstring
The subtitle text displayed when the feed is empty.titleStyleTextStyle
Customizes the style of the title text.subtitleStyleTextStyle
Customizes the style of the subtitle text.iconStyleImageStyle
Customizes the style of the icon displayed in the empty state view.iconstring
The 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
buttonContainerStyleViewStyle
Customizes the container style of the action button.buttonTextStyleTextStyle
Customizes the text style of the action button.buttonIconStyleImageStyle
Customizes the icon style of the action button.AvatarViewStyle
Overview
AvatarViewStyle allows for UI customization of the avatar view in the NotificationFeed.
Properties
containerViewStyle
Customizes the overall container style of the avatar view.imageImageStyle
Customizes the image style of the avatar view.textTextStyle
Customizes the text style for initials when no avatar image is available.