How to Implement Push Notifications in React Native – A Step‑by‑Step Example

Push notifications are the silent messenger that keeps mobile users engaged, even when they’ve closed the app. If you’ve ever wondered how to wire them up in a React Native project without drowning in configuration files, you’re in the right place. Below is a practical walkthrough that gets a basic notification working on both Android and iOS, using Firebase Cloud Messaging as the backbone.

1. Prepare Your React Native Project

Start with a fresh React Native app or use an existing one you’d like to augment. Open a terminal and run:

• npx react-native init MyNotifyApp
• Navigate into the folder: cd MyNotifyApp

If you’re already on a project, make sure it’s on React Native 0.70 or newer—older versions may require extra linking steps.

Install the messaging library

We’ll rely on @react-native-firebase/messaging, which abstracts away the native SDKs for Android and iOS:

• yarn add @react-native-firebase/app @react-native-firebase/messaging
• For iOS, run cd ios && pod install && cd ..

These packages automatically add the necessary native modules, but a quick npx react-native run-android or run-ios ensures everything compiles.

2. Set Up Firebase for Messaging

Firebase provides a single console for both platforms, which simplifies key management. Follow these steps:

• Go to Firebase Console and create a new project (or reuse an existing one).
• Add an Android app: supply your package name (e.g., com.mynotifyapp), download google-services.json, and place it in android/app/.
• Add an iOS app: supply the bundle ID, download GoogleService-Info.plist, and drop it into the Xcode project’s root.
• In the console, enable “Cloud Messaging” and note the Server key—you’ll need it later to send test messages.

Both platforms now have the credentials they need to receive messages from Firebase.

3. Request Permission and Listen for Messages

The first piece of JavaScript lives in App.js. It asks the user for notification permission, retrieves the device token, and registers a listener for incoming messages.

import messaging from '@react-native-firebase/messaging';
import { useEffect } from 'react';
import { Alert, Platform } from 'react-native';
const requestUserPermission = async () => {
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);
} else {
console.log('User declined notification permissions');
}
};
const App = () => {
useEffect(() => {
requestUserPermission();
// Foreground messages
const unsubscribe = messaging().onMessage(async remoteMessage => {
Alert.alert('New Notification', remoteMessage.notification?.body);
});
// Background/quit state handling (iOS only)
messaging()
.setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
});
return unsubscribe;
}, []);
return /* Your usual UI */;
};
export default App;

Notice the conditional check for iOS background handling—Android processes background messages automatically through the native service.

4. Configure Android Manifest and iOS Capabilities

For Android, edit android/app/src/main/AndroidManifest.xml to include the following inside the <application> tag:

<service
android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService"
android:exported="false">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>
<service
android:name="io.invertase.firebase.messaging.RNFirebaseMessagingHeadlessService"
android:exported="false">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>

On iOS, open the project in Xcode, select the target, go to Signing & Capabilities, and add Push Notifications and Background Modes → Remote notifications. Also, enable the “APNs” key in the Firebase console under iOS app settings.

5. Send a Test Notification

With everything wired, it’s time to see a real push. Use Firebase’s “Cloud Messaging” console:

• Click “Send your first message”.
• Enter a title and body, then target the app by its package/bundle ID.
• Paste the device token you logged earlier into the “Single device” field.
• Hit “Send”.

If the app is in the foreground, you’ll see an alert pop up. In the background, the system tray displays the notification, and tapping it brings the app to the front.

6. Handling Notification Clicks

Often you’ll want to navigate to a specific screen when a user taps a notification. Extend the listener like this:

messaging().onNotificationOpenedApp(remoteMessage => {
const screen = remoteMessage.data?.screen;
if (screen) {
navigation.navigate(screen);
}
});
// If the app was closed and opened via a notification
messaging()
.getInitialNotification()
.then(remoteMessage => {
if (remoteMessage) {
const screen = remoteMessage.data?.screen;
if (screen) {
navigation.navigate(screen);
}
}
});

By passing a screen key in the payload’s data field, you gain fine‑grained control over the user’s post‑click experience.

7. Common Pitfalls and Quick Fixes

• Android not receiving messages: Verify that google-services.json matches the package name exactly; a mismatch silently drops messages.
• iOS silent notifications not arriving: Ensure the “Remote notifications” background mode is enabled and that you use the APNs production certificate for release builds.
• Token changes after reinstall: Store the token on your server each time you retrieve it; devices can generate a new token after a clean install.

FAQ

Can I use a different push service instead of Firebase?

Yes. Services like OneSignal or AWS SNS provide their own React Native SDKs. The overall flow—request permission, obtain a device token, and listen for messages—remains the same; only the initialization code changes.

Do I need separate code for Android and iOS?

Most of the JavaScript you write is platform‑agnostic, thanks to the Firebase library. Platform‑specific tweaks are limited to native configuration files (AndroidManifest, Xcode capabilities) and, occasionally, handling iOS‑only background messages.

How do I schedule local notifications after receiving a push?

Combine @react-native-firebase/messaging with react-native-push-notification or expo-notifications. In the onMessage handler, schedule a local notification using the second library, letting you control sound, repeat intervals, and custom actions.

Is there a way to track delivery statistics?

Firebase’s console shows basic delivery metrics (sent, opened, dismissed). For deeper analytics, integrate Google Analytics for Firebase or send the token to your own backend and log events whenever a user interacts with a notification.

With the steps above, you now have a functional push‑notification setup that can be expanded with rich media, action buttons, or topic‑based subscriptions. The core idea is simple: let Firebase handle the heavy lifting, then focus on delivering timely, relevant content to your users.