DEV Community

Future Dev Tech
Future Dev Tech

Posted on • Originally published at futuredevtech.com

OneSignal Push Notification Setup in React Native

OneSignal Setup in React Native (Push Notification) Complete Guide

Push notification setup in React Native can feel confusing at first, especially when Firebase and OneSignal are both involved.

OneSignal uses Firebase Cloud Messaging to deliver Android notifications, so Firebase configuration is mandatory before starting.

Below is the short and correct setup flow for React Native CLI projects.

Basic requirements

A React Native CLI project already created.
Firebase project with Android app added.
Package name must match your React Native app.

Download google-services.json and place it inside:

android/app/
Enter fullscreen mode Exit fullscreen mode

Generate Firebase service account json from Firebase Service Accounts section.
This file is uploaded only in OneSignal dashboard.

Create OneSignal app

Create a new app in OneSignal dashboard.
Choose Mobile App.
Select SDK as React Native.
Upload Firebase service account json file.
Copy OneSignal App ID.

Install OneSignal SDK

npm install react-native-onesignal
Enter fullscreen mode Exit fullscreen mode

Add OneSignal code

Inside App.js:

import { useEffect } from "react";
import OneSignal from "react-native-onesignal";

useEffect(() => {
  OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID");
  OneSignal.promptForPushNotificationsWithUserResponse();
}, []);
Enter fullscreen mode Exit fullscreen mode

Rebuild the app

After adding Firebase and OneSignal configuration, rebuild the application.

npx react-native run-android

Enter fullscreen mode Exit fullscreen mode

Old installed app must be removed before installing new build.

Test subscribed users

Open the app once on a real device.

Go to OneSignal dashboard and click Test for subscribed users.

If device appears, setup is completed.

Final note

OneSignal push notification works smoothly in React Native when Firebase configuration and App ID are correct.

Most issues come from wrong package name, wrong json file, or missing rebuild.

Full step by step guide

For the complete setup including OneSignal dashboard flow, Firebase service account json, rebuild process, and troubleshooting, check the full guide on our this blog: Onesignal Setup Complete Guide

Top comments (0)