How to set up push notifications for a React Native app

You will learn

Learn about using Klaviyo’s React Native SDK to send mobile push notifications.

What is React Native?

React Native is a hybrid framework that allows you to create mobile apps for both iOS and Android. It is written in JavaScript and allows you to utilize a single code base for both platforms. React Native apps look like any other apps.

Klaviyo’s React Native SDK allows you to connect Klaviyo to apps built with React Native.

Before you begin

Before you can set up push notifications for your React Native app, you must:

• Have your own React Native app for iOS, Android, or both.
• Install the React Native SDK in your mobile app.

Set up push notifications

Once you fulfill the requirements above, configure push notifications in Klaviyo for each platform your app supports: iOS, Android, or both. If your app supports both platforms, complete both setup guides below.

For instructions, see our setup guides for:

• How to set up iOS push notifications
• How to set up Android push notifications

Test sending a push notification

After you have configured push notifications in your Klaviyo account and have confirmed that the Klaviyo React Native SDK is installed in your mobile app:

1. Log into your mobile app with an email address or phone number that will make it easy to find your profile in Klaviyo.
2. If prompted, enable push notifications for your app. If you are not prompted, confirm that push notifications are enabled for the app in your device’s settings app.
3. In Klaviyo, go to Audience > Profiles and find your test profile. If you cannot find your profile, check with your app developer to confirm that your app sends profile identifiers to Klaviyo.
4. Under Channel consent, confirm that your profile is subscribed to mobile push notifications.

5. Create a list or segment with only your profile.
6. Create a push notification campaign and select that list or segment as the audience.
7. Finish creating the message, then send the campaign to your test list or segment.
8. Confirm that the notification appears on the device.
9. Tap the notification on your device to open your app.
10. Check your profile’s Activity feed to confirm that you see both a Received Push event and an Opened Push event.

If your app supports both iOS and Android, repeat the test on a device for each platform.

Troubleshooting

• Why do I not see a push token on my profile in Klaviyo? Similar to an email address for emails, push notifications are sent to push tokens. Your mobile app needs to forward a device’s push token to Klaviyo for you to be able to send push notifications to that device. Confirm with your app developer that they have implemented the code outlined in the Push Notifications section of our SDK documentation.
• Why are images not displaying for iOS push notifications? Rich media displays on iOS only if you add the Notification Service Extension to your app. Confirm with your app developer that they have implemented the code outlined in the Rich Push section of our SDK documentation.
• Why am I not seeing Opened Push events even when I tap on a notification? Your app needs push open tracking configured to report Opened Push events to Klaviyo. Work with your developer to set up automatic tracking or implement the tracking code in the native iOS or Android part of your app, as described in the Tracking Open Events section of our SDK documentation.

Additional resources

• Learn about push notification consent
• Learn how to use push notifications for campaigns.
• Check out how to use deep links in push notifications.

Additional resources