Handling Push Notifications with React Native and Firebase Cloud Messaging

If you haven't already, create a new Firebase Cloud Messaging channel by navigating to Channels and sources under the account settings section of your Knock dashboard. Follow our Firebase Cloud Messaging push notification guide to configure FCM with Knock using your Service Account JSON file.

The simplest way to get started with FCM in your React Native app is to use React Native Firebase, which simplifies the process of handling push notifications and device tokens. Follow their Getting Started guide to set up React Native Firebase in your project.

Ensure your app is wrapped with both KnockProvider and KnockPushNotificationProvider.

Depending upon the platforms supported by your app, you may need to request permissions to receive push notifications on the user's device. See React Native Firebase's documentation on how to request permissions on Android and how to request permissions on iOS. Alternatively, consider using a third-party library such as react-native-permissions.

When your app launches, retrieve the device token using React Native Firebase's getToken function. Pass this token to the registerPushTokenToChannel function provided by Knock's usePushNotifications hook and include the channel ID of your FCM channel.

Additionally, when your app is in the foreground, register a listener using onTokenRefresh and invoke registerPushTokenToChannel whenever the token is refreshed.

Listen for push notifications using React Native Firebase's getInitialNotification and onNotificationOpenedApp functions. You will need to manually update message engagement status when users interact with notifications. See React Native Firebase's Notifications guide for more details on these two functions.

Use the Knock dashboard or API to send a test notification to ensure your setup is correct. Verify that the notification appears on your device and that tapping on it triggers the expected behavior.