Here a comprehensive guide on how to send push notifications in a React Native application using Firebase Cloud Messaging (FCM).
Prerequisites
Node.js and npm: Make sure you have Node.js and npm installed.
React Native CLI: Install React Native CLI if you haven’t already.
Firebase Project: Create a project on the Firebase Console.
Firebase CLI: Install Firebase CLI to configure your project.
Step-by-Step Guide
1. Create and Configure Firebase Project
Go to the Firebase Console.
Click on “Add Project” and follow the prompts to create a new project.
Navigate to “Cloud Messaging” and copy the Server key and Sender ID. These will be needed later.
2. Set Up React Native Project
Initialize a new React Native project:
cd FirebasePushNotification
3. Install Required Packages
Install Firebase and FCM libraries:
4. Configure Firebase with Your React Native App
iOS Configuration:
Navigate to the Firebase Console, select your project, and go to “iOS App.”
Register your app with the iOS bundle ID.
Download the GoogleService-Info.plist file and place it in the ios/ directory of your React Native project.
Open the ios/YourProjectName.xcworkspace in Xcode.
Drag and drop GoogleService-Info.plist into your project.
Ensure FirebaseAppDelegateProxyEnabled is set to YES in the Info.plist.
Android Configuration:
Navigate to the Firebase Console, select your project, and go to “Android App.”
Register your app with the Android package name.
Download the google-services.json file and place it in the android/app directory.
Modify android/build.gradle to include the Google services classpath:
dependencies {
classpath ‘com.google.gms:google-services:4.3.10’
}
Update android/app/build.gradle to apply the Google services plugin:
apply plugin: ‘com.google.gms.google-services’
5. Implement Notification Logic
iOS Setup:
Open ios/YourProjectName/AppDelegate.m.
Import Firebase and configure it:
#import <Firebase.h>
In the application:didFinishLaunchingWithOptions method, configure Firebase:
– (BOOL)application🙁UIApplication *)application didFinishLaunchingWithOptions🙁NSDictionary *)launchOptions {
[FIRApp configure];
return YES;
}
Android Setup:
Modify android/app/src/main/java/com/yourprojectname/MainApplication.java to include Firebase:
import io.invertase.firebase.app.ReactNativeFirebaseAppPackage;
Update the getPackages method:
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactNativeFirebaseAppPackage()
);
}
6. Implement Notification Handling in React Native
Import and configure messaging in your React Native code:
async function requestUserPermission() {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
console.log(‘Authorization status:‘, authStatus);
}
}
useEffect(() => {
requestUserPermission();
const unsubscribe = messaging().onMessage(async remoteMessage => {
console.log(‘A new FCM message arrived!‘, JSON.stringify(remoteMessage));
});
return unsubscribe;
}, []);
7. Send a Test Notification
Using Firebase Console:
Navigate to the “Cloud Messaging” section of your Firebase project.
Click “Send your first message” and fill in the required fields. Choose your target device (or all devices).
Click “Send” to dispatch the notification.
Using Firebase Admin SDK (Server-side):
Set up Node.js and install the Firebase Admin SDK:
npm install firebase-admin
Initialize the Admin SDK and send a notification:
const admin = require(‘firebase-admin‘);
const serviceAccount = require(‘./path/to/serviceAccountKey.json‘);
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: ‘https://<your-database-name>.firebaseio.com‘
});
const message = {
notification: {
title: ‘Hello‘,
body: ‘World‘
},
token: ‘<device-token>‘
};
admin.messaging().send(message)
.then((response) => {
console.log(‘Successfully sent message:‘, response);
})
.catch((error) => {
console.log(‘Error sending message:‘, error);
});
Conclusion
You now have a React Native app set up to receive push notifications via Firebase Cloud Messaging. Ensure you handle permissions, foreground and background notifications correctly in your code to provide a seamless user experience.
