React Native SDK pre-built components
How to use Knock's UI components in your React Native application.
ℹ️
Migration note. The
NotificationFeedContainer component is deprecated and has been replaced with NotificationFeed. The container component will be removed in a future release.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
initialFilterStatusFilterStatusThe initial filter applied to the notification feed. Defaults to 'All'.
notificationRowStyleNotificationFeedCellStyleCustomizes the style of the notification rows in the feed.
headerConfigNotificationFeedHeaderConfigConfigures the header of the notification feed.
emptyFeedStyleEmptyNotificationFeedStyleCustomizes the appearance of the empty state when there are no notifications.
onCellActionButtonTap(params: { button: ActionButton, item: FeedItem }) => voidCallback triggered when an action button in a notification row is tapped.
onRowTap(item: FeedItem) => voidCallback triggered when a notification row is tapped.
Examples
1import {
2 KnockFeedProvider,
3 KnockProvider,
4 NotificationIconButton,
5} from "@knocklabs/react-native";
6import React, { useCallback, useState } from "react";
7import { StyleSheet, View, StatusBar } from "react-native";
8
9// Your custom notification container component; see code example below
10import NotificationContainer from "./NotificationContainer";
11
12const App: React.FC = () => {
13 const [isNotificationFeedOpen, setIsNotificationFeedOpen] = useState(false);
14 const onTopActionButtonTap = useCallback(() => {
15 setIsNotificationFeedOpen(!isNotificationFeedOpen);
16 }, [isNotificationFeedOpen]);
17
18 return (
19 <KnockProvider
20 apiKey={process.env.KNOCK_PUBLIC_API_KEY}
21 host={process.env.KNOCK_HOST}
22 userId={process.env.KNOCK_USER_ID}
23 logLevel="debug"
24 >
25 <KnockFeedProvider feedId={process.env.KNOCK_FEED_CHANNEL_ID}>
26 <View style={styles.container}>
27 <StatusBar />
28 {!isNotificationFeedOpen && (
29 <NotificationIconButton
30 onClick={onTopActionButtonTap}
31 badgeCountType={"unread"}
32 />
33 )}
34 {isNotificationFeedOpen && (
35 <NotificationContainer
36 handleClose={() =>
37 setIsNotificationFeedOpen(!isNotificationFeedOpen)
38 }
39 />
40 )}
41 </View>
42 </KnockFeedProvider>
43 </KnockProvider>
44 );
45};
46
47export default App;
48import { NotificationFeed, FilterStatus } from "@knocklabs/react-native";
49
50const MyNotificationFeed = () => {
51 return (
52 <NotificationFeed
53 initialFilterStatus={FilterStatus.Unread}
54 onCellActionButtonTap={({ button, item }) => {
55 console.log("Action button tapped", button, item);
56 }}
57 onRowTap={(item) => {
58 console.log("Row tapped", item);
59 }}
60 />
61 );
62};1import { ActionButton, FeedItem } from "@knocklabs/client";
2import { NotificationFeed } from "@knocklabs/react-native";
3import React, { useCallback } from "react";
4import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
5
6export interface NotificationContainerProps {
7 handleClose: () => void;
8}
9
10const NotificationContainer: React.FC<NotificationContainerProps> = ({
11 handleClose,
12}) => {
13 const onCellActionButtonTap = useCallback(
14 (params: { button: ActionButton; item: FeedItem }) => {
15 // handle button tap
16 },
17 [],
18 );
19
20 const onRowTap = useCallback((item: FeedItem) => {
21 // handle row tap
22 }, []);
23
24 return (
25 <View style={styles.container}>
26 <View style={styles.header}>
27 <Text style={styles.title}>Notifications</Text>
28 <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
29 <Text style={styles.closeButtonText}>X</Text>
30 </TouchableOpacity>
31 </View>
32 <NotificationFeed
33 onCellActionButtonTap={onCellActionButtonTap}
34 onRowTap={onRowTap}
35 />
36 </View>
37 );
38};
39
40export default NotificationContainer;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() => voidCallback triggered when the button is pressed.
badgeCountTypeBadgeCountTypeSpecifies whether to display the count of 'unread', 'unseen', or 'all' notifications.
styleOverrideViewStyleCustomizes the overall style of the button.
Example
1import { NotificationIconButton } from "@knocklabs/react-native";
2
3const MyApp = () => {
4 return (
5 <NotificationIconButton
6 onClick={() => {
7 console.log("Notification icon button clicked");
8 }}
9 badgeCountType="unread"
10 />
11 );
12};