Tutorial Push Notifications in React Native with Expo & OneSignal

I'll teach you how to implement push notifications in a React Native app using Expo and OneSignal. I walk through setting up a OneSignal account, configuring iOS and Android platforms, and sending test notifications that include images and deep links. If you want to engage your users with effective notifications, this tutorial covers the essential steps.

You’ll learn about the Apple developer certificates required for iOS push notifications, how to create and use bundle identifiers, and how to connect your Expo app with OneSignal. I also show how to handle common issues like blocked notifications and app reloads, and how to manage multiple platforms from one dashboard.

What's inside

• Introduction to OneSignal and its features
• Creating and configuring a OneSignal account and app
• Setting up Apple developer certificates and bundle identifiers
• Integrating Expo with OneSignal for push notifications
• Sending test push notifications with images and deep links
• Handling blocked devices and app reloads
• Managing multiple platforms (iOS, Android, web) in OneSignal
• Tips on organizing users and devices for testing

Introduction to OneSignal and its features

OneSignal is a messaging service that helps you send push notifications, emails, SMS, and in-app messages across multiple platforms. It centralizes user management and notification logic, making it easier to handle messaging for apps built with React Native or other frameworks.

I highlight OneSignal’s support for rich notifications, including images, and its ability to deep link users to specific URLs when they tap a notification. This lets you create engaging notifications that can drive users back to your app or website with ease.

Creating and configuring a OneSignal account and app

To get started, create a free OneSignal account at onesignal.com. Inside OneSignal, you set up an organization and then create an app for your project. You select the platforms you want to support, such as iOS and Android, and can add more later.

I demonstrate navigating the OneSignal dashboard, adding your app, and accessing important settings like API keys, devices, and user profiles. I also show how to add test devices so you can send notifications during development and verify they work correctly.

Setting up Apple developer certificates and bundle identifiers

For iOS push notifications, you need an Apple developer account, which costs $100 per year. You create a push notification key (.p8 file) in the Apple Developer portal, which OneSignal requires to send notifications on your behalf.

You also need a unique bundle identifier for your app that matches the one in your Expo app.json configuration. I explain how to find or create this identifier and how it connects to your Apple certificates and OneSignal setup. This step is crucial to ensure your app can receive push notifications properly on iOS devices.

Integrating Expo with OneSignal for push notifications

The tutorial uses Expo SDK to handle push notifications in the React Native app. You install the Expo push notification package and configure your app to register for notifications, which lets Expo manage device tokens.

You then link these device tokens to OneSignal so you can target specific devices. I show how to connect your Expo app with OneSignal, including setting up platform-specific keys and identifiers for iOS and Android.

Sending test push notifications with images and deep links

OneSignal lets you compose notifications with titles, messages, and images to make them more engaging. I demonstrate sending a test notification to an iPhone, showing how the image appears in the notification preview.

It also shows how to set a deep link URL so that when users tap the notification, they are taken to a specific webpage (like codewithbeto.dev). This feature is great for driving users back to your app or website with relevant content.

Handling blocked devices and app reloads

When you block notifications on your device, OneSignal and Expo can temporarily lose connection to the device’s notification system. I show that reloading the app restores notification functionality, which is important to know when testing.

This means if a user disables notifications and then re-enables them, your app might need to reload to regain proper notification permissions and token registration. Understanding this behavior helps you handle permission changes gracefully during development and in production.

Managing multiple platforms (iOS, Android, web) in OneSignal

OneSignal supports sending notifications to multiple platforms from a single dashboard. You can enable and configure iOS, Android, and web platforms independently, each with their own keys and profiles.

I explain how to activate these platforms in OneSignal and manage their settings, making it easier to maintain cross-platform notification support without juggling separate services or dashboards.

Tips on organizing users and devices for testing

For effective testing, you can add multiple devices to your OneSignal project. I mention adding iPhones and other devices as test targets, allowing you to send notifications to specific devices during development.

Organizing your users and devices in OneSignal helps streamline your testing and quality assurance process. It ensures you can verify notifications work correctly across different platforms and device types before releasing your app.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Get access to exclusive tutorials and advanced React Native content.