Building custom notifications UI with hooks (headless)
Using our @knocklabs/react-native
library, you can create fully custom notification UIs that are backed by the Knock Feed API and real-time service.
In this guide, you'll find common recipes to help you build in-app feed experiences within your React Native applications in a headless way using the Knock hooks. The SDK handles all aspects of managing the data surrounding notifications on your behalf, including managing unread badge counts.
Quick links:
Getting started
To use this example, you'll need an account on Knock, as well as an in-app feed channel with a workflow that produces in-app feed messages. You'll also need:
- A public API key for the Knock environment (set as
KNOCK_PUBLIC_API_KEY
) - The channel ID for the in-app feed (set as
KNOCK_FEED_CHANNEL_ID
)
Installing dependencies
Rendering a notification feed
userToken
as a prop to the KnockFeedProvider
component. For more information, visit the security & authentication guide for client-side applications.KnockProvider
and KnockFeedProvider
Using the useNotifications
hook
Using the Common feed recipes
Filtering/scoping a feed
A feed can be scoped by any of the parameters that are accepted on the feed endpoint via the FeedClientOptions
set in the defaultFeedOptions
for the KnockFeedProvider
component, or via the useNotifications
hook.
You can read more in this guide on feed filtering.