Docs
/
Contact supportLog inGet started
Platform
Integrations
Building in-app UI
API reference
CLI reference
Management API
Developer tools
Tutorials
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.