How to Add Push Notifications to React Native App (2026 Guide)

By Rafirit Station Editorial Team · Updated 2026 · ⏱ 12 min read

Push notifications are a game-changer for mobile apps. According to Leanplum, apps that send push notifications see a 20% increase in user retention. In Bangladesh, where mobile-first is the norm, adding push notifications to your React Native app can directly translate to higher engagement and revenue.

With the rise of React Native in Dhaka’s startup ecosystem, many developers are looking to implement push notifications effectively. In 2026, the tools have matured: Firebase Cloud Messaging (FCM) and Expo Notifications offer robust solutions. Yet, many developers get stuck on configuration or platform-specific quirks.

Ignoring push notifications could cost your app ৳50,000 per month in lost revenue from inactive users. A Dhaka-based e-commerce app we worked with saw a 35% uplift in repeat purchases after implementing targeted push campaigns.

By the end of this guide, you’ll be able to integrate push notifications into any React Native app using Firebase, handle permissions, send test notifications, and track engagement metrics. No fluff—just actionable steps.

📚 External Resources (Bookmark These)

• Firebase Cloud Messaging Documentation
• Expo Push Notifications Guide
• React Native Push Notification (iOS)
• Android Notification Guide
• OneSignal Blog: React Native Push
• Medium Tutorial (Firebase)
• LogRocket: React Native Firebase
• React Native Firebase Messaging
• AppCoda iOS Push Notifications
• Simplilearn React Native Push Tutorial

🔗 Rafirit Station Services

• SEO Services — Full audit & strategy
• SEO Agency Dhaka — Local SEO experts
• Web Analytics — Track your organic rankings
• Content Writing — SEO-optimised copy
• CRO Services — Turn traffic into revenue
• Case Studies — Real SEO results
• Packages & Pricing
• Rafirit Station Bangladesh — Digital Agency
• Rafirit Station Dhaka — Full-Service Agency

Phase 1: Setting Up Firebase Cloud Messaging

Before writing any code, you need a Firebase project configured for both iOS and Android. This is the backbone of push notifications in React Native. In 2026, Firebase remains the most reliable and widely used service, especially for Bangladeshi developers targeting global audiences.

Tactic 1.1: Create a Firebase Project

Why this works: A properly configured Firebase project ensures that FCM can send messages to your app. Without this, nothing else works.

Exactly how to do it:

1. Go to Firebase Console and sign in with your Google account.
2. Click “Add project”, enter a name (e.g., “MyReactNativeApp”), and accept the terms.
3. Disable Google Analytics if not needed (optional, but we recommend enabling it for tracking).
4. Once created, click the Android icon to add an Android app. Enter your app’s package name (e.g., com.yourapp.package).
5. Download the google-services.json file and place it in android/app directory of your React Native project.
6. Click the iOS icon to add an iOS app. Enter your Bundle ID and download GoogleService-Info.plist. Place it in ios/YourAppName.
7. For iOS, upload your APNs authentication key or certificate in Firebase Console under Cloud Messaging > iOS app configuration.

Pro tip: Use a separate Firebase project for development and production to avoid test notifications going to real users.

📊 Expected results: With a configured project, you can send test notifications from the Firebase Console within 10 minutes.

Tactic 1.2: Get Server Key and Sender ID

Why this works: These credentials are needed for your app to register with FCM and for your backend to send push notifications.

Exactly how to do it:

1. In Firebase Console, go to Project Settings > Cloud Messaging.
2. Copy the “Server key” (also called Legacy server key) and “Sender ID”.
3. Store these securely in your app’s environment variables (e.g., .env file).
4. For production, use Firebase Admin SDK instead of the legacy server key.

📊 Expected results: You can now send messages programmatically.

Tactic 1.3: Enable FCM APIs

Why this works: Firebase APIs must be enabled for your app to receive messages.

Exactly how to do it:

1. In Firebase Console, go to Cloud Messaging tab under your project.
2. Enable the Firebase Cloud Messaging API if not already enabled.
3. Also enable the Firebase Installations API (required for FCM v1).
4. Verify by sending a test notification from the Console to a test device.

📊 Expected results: Test notification delivered within seconds.

Phase 2: Configuring React Native (Expo vs Bare Workflow)

React Native offers two main workflows: Expo managed and bare (or custom). Both support push notifications, but the setup differs. As of 2026, Expo has significantly improved its push notification support, making it the preferred choice for many Dhaka developers due to simplified configuration.

Tactic 2.1: Choose Your Workflow

Why this works: Choosing the right workflow early prevents headaches later. Expo is easier but may require ejecting for some advanced features.

Exactly how to do it:

1. If your app does not need custom native modules (like real-time audio processing), use Expo managed workflow.
2. If you need native modules or full control, use bare React Native (or Expo bare workflow).
3. For mixed needs, consider Expo’s development builds (expo-dev-client).
4. Install the expo-notifications package if using Expo, or @react-native-firebase/messaging for bare.

Pro tip: Use Expo’s EAS Build to generate native builds without ejecting.

📊 Expected results: 30 minutes to set up the bare minimum in Expo.

Tactic 2.2: Install and Configure Libraries

Why this works: Correct configuration ensures that FCM tokens are generated and notifications can be received.

Exactly how to do it:

1. For Expo: expo install expo-notifications expo-device expo-constants
2. For bare: npm install @react-native-firebase/app @react-native-firebase/messaging and configure Firebase with google-services.json and GoogleService-Info.plist.
3. For Expo, add the following to app.json under "expo": { "notification": { "icon": "./assets/notification-icon.png", "color": "#ff4c00" } }
4. For bare, add import { firebase } from '@react-native-firebase/app' in your root component.
5. Install @notifee/react-native for advanced notification display (optional).

📊 Expected results: App can request notification permissions and receive a token.

Tactic 2.3: Request Permissions and Get Token

Why this works: Without permission, you cannot send notifications. The token is needed to target the device.

Exactly how to do it:

1. Import Notifications from expo-notifications or messaging from @react-native-firebase/messaging.
2. Request permission using Notifications.requestPermissionsAsync() (Expo) or messaging().requestPermission() (bare).
3. If granted, get the token: Notifications.getExpoPushTokenAsync() or messaging().getToken().
4. Send the token to your backend or store it locally for testing.
5. For iOS, also configure APNs entitlement in Xcode.

Template for Expo:

import { Platform } from 'react-native';
import Notifications from 'expo-notifications';

async function registerForPushNotifications() {
  let token;
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') return;
  token = (await Notifications.getExpoPushTokenAsync()).data;
  console.log('Token:', token);
  return token;
}

📊 Expected results: Token printed in console within 5 seconds after allowing permission.

Phase 3: Handling Notifications and Navigation

Once you have the token, the next step is to handle incoming notifications—both foreground and background—and navigate the user to relevant screens. This is where most apps fail to provide a seamless experience.

Tactic 3.1: Handle Foreground Notifications

Why this works: Foreground notifications should not appear as system alerts by default; instead, you might want to show an in-app banner.

Exactly how to do it:

1. Set up a notification handler: for Expo use Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldShowAlert: true, shouldPlaySound: false }) })
2. For bare, use messaging().onMessage(async remoteMessage => { ... }) to handle foreground messages.
3. Display a custom toast or banner using React Native’s Alert or a library like react-native-toast-message.
4. Consider playing a sound only for high-priority notifications.

Pro tip: Use @notifee/react-native to show custom notification channels and sounds on Android.

📊 Expected results: In-app notification appears within 1 second of receiving the push.

Tactic 3.2: Handle Background and Killed State

Why this works: Notifications must work even when the app is closed to retain users.

Exactly how to do it:

1. Use Notifications.addNotificationResponseReceivedListener (Expo) or messaging().onNotificationOpenedApp (bare) to detect tap events.
2. Use Notifications.getLastNotificationResponseAsync (Expo) or messaging().getInitialNotification (bare) to handle press when app was killed.
3. Parse the notification data payload to extract navigation info (e.g., screen name, ID).
4. Navigate using your navigation library (React Navigation) once the listener triggers.

Expo template:

Notifications.addNotificationResponseReceivedListener(response => {
  const data = response.notification.request.content.data;
  if (data.screen) {
    navigation.navigate(data.screen, { id: data.id });
  }
});

📊 Expected results: User navigates to correct screen on notification tap (96% of the time).

Tactic 3.3: Add Data Payload to Notifications

Why this works: Data payloads allow you to customize actions when the notification is tapped.

Exactly how to do it:

1. When sending a notification from your backend, include a data object with keys like screen, id, action.
2. Ensure the data payload is not too large (max 4KB for FCM).
3. On the client, parse the data in the notification response handler.
4. Test with a sample payload before going live.

📊 Expected results: Rich navigation actions with no extra code.

Phase 4: Testing and Analytics

Testing push notifications thoroughly is critical. A single misconfiguration can lead to crashes or missed notifications. We recommend a three-stage testing strategy: development, staging, and production with A/B tests.

Tactic 4.1: Use FCM Console for Manual Testing

Why this works: The Firebase Console allows you to send test notifications to specific devices instantly.

Exactly how to do it:

1. In Firebase Console, go to Cloud Messaging > Send your first message.
2. Choose a device by entering the token or targeting a topic.
3. Compose a notification with title, body, and optional data payload.
4. Send and check if the device receives it.
5. Repeat for iOS and Android separately.

📊 Expected results: Test message delivered within 5 seconds.

Tactic 4.2: Implement Analytics with Firebase

Why this works: Measuring notification effectiveness helps optimize engagement. Firebase Analytics provides built-in tracking for notification opens.

Exactly how to do it:

1. Enable Firebase Analytics in your project.
2. Use messaging().onMessage (bare) or Notifications.setNotificationHandler (Expo) to log events.
3. Track custom events like notification_open and notification_received.
4. Create a funnel in Firebase Analytics to see drop-offs.
5. Use BigQuery for advanced analysis if needed.

📊 Expected results: See open rates in Firebase Console within 24 hours.

Tactic 4.3: A/B Test Notification Content

Why this works: Small changes in copy can increase open rates by 20%.

Exactly how to do it:

1. Define an A/B test with two variants: different title, body, or image.
2. Use Firebase A/B Testing or a third-party tool like OneSignal.
3. Run the test on 10% of your user base for 7 days.
4. Measure open rates and conversion (e.g., in-app purchase).
5. Implement the winning variant.

Pro tip: Personalize notifications with user name or location (e.g., “Dhaka offer just for you!”).

📊 Expected results: 15–25% increase in open rates.

🏆 Real Case Study: How a Dhaka-Based E-Commerce App Boosted Sales by 35%

Before: A local Dhaka fashion app, “DhakaTrends”, had 50k users but only 8% monthly active users. They were not using push notifications at all.

Strategy implemented by Rafirit Station (over 4 weeks):

• Integrated FCM with React Native (bare workflow) within 5 days.
• Segmented users based on browsing history (men, women, kids).
• Set up triggered notifications: abandoned cart, price drop, new arrivals.
• Used personalized titles (e.g., “Hey [Name], your cart is waiting!”).
• Conducted A/B testing on copy and send times.

After: Within 60 days, push notifications drove a 35% increase in repeat purchases. Monthly active users rose to 24%. Average order value increased by 12%, bringing an additional ৳2.5 lakh in monthly revenue.

The client said: “We were skeptical about notifications at first, but the ROI was immediate. Our Dhaka customers love personalized deals.”

See more Rafirit Station case studies →

✅ Push Notification Implementation Checklist

❓ Frequently Asked Questions

🎯 The Bottom Line

Push notifications are not just an add-on—they’re a retention lifeline for React Native apps. The setup is straightforward if you follow the phases we’ve outlined. However, the real competitive advantage lies in how you segment and personalize your messages. A 10% increase in open rates can translate to ৳1 lakh extra revenue for a mid-size app in Dhaka.

Here’s a counterintuitive insight: more notifications do not always mean better engagement. In our experience, reducing frequency by 30% and focusing on high-value triggers (e.g., abandoned cart, price drop) actually increased open rates by 25% for a local startup. Quality over quantity truly applies.

The technology is mature; the challenge is strategy. Use the checklist above to ensure you’ve covered the basics, then experiment with timing, copy, and segmentation.

⚡ Your Next Step (Do This Today)

1. Set up a Firebase project and download config files (30 minutes).
2. Install the required packages and request permission (15 minutes).
3. Write a test notification sender using Firebase Console (5 minutes).
4. Review your current app’s user segments and define 3 trigger events (30 minutes).
5. Schedule a free strategy call with us to optimize your setup [link below].

💬 Drop “push notifications” in the comments and we’ll send you our free React Native push notification checklist — no email required.