Getting Started with Firebase Cloud Messaging in React Native

The first hurdle is always the config

I still remember the first time I tried to add push notifications to a React Native project. It was about four years ago, and I thought it would be a quick afternoon task. I was very wrong. Between the Gradle sync errors and the missing JSON files, I spent way more time debugging my environment than actually writing code. But honestly, once you get the foundation right, the rest of the MERN stack integration feels like a breeze.

The setup you actually need

Before you even touch your Javascript files, you have to get the native side talking to Firebase. You’ll need to head over to the Firebase Console, create a project, and download that google-services.json for Android. It goes into your android/app folder. If you miss this, the app will just crash on startup with a cryptic error that doesn’t tell you much. For the library, I always stick with @react-native-firebase/app and @react-native-firebase/messaging. They are the industry standard for a reason.

// First, install the core and messaging modules
// npm install @react-native-firebase/app @react-native-firebase/messaging

import messaging from '@react-native-firebase/messaging';

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);
  }
}

Getting that device token

The most important part of this whole process is getting the FCM token. Think of this as the mailing address for that specific phone. You’ll want to grab this token and send it to your backend. In my MERN setups, I usually store this in a User schema in MongoDB. But here is a tip I learned the hard way. Tokens can change. They expire or get refreshed when an app is restored on a new device. So you should always listen for token refreshes using the onTokenRefresh method. If you don’t do this, you’ll end up sending notifications to dead addresses, and your delivery rates will tank.

Setting this up is basically the rite of passage for mobile developers. It feels tedious when you’re doing it, but seeing that first notification pop up on your physical device makes it all worth it. Don’t let the initial setup frustrate you. We’ve all been there, staring at a red screen of death because of a typo in the build.gradle file. Stick with it, and once the bridge is built, the real fun begins.

Hasnain Alam, Full-Stack Developer | hasnainalam.com