React Native SDK pre-built components
How to use our pre-build UI components in your Knock implementation.
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
9import NotificationFeedContainer from "./NotificationFeedContainer";
10
11const App: React.FC = () => {
12 const [isNotificationFeedOpen, setIsNotificationFeedOpen] = useState(false);
13 const onTopActionButtonTap = useCallback(() => {
14 setIsNotificationFeedOpen(!isNotificationFeedOpen);
15 }, [isNotificationFeedOpen]);
16
17 return (
18 <KnockProvider
19 apiKey={process.env.KNOCK_PUBLIC_API_KEY}
20 host={process.env.KNOCK_HOST}
21 userId={process.env.KNOCK_USER_ID}
22 logLevel="debug"
23 >
24 <KnockFeedProvider feedId={process.env.KNOCK_FEED_CHANNEL_ID}>
25 <View style={styles.container}>
26 <StatusBar />
27 {!isNotificationFeedOpen && (
28 <NotificationIconButton
29 onClick={onTopActionButtonTap}
30 badgeCountType={"unread"}
31 />
32 )}
33 {isNotificationFeedOpen && (
34 <NotificationFeedContainer
35 handleClose={() =>
36 setIsNotificationFeedOpen(!isNotificationFeedOpen)
37 }
38 />
39 )}
40 </View>
41 </KnockFeedProvider>
42 </KnockProvider>
43 );
44};
45
46export default App;
47import { NotificationFeed, FilterStatus } from "@knocklabs/react-native";
48
49const MyNotificationFeed = () => {
50 return (
51 <NotificationFeed
52 initialFilterStatus={FilterStatus.Unread}
53 onCellActionButtonTap={({ button, item }) => {
54 console.log("Action button tapped", button, item);
55 }}
56 onRowTap={(item) => {
57 console.log("Row tapped", item);
58 }}
59 />
60 );
61};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 NotificationFeedContainerProps {
7 handleClose: () => void;
8}
9
10const NotificationFeedContainer: React.FC<NotificationFeedContainerProps> = ({
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 NotificationFeedContainer;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};