Handling Push Notifications with React Native and Expo
Note: This guide assumes you're utilizing our KnockExpoPushNotificationProvider for a streamlined push notification setup within your React Native and Expo environment.
Prerequisites
Before diving into the integration process, ensure your Knock account is set up for push notifications. For initial setup instructions, please visit our Push Notification Configuration Guide.
Setting Up Push Notifications with Expo
-
Create a Push Notification Channel in Knock:
- Log in to your Knock account and navigate to the Integrations > Channels section of the dashboard.
- Create a new channel with type
Expo Push Notificationsand note the channel ID.
-
Install Expo Dependencies:
expo": "~50.0.14expo-constants": "^15.4.0expo-device": "^5.9.3expo-notifications": "^0.27.6
Registering for Push Notifications
- Wrap Your App with
KnockExpoPushNotificationProvider:- Ensure your app is wrapped with
KnockProviderand thenKnockExpoPushNotificationProvider, passing the Expo channel ID from Knock.
- Ensure your app is wrapped with
- Initiate Registration in Your Component:
- The
KnockExpoPushNotificationProviderautomatically registers for push notifications. - If you want to manually register, utilize the
useExpoPushNotificationshook:
- The
Handling Incoming Push Notifications
The KnockExpoPushNotificationProvider automatically handles receiving and tapping on notifications. To customize this behavior:
- Custom Notification Handling:
- Use the
onNotificationReceivedandonNotificationTappedmethods from theuseExpoPushNotificationshook to set custom handlers.
- Use the
Sending Test Notifications
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.
Troubleshooting
- Not Receiving Notifications: Ensure your Expo push token is correctly registered with Knock and that your device's notification settings allow push notifications from your app.
- Handling Silent Notifications: If implementing silent notifications, ensure that your notification payload is correctly configured to not display an alert or sound.
For further assistance, reach out to our support team.