Building notification feeds with React Native
How to build notification feeds powered by Knock in your React Native applications.
In this guide, you'll find common recipes to help you build in-app feed experiences within your React Native applications. The SDK handles all aspects of managing the data surrounding notifications on your behalf, including managing unread badge counts.
🌠
Note in the current version of the React Native SDK there are no pre-built UI components. That means you must bring your own notification components to render an in-app feed.
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
🔐
Secure your feed: By default, Knock feeds are accessible to anyone who has the feed ID. This makes it easy to get started in development. To secure your feed for production, enable enhanced security mode in your Knock dashboard and pass a signed
userToken as a prop to the KnockFeedProvider component. For more information, visit the security & authentication guidefor client-side applications.Using the KnockProvider and KnockFeedProvider
Using the useNotifications hook
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.