OneSignal Push Notification Setup in React Native

Push notifications are an essential part of modern mobile applications. In React Native, OneSignal is commonly used because it provides a simple dashboard and reliable delivery system.

For Android push notifications, OneSignal works together with Firebase Cloud Messaging, which means Firebase setup is required before starting.

This article shares the correct and practical way to integrate OneSignal in a React Native CLI project.

Before starting

Make sure you are using React Native CLI and not Expo.

Create a Firebase project and add an Android app using the same package name as your React Native project.

Download the google-services.json file and place it inside the android/app folder.

From Firebase project settings, generate a service account json file from the Service Accounts section. This file is used only in the OneSignal dashboard.

Create OneSignal app

Create a new app inside OneSignal dashboard.

Select Mobile App and choose React Native as the SDK.

Upload the Firebase service account json file.

After completing the setup, copy the OneSignal App ID.

Install OneSignal SDK

Install the OneSignal package inside your React Native project.

npm install react-native-onesignal

Add OneSignal initialization

Open App.js and initialize OneSignal using the App ID.

import { useEffect } from “react”; import OneSignal from “react-native-onesignal”;

useEffect(() => { OneSignal.setAppId(“YOUR_ONESIGNAL_APP_ID”); OneSignal.promptForPushNotificationsWithUserResponse(); }, []);

Once the app launches, the device automatically registers with OneSignal.

Rebuild and test

After configuration, rebuild the app.

npx react-native run-android

Uninstall any previous version of the app before installing the new build.

Open the app once on a real device.

Then return to OneSignal dashboard and click Test for subscribed users.

If the device appears, push notification setup is complete.

Final thoughts

OneSignal integration in React Native is straightforward when Firebase configuration is correct and the app is rebuilt properly.

Most setup issues are caused by mismatched package names, wrong json files, or testing on emulators.

Full detailed guide

This post covers the basic integration flow. For the complete step by step guide with dashboard flow, rebuild explanation, and troubleshooting, you can read the full article here: Complete Guide OneSignal