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.
The top-level provider that connects to Knock with the given API key and authenticates a user.
Accepts KnockProviderProps
apiKey*string
The public API key for the environmentuserId*string
The ID of the user for which to retrieve a feeduserTokenstring
A JWT that identifies the authenticated user, signed with the private key provided in the Knock dashboard. Required to secure your production environment. Learn more.hoststring
A custom API host for Knocki18nI18nContent
An optional set of translations to override the default `en` translations used in the feed components
The feed-specific provider that connects to a feed for that user. Must be a child of the KnockProvider
.
Accepts KnockFeedProviderProps
:
feedId*string
The channel ID of the in-app feed to be displayeddefaultFeedOptionsFeedClientOptions
Set defaults for `tenant`, `has_tenant`, `source`, `archived` to scope all subsequent feed queriescolorModeColorMode
Sets the theme as either light or dark mode (defaults to light)
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
.
Accepts KnockExpoPushNotificationProviderProps
:
knockExpoChannelId*string
The channel ID of your Expo channel from Knock.customNotificationHandlerPromise<Notifications.NotificationBehavior>
Allows developers to define custom behavior for handling notifications, including whether to show alerts, play sounds, or set badge countsautoRegisterboolean
When true, the Expo provider automatically retrieves a push token from Expo and stores it as channel data on the user.
The KnockProvider
exposes a useKnock
hook for all child components.
Returns: Knock
, an instance of the Knock JS client.
Example:
import { KnockProvider, useKnock } from "@knocklabs/react";
const App = ({ authenticatedUser }) => (
<KnockProvider
apiKey={process.env.KNOCK_PUBLIC_API_KEY}
userId={authenticatedUser.id}
>
<MyComponent />
</KnockProvider>
);
const MyComponent = () => {
const knock = useKnock();
return null;
};
The KnockFeedProvider
exposes a useKnockFeed
hook for all child components.
Returns: KnockFeedProviderState
knockKnock
The instance of the Knock clientfeedClientFeed
The instance of the authenticated FeeduseFeedStoreUseStore<FeedStoreState>
A zustand store containing the FeedStoreStatestatusFilterStatus
Current value of the filter status for the FeedsetStatusfunction
A function to set the current FilterStatuscolorModeColorMode
The current theme color
Example:
import {
KnockProvider,
KnockFeedProvider,
useKnockFeed,
} from "@knocklabs/expo";
const App = ({ authenticatedUser }) => (
<KnockProvider
apiKey={process.env.KNOCK_PUBLIC_API_KEY}
userId={authenticatedUser.id}
>
<KnockFeedProvider feedId={process.env.KNOCK_FEED_CHANNEL_ID}>
<MyFeedComponent />
</KnockFeedProvider>
</KnockProvider>
);
const MyFeedComponent = () => {
const { useFeedStore } = useKnockFeed();
const items = useFeedStore((state) => state.items);
return (
<View>
{items.map((item) => (
<NotificationCell key={item.id} item={item} />
))}
</View>
);
};
useAuthenticatedKnockClient
#
Creates an authenticated Knock client.
Returns: Knock
instance, authenticated against the user
Example:
import { useAuthenticatedKnockClient } from "@knocklabs/expo";
const MyComponent = () => {
const knock = useAuthenticatedKnockClient(
process.env.KNOCK_PUBLIC_API_KEY,
user.id,
user.knockToken,
);
return null;
};
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:
import {
useAuthenticatedKnockClient,
useNotifications,
useNotificationStore,
} from "@knocklabs/expo";
const MyComponent = () => {
const knock = useAuthenticatedKnockClient(
process.env.KNOCK_PUBLIC_API_KEY,
user.id,
user.knockToken,
);
const notificationFeed = useNotifications(
knock,
process.env.KNOCK_FEED_CHANNEL_ID,
);
const { metadata } = useNotificationStore(notificationFeed);
useEffect(() => {
notificationFeed.fetch();
}, [notificationFeed]);
return (
<View>
<Text>Total unread: {metadata.unread_count}</Text>
</View>
);
};
Exposed under KnockI18nProvider
child components.
Returns:
localestring
The current locale code (defaults to `en`)t(key: string) => string
A helper function to get the value of a translation from the current `Translations`.
useExpoPushNotifications
#
The KnockExpoPushNotificationProvider
exposes a useExpoPushNotifications
hook for all child components, enabling them to interact with push notification functionalities and state.
Returns: KnockExpoPushNotificationContextType
expoPushTokenstring | null
The Expo push token for the current device.registerForPushNotifications() => Promise<void>
A function to initiate the push notification registration process.registerPushTokenToChannel(token: string, channelId: string) => Promise<void>
Registers the device's push token with a specific channel in the Knock backend.unregisterPushTokenFromChannel(token: string, channelId: string) => Promise<void>
Removes the device's push token from a specific channel in the Knock backend.onNotificationReceived(handler: (notification: Notifications.Notification) => void) => void
Sets a custom handler for notifications received while the app is in the foreground.onNotificationTapped(handler: (response: Notifications.NotificationResponse) => void) => void
Sets a custom handler for user interactions with notifications.
Example:
import React, { useEffect } from "react";
import { View, Text } from "react-native";
import {
KnockExpoPushNotificationProvider,
useExpoPushNotifications,
} from "@knocklabs/expo";
const App = () => (
<KnockExpoPushNotificationProvider knockExpoChannelId="{YOUR_CHANNEL_ID}">
<MyComponent />
</KnockExpoPushNotificationProvider>
);
const MyComponent = () => {
const { expoPushToken, onNotificationReceived, onNotificationTapped } =
useExpoPushNotifications();
useEffect(() => {
onNotificationReceived((notification) => {
console.log("Notification Received: ", notification);
});
onNotificationTapped((response) => {
console.log("Notification Tapped: ", response);
});
}, []);
return (
<View>
<Text>Expo Push Token: {expoPushToken}</Text>
</View>
);
};
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.
interface Translations {
readonly emptyFeedTitle: string;
readonly emptyFeedBody: string;
readonly notifications: string;
readonly poweredBy: string;
readonly markAllAsRead: string;
readonly archiveNotification: string;
readonly all: string;
readonly unread: string;
readonly read: string;
readonly unseen: string;
readonly slackConnectChannel: string;
readonly slackChannelId: string;
readonly slackConnecting: string;
readonly slackDisconnecting: string;
readonly slackConnect: string;
readonly slackConnected: string;
readonly slackConnectContainerDescription: string;
readonly slackSearchbarDisconnected: string;
readonly slackSearchbarNoChannelsConnected: string;
readonly slackSearchbarNoChannelsFound: string;
readonly slackSearchbarChannelsError: string;
readonly slackSearchChannels: string;
readonly slackConnectionErrorOccurred: string;
readonly slackConnectionErrorExists: string;
readonly slackChannelAlreadyConnected: string;
readonly slackError: string;
readonly slackDisconnect: string;
readonly slackChannelSetError: string;
readonly slackAccessTokenNotSet: string;
readonly slackReconnect: string;
}
interface I18nContent {
readonly translations: Partial<Translations>;
readonly locale: string;
}