Introduction
Push notifications keep users engaged by delivering timely updates even when an app is not active. In mobile development, Firebase Cloud Messaging (FCM) is one of the most reliable solutions for sending notifications across Android and iOS. When combined with React Native, it enables cross-platform push notifications with a single backend setup. In this guide, you will learn how push notifications work, how to integrate FCM into a React Native app, and how to follow best practices for secure and reliable delivery.
Why Use Firebase Cloud Messaging in React Native
Choosing the right notification service affects reliability, user experience, and maintenance. FCM is widely used because it provides strong infrastructure and simple APIs.
• Supports both Android and iOS
• Handles device tokens automatically
• Scales to millions of users
• Integrates well with Firebase services
• Free for most common use cases
As a result, FCM is a common choice for production-ready React Native apps.
How Push Notifications Work
Before integrating FCM, it helps to understand the flow.
• App registers with FCM
• Device receives a unique token
• Token is sent to your backend
• Backend sends messages to FCM
• FCM delivers notifications to devices
This flow keeps sensitive logic on the server and ensures reliable delivery.
Setting Up Firebase for React Native
Start by creating a Firebase project and enabling Cloud Messaging.
Install Required Dependencies
npm install @react-native-firebase/app @react-native-firebase/messaging
After installation, follow the platform-specific setup steps for Android and iOS.
Configuring Android Notifications
Android setup requires registering your app with Firebase.
• Add google-services.json to the Android project
• Enable Firebase Cloud Messaging
• Update Gradle files as required
• Request notification permissions on Android 13+
Once configured, Android devices can receive push notifications.
Configuring iOS Notifications
iOS setup requires additional steps due to stricter permissions.
• Enable Push Notifications in Xcode
• Enable Background Modes for remote notifications
• Upload APNs key to Firebase
• Request user permission explicitly
await messaging().requestPermission();
Without permission, notifications will not appear on iOS devices.
Getting the Device Token
Each device has a unique FCM token used for targeting notifications.
import messaging from '@react-native-firebase/messaging';
const token = await messaging().getToken();
Send this token to your backend and store it securely.
Handling Foreground Notifications
When the app is open, notifications are not shown automatically. Instead, you must handle them manually.
messaging().onMessage(async remoteMessage => {
console.log('Foreground message:', remoteMessage);
});
This allows you to display custom UI or in-app alerts.
Handling Background and Quit State Messages
FCM delivers notifications differently when the app is in the background or terminated.
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Background message:', remoteMessage);
});
This ensures messages are processed even when the app is not active.
Notification vs Data Messages
FCM supports two message types.
Notification Messages
• Displayed automatically by the OS
• Best for simple alerts
• Limited customization
Data Messages
• Handled entirely by the app
• Full control over behavior
• Ideal for complex logic
Choosing the right type depends on your use case.
Sending Notifications from the Backend
Notifications should always be sent from a secure backend.
• Use Firebase Admin SDK
• Authenticate server requests
• Target devices by token or topic
• Avoid sending directly from the client
This approach prevents abuse and keeps credentials safe.
Topics and Group Messaging
FCM supports topics for broadcasting messages.
• Subscribe users to topics
• Send one message to many devices
• Useful for news and announcements
await messaging().subscribeToTopic('updates');
Topics simplify large-scale messaging.
Best Practices for Push Notifications
Reliable notifications require thoughtful design.
• Ask permission at the right time
• Keep messages short and clear
• Avoid sending too frequently
• Handle token refresh events
• Test on real devices
Good notification hygiene improves engagement and retention.
Common Pitfalls to Avoid
Ignoring Permission Flow
Requesting permission too early reduces opt-in rates.
Not Handling Token Refresh
Tokens can change, so always listen for updates.
Overusing Notifications
Too many notifications lead to users disabling them.
Avoiding these mistakes keeps notifications effective.
When Push Notifications Make Sense
Push notifications are ideal for:
• Messaging apps
• Order and delivery updates
• Reminders and alerts
• News and content updates
• User re-engagement
However, they should always provide clear value to users.
Conclusion
Push notifications with Firebase Cloud Messaging provide a reliable and scalable way to engage users in React Native apps. By handling permissions correctly, managing device tokens securely, and choosing the right message types, you can deliver timely and meaningful updates. If you are building cross-platform mobile systems, read “Integrating Payment Gateways (Stripe, PayPal) in Flutter.” For real-time communication patterns, see “WebSocket Servers in Python with FastAPI or Starlette.” You can also explore the Firebase Cloud Messaging documentation and the React Native Firebase messaging guide. With the right setup, push notifications become a powerful tool for user engagement.
