Expo SDK API reference
In this section, you'll find the complete documentation for the components exposed in @knocklabs/expo, including the props available.
Note: You can see a reference for the methods available for the Knock class, as well as a Feed instance under the client JS docs.
Components
KnockProvider
The top-level provider that connects to Knock with the given API key and authenticates a user.
Props
Accepts KnockProviderProps
KnockFeedProvider
The feed-specific provider that connects to a feed for that user. Must be a child of the KnockProvider.
Props
Accepts KnockFeedProviderProps:
KnockExpoPushNotificationProvider
A context provider designed to streamline the integration of Expo push notifications within your React Native application. It facilitates the registration of device push tokens with the Knock backend, enabling the delivery of notifications. Moreover, this provider empowers developers to define custom behavior for handling notifications when they are received or interacted with, either by tapping or performing another action. By default, it provides a basic notification handling strategy, but it also allows for custom logic to be easily implemented according to specific application needs.
Note: Must be a child of the KnockProvider.
Props
Accepts KnockExpoPushNotificationProviderProps:
Hooks
useKnock
The KnockProvider exposes a useKnock hook for all child components.
Returns: Knock, an instance of the Knock JS client.
Example:
1import { KnockProvider, useKnock } from "@knocklabs/react";
2
3const App = ({ authenticatedUser }) => (
4 <KnockProvider
5 apiKey={process.env.KNOCK_PUBLIC_API_KEY}
6 userId={authenticatedUser.id}
7 >
8 <MyComponent />
9 </KnockProvider>
10);
11
12const MyComponent = () => {
13 const knock = useKnock();
14
15 return null;
16};useKnockFeed
The KnockFeedProvider exposes a useKnockFeed hook for all child components.
Returns: KnockFeedProviderState
Example:
1import {
2 KnockProvider,
3 KnockFeedProvider,
4 useKnockFeed,
5} from "@knocklabs/expo";
6
7const App = ({ authenticatedUser }) => (
8 <KnockProvider
9 apiKey={process.env.KNOCK_PUBLIC_API_KEY}
10 userId={authenticatedUser.id}
11 >
12 <KnockFeedProvider feedId={process.env.KNOCK_FEED_CHANNEL_ID}>
13 <MyFeedComponent />
14 </KnockFeedProvider>
15 </KnockProvider>
16);
17
18const MyFeedComponent = () => {
19 const { useFeedStore } = useKnockFeed();
20 const items = useFeedStore((state) => state.items);
21
22 return (
23 <View>
24 {items.map((item) => (
25 <NotificationCell key={item.id} item={item} />
26 ))}
27 </View>
28 );
29};useAuthenticatedKnockClient
Creates an authenticated Knock client.
Returns: Knock instance, authenticated against the user
Example:
1import { useAuthenticatedKnockClient } from "@knocklabs/expo";
2
3const MyComponent = () => {
4 const knock = useAuthenticatedKnockClient(
5 process.env.KNOCK_PUBLIC_API_KEY,
6 user.id,
7 user.knockToken,
8 );
9
10 return null;
11};useNotifications
Creates a Feed instance for the provided Knock client which creates a stateful, real-time connection to Knock to build in-app experiences.
Returns: Feed instance
Example:
1import {
2 useAuthenticatedKnockClient,
3 useNotifications,
4 useNotificationStore,
5} from "@knocklabs/expo";
6
7const MyComponent = () => {
8 const knock = useAuthenticatedKnockClient(
9 process.env.KNOCK_PUBLIC_API_KEY,
10 user.id,
11 user.knockToken,
12 );
13
14 const notificationFeed = useNotifications(
15 knock,
16 process.env.KNOCK_FEED_CHANNEL_ID,
17 );
18
19 const { metadata } = useNotificationStore(notificationFeed);
20
21 useEffect(() => {
22 notificationFeed.fetch();
23 }, [notificationFeed]);
24
25 return (
26 <View>
27 <Text>Total unread: {metadata.unread_count}</Text>
28 </View>
29 );
30};useTranslations
Exposed under KnockI18nProvider child components.
Returns:
useExpoPushNotifications
The KnockExpoPushNotificationProvider exposes a useExpoPushNotifications hook for all child components, enabling them to interact with push notification functionalities and state.
Returns: KnockExpoPushNotificationContextType
Example:
1import React, { useEffect } from "react";
2import { View, Text } from "react-native";
3import {
4 KnockExpoPushNotificationProvider,
5 useExpoPushNotifications,
6} from "@knocklabs/expo";
7
8const App = () => (
9 <KnockExpoPushNotificationProvider knockExpoChannelId="{YOUR_CHANNEL_ID}">
10 <MyComponent />
11 </KnockExpoPushNotificationProvider>
12);
13
14const MyComponent = () => {
15 const { expoPushToken, onNotificationReceived, onNotificationTapped } =
16 useExpoPushNotifications();
17
18 useEffect(() => {
19 onNotificationReceived((notification) => {
20 console.log("Notification Received: ", notification);
21 });
22
23 onNotificationTapped((response) => {
24 console.log("Notification Tapped: ", response);
25 });
26 }, []);
27
28 return (
29 <View>
30 <Text>Expo Push Token: {expoPushToken}</Text>
31 </View>
32 );
33};Types
I18nContent
Used to set translations available in the child components exposed under KnockFeedProvider and KnockSlackProvider. Used in the useTranslations hook.
Note: locale must be a valid locale code.
1interface Translations {
2 readonly emptyFeedTitle: string;
3 readonly emptyFeedBody: string;
4 readonly notifications: string;
5 readonly poweredBy: string;
6 readonly markAllAsRead: string;
7 readonly archiveNotification: string;
8 readonly all: string;
9 readonly unread: string;
10 readonly read: string;
11 readonly unseen: string;
12
13 readonly slackConnectChannel: string;
14 readonly slackChannelId: string;
15 readonly slackConnecting: string;
16 readonly slackDisconnecting: string;
17 readonly slackConnect: string;
18 readonly slackConnected: string;
19 readonly slackConnectContainerDescription: string;
20 readonly slackSearchbarDisconnected: string;
21 readonly slackSearchbarNoChannelsConnected: string;
22 readonly slackSearchbarNoChannelsFound: string;
23 readonly slackSearchbarChannelsError: string;
24 readonly slackSearchChannels: string;
25 readonly slackConnectionErrorOccurred: string;
26 readonly slackConnectionErrorExists: string;
27 readonly slackChannelAlreadyConnected: string;
28 readonly slackError: string;
29 readonly slackDisconnect: string;
30 readonly slackChannelSetError: string;
31 readonly slackAccessTokenNotSet: string;
32 readonly slackReconnect: string;
33}
34
35interface I18nContent {
36 readonly translations: Partial<Translations>;
37 readonly locale: string;
38}