In-App UI
React Native
UI components
Components

React Native SDK pre-built components

How to use Knock's UI components in your React Native application.

NotificationFeed

#

Overview

#

NotificationFeed is a React component that renders a list of notifications using data from Knock. It provides a customizable and interactive user interface for displaying notifications within your React Native application.

Properties

#
initialFilterStatusFilterStatus
The initial filter applied to the notification feed. Defaults to 'All'.
notificationRowStyleNotificationFeedCellStyle
Customizes the style of the notification rows in the feed.
headerConfigNotificationFeedHeaderConfig
Configures the header of the notification feed.
emptyFeedStyleEmptyNotificationFeedStyle
Customizes the appearance of the empty state when there are no notifications.
onCellActionButtonTap(params: { button: ActionButton, item: FeedItem }) => void
Callback triggered when an action button in a notification row is tapped.
onRowTap(item: FeedItem) => void
Callback triggered when a notification row is tapped.

Examples

#

NotificationIconButton

#

Overview

#

NotificationIconButton is a React component that renders a button with a badge showing the count of unread or unseen notifications. This can be used to open the NotificationFeed when tapped.

Properties

#
onClick() => void
Callback triggered when the button is pressed.
badgeCountTypeBadgeCountType
Specifies whether to display the count of 'unread', 'unseen', or 'all' notifications.
styleOverrideViewStyle
Customizes the overall style of the button.

Example

#