0.5.1 • Published 10 months ago
@knocklabs/react-native v0.5.1
Knock React Native SDK
A set of components for integrating Knock in-app notifications into a React Native application.
Installation
Via NPM:
npm install @knocklabs/react-native
Via Yarn:
yarn add @knocklabs/react-native
Configuration
To configure the feed you will need:
- A public API key (found in the Knock dashboard)
- A user ID, and optionally an auth token for production environments
- If integrating an in-app feed, a feed channel ID (found in the Knock dashboard)
Usage
You can integrate the feed into your app as follows:
import {
KnockProvider,
KnockFeedProvider,
NotificationFeedContainer,
} from "@knocklabs/react-native";
const YourAppLayout = () => {
const [isVisible, setIsVisible] = useState(false);
const notifButtonRef = useRef(null);
return (
<KnockProvider apiKey={process.env.KNOCK_PUBLIC_API_KEY} userId={userId}>
{/* Optionally, use the KnockFeedProvider to connect an in-app feed */}
<KnockFeedProvider feedId={process.env.KNOCK_FEED_ID}>
<NotificationFeedContainer>
<Text>Notifications go in here!</Text>
</NotificationFeedContainer>
</KnockFeedProvider>
</KnockProvider>
);
};
Headless usage
Alternatively, if you don't want to use our components you can render the feed in a headless mode using our hooks:
import {
useAuthenticatedKnockClient,
useNotifications,
} from "@knocklabs/react-native";
import create from "zustand";
const YourAppLayout = () => {
const knockClient = useAuthenticatedKnockClient(
process.env.KNOCK_PUBLIC_API_KEY,
currentUser.id,
);
const notificationFeed = useNotifications(
knockClient,
process.env.KNOCK_FEED_ID,
);
const useNotificationStore = create(notificationFeed.store);
const { metadata } = useNotificationStore();
useEffect(() => {
notificationFeed.fetch();
}, [notificationFeed]);
return <Text>Total unread: {metadata.unread_count}</Text>;
};
Related links
0.5.1-rc.0
10 months ago
0.5.0
10 months ago
0.5.1
10 months ago
0.4.0
11 months ago
0.3.1
11 months ago
0.3.0
12 months ago
0.2.12
1 year ago
0.2.11
1 year ago
0.2.10
1 year ago
0.2.7
1 year ago
0.2.6
1 year ago
0.2.9
1 year ago
0.2.8
1 year ago
0.2.3
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.20
1 year ago
0.1.19
1 year ago
0.1.18
1 year ago
0.1.17
1 year ago
0.1.15
1 year ago
0.1.16
1 year ago
0.1.13
1 year ago
0.1.14
1 year ago
0.1.12
1 year ago
0.1.11
1 year ago
0.1.10
1 year ago
0.1.9
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0-rc1
2 years ago
0.1.0-rc0
2 years ago