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

#