React Native API reference

Complete API reference for the Knock React Native SDK.

In this section, you'll find the complete documentation for the components exposed in @knocklabs/react-native, 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

apiKey*stringThe public API key for the environment
userId*stringThe ID of the user for which to retrieve a feed
userTokenstringA JWT that identifies the authenticated user, signed with the private key provided in the Knock dashboard. Required to secure your production environment. Learn more.
hoststringA custom API host for Knock
i18nI18nContentAn optional set of translations to override the default `en` translations used in the feed components

KnockFeedProvider

The feed-specific provider that connects to a feed for that user. Must be a child of the KnockProvider.

Props

Accepts KnockFeedProviderProps:

feedId*stringThe channel ID of the in-app feed to be displayed
defaultFeedOptionsFeedClientOptionsSet defaults for `tenant`, `has_tenant`, `source`, `archived` to scope all subsequent feed queries
colorModeColorModeSets the theme as either light or dark mode (defaults to light)

KnockPushNotificationProvider

A context provider designed to streamline the integration of push notifications within your React Native application. It facilitates the registration of device push tokens with the Knock backend, enabling the delivery of notifications.

It is recommended to use the usePushNotifications hook to interact with this context provider.

Note: Must be a child of the KnockProvider.

Props

None other than children.

Hooks

useKnock

The KnockProvider exposes a useKnock hook for all child components.

Returns: Knock, an instance of the Knock JS client.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
};

useKnockFeed

The KnockFeedProvider exposes a useKnockFeed hook for all child components.

Returns: KnockFeedProviderState

knockKnockThe instance of the Knock client
feedClientFeedThe instance of the authenticated Feed
useFeedStoreUseStore<FeedStoreState>A zustand store containing the FeedStoreState
statusFilterStatusCurrent value of the filter status for the Feed
setStatusfunctionA function to set the current FilterStatus
colorModeColorModeThe current theme color

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {
  KnockProvider,
  KnockFeedProvider,
  useKnockFeed,
} from "@knocklabs/react-native";

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:

1
2
3
4
5
6
7
8
9
10
11
import { useAuthenticatedKnockClient } from "@knocklabs/react-native";

const MyComponent = () => {
  const knock = useAuthenticatedKnockClient(
    process.env.KNOCK_PUBLIC_API_KEY,
    user.id,
    user.knockToken,
  );

  return null;
};

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import {
  useAuthenticatedKnockClient,
  useNotifications,
  useNotificationStore,
} from "@knocklabs/react-native";

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>
  );
};

useTranslations

Exposed under KnockI18nProvider child components.

Returns:

localestringThe current locale code (defaults to `en`)
t(key: string) => stringA helper function to get the value of a translation from the current `Translations`.

usePushNotifications

The KnockPushNotificationProvider exposes a usePushNotifications hook for all child components, enabling them to register and unregister a device's push token from a channel.

Returns: KnockPushNotificationContextType

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.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { useEffect } from "react";
import { View, Text } from "react-native";
import {
  KnockPushNotificationProvider,
  usePushNotifications,
} from "@knocklabs/react-native";

const App = () => (
  <KnockPushNotificationProvider>
    <MyComponent />
  </KnockPushNotificationProvider>
);

const MyComponent = () => {
  // How the push token is retrieved depends upon the push notification service you are using
  const pushToken = getPushTokenForCurrentDevice();
  const { registerPushTokenToChannel } = usePushNotifications();

  useEffect(() => {
    registerPushTokenToChannel(pushToken, process.env.KNOCK_PUSH_CHANNEL_ID)
      .then(() => console.log("Push token registered"))
      .catch(console.error);
  }, [registerPushTokenToChannel, pushToken]);

  return (
    <View>
      <Text>Push Token: {pushToken}</Text>
    </View>
  );
};

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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;
}
←Push notifications
Overview→