Push notifications are a powerful tool to keep users engaged, informed, and coming back to your app. Whether you’re sending real-time updates, reminders, or promotions, integrating push notifications into your React Native app can significantly improve user retention.
In this guide, we’ll walk you through how to integrate push notifications in a React Native app, covering both Android and iOS, and using tools like Firebase Cloud Messaging (FCM) and Expo (for managed workflows).
Prerequisites
Before you start, make sure you have the following:
- A working React Native app (Expo or bare workflow)
- Node.js and npm/yarn installed
- Firebase project with an API key
- Android Studio and/or Xcode (for testing on devices/emulators)
Option 1: Push Notifications with Expo (Recommended for Most)
If you’re using Expo, it’s the easiest way to get started with push notifications.
Step 1: Install Expo Push Notification Packages
npx expo install expo-notifications expo-deviceThese packages handle permission prompts, token retrieval, and notification handling.
Step 2: Request Permissions and Get Token
In your app (e.g., App.js):
import React, { useEffect, useRef, useState } from "react";
import * as Notifications from "expo-notifications";
import * as Device from "expo-device";
import { Platform } from "react-native";
export default function App() {
const [expoPushToken, setExpoPushToken] = useState("");
const notificationListener = useRef();
const responseListener = useRef();
useEffect(() => {
registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
console.log("Notification Received:", notification);
});
responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
console.log("User interacted with notification:", response);
});
return () => {
Notifications.removeNotificationSubscription(notificationListener.current);
Notifications.removeNotificationSubscription(responseListener.current);
};
}, []);
return null;
}
async function registerForPushNotificationsAsync() {
if (Device.isDevice) {
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== "granted") {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== "granted") {
alert("Failed to get push token for push notification!");
return;
}
const token = (await Notifications.getExpoPushTokenAsync()).data;
console.log("Expo Push Token:", token);
return token;
} else {
alert("Must use physical device for Push Notifications");
}
if (Platform.OS === "android") {
Notifications.setNotificationChannelAsync("default", {
name: "default",
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: "#FF231F7C",
});
}
}
Step 3: Send a Push Notification
You can send notifications using a POST request to Expo’s Push Notification API:
POST https://exp.host/--/api/v2/push/sendExample using curl:
curl -X POST https://exp.host/--/api/v2/push/send \
-H "Content-Type: application/json" \
-d '{
"to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
"title": "Hello!",
"body": "This is a test notification 🚀"
}'Or from your server (Node.js, PHP, Python, etc.)
Step 4: Test on a Real Device
Push notifications only work on physical devices, not simulators or emulators.
Make sure:
- App is running in foreground/background
- Notifications are enabled in settings
- You’re using a real device (Android or iOS)
Option 2: Push Notifications with Firebase in Bare React Native
If you’ve ejected from Expo or use a bare React Native CLI app, use Firebase Cloud Messaging (FCM).
Step 1: Install Firebase Dependencies
npm install @react-native-firebase/app @react-native-firebase/messagingStep 2: Set Up Firebase Project
- Go to Firebase Console
- Create a new project
- Add Android/iOS apps to the project
- Download
google-services.json(Android) orGoogleService-Info.plist(iOS) - Follow the integration docs to add them to your native folders
Step 3: Request Permission & Get Token
import messaging from '@react-native-firebase/messaging';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
requestUserPermission();
const unsubscribe = messaging().onMessage(async remoteMessage => {
alert('A new FCM message arrived: ' + JSON.stringify(remoteMessage));
});
return unsubscribe;
}, []);
}
async function requestUserPermission() {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
const token = await messaging().getToken();
console.log('FCM Token:', token);
}
}
Step 4: Send Notification from Firebase Console or Server
Firebase Console:
- Go to Cloud Messaging
- Click “Send your first message”
- Enter title, body, and select target app
Or send from backend with Firebase Admin SDK:
const admin = require("firebase-admin");
admin.messaging().send({
token: fcmToken,
notification: {
title: "New Message",
body: "You have a new notification!",
},
});
Handling Notifications (Foreground, Background, Killed)
Foreground: Handled via onMessage()
Background: Android/iOS shows it automatically
App Killed: Use getInitialNotification() to check if the app was opened from a tap
useEffect(() => {
messaging()
.getInitialNotification()
.then(remoteMessage => {
if (remoteMessage) {
console.log('Notification caused app to open from quit state:', remoteMessage);
}
});
}, []);
Bonus: Handling User Permissions
Make sure to check if the user denied permissions. Prompt only once, and guide them to system settings if needed.
import { Linking, Platform } from 'react-native';
if (permission === 'denied') {
if (Platform.OS === 'ios') {
Linking.openURL('app-settings:');
} else {
IntentLauncher.startActivityAsync(IntentLauncher.ACTION_NOTIFICATION_SETTINGS);
}
}
Final Thoughts
Integrating push notifications in React Native doesn’t have to be complicated — whether you’re using Expo’s fast setup or going full custom with Firebase in bare workflow, the key is to test on real devices and handle all app states (foreground, background, killed).
Push notifications can greatly enhance engagement, retention, and conversions when used right — especially in e-commerce, delivery apps, fitness trackers, and social media platforms.
