In-App UI

React Native

SDK

Reference

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*string

The public API key for the environment.

userUserIdentificationOptions

User identification data.

userTokenstring

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 Knock.

i18nI18nContent

An 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*string

The channel ID of the in-app feed to be displayed.

defaultFeedOptionsFeedClientOptions

Set defaults for `tenant`, `has_tenant`, `source`, `archived` to scope all subsequent feed queries.

colorModeColorMode

Sets 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:

`useKnockFeed`

The KnockFeedProvider exposes a useKnockFeed hook for all child components.

Returns: KnockFeedProviderState

knockKnock

The instance of the Knock client.

feedClientFeed

The instance of the authenticated Feed.

useFeedStoreUseStore<FeedStoreState>

A zustand store containing the FeedStoreState.

statusFilterStatus

Current value of the filter status for the Feed.

setStatusfunction

A function to set the current FilterStatus.

colorModeColorMode

The current theme color.

Example:

`useAuthenticatedKnockClient`

Creates an authenticated Knock client.

Returns: Knock instance, authenticated against the user

Example:

`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:

`useTranslations`

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`.

`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:

Types

UserIdentificationOptions

User identification data to pass through to the authenticate method.

idstring*

The `id` for the user.

[attribute_name]any

Attribute to attach to the user on identification.

`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.