📱 Send Mobile Push Notifications with React Native (Android)

Overview

Sending push notifications to Android devices is exclusively handled by Google’s Firebase Cloud Messaging (FCM). Implementing this from scratch requires significant backend infrastructure to manage device tokens and communicate with FCM.

NotificationAPI simplifies this process by managing the entire backend complexity for you. Our React Native SDK handles device token registration, and our service sends the notifications through FCM on your behalf.

The setup process is as follows:

1. Set up Firebase
2. Connect NotificationAPI to FCM
3. Install and initialize the NotificationAPI React Native SDK
4. Verify device registration
5. Send a notification from your backend

1. Set up Firebase

If you haven’t already set up Firebase for your React Native Android app, follow Google’s official documentation:

• Add Firebase to your Android project

This will guide you through:

• Creating a Firebase project (if needed)
• Adding your Android app to the project
• Downloading and placing the google-services.json file in android/app/
• Adding the Google Services plugin to your build.gradle files

2. Connect NotificationAPI to FCM

To allow NotificationAPI to send notifications on your behalf, you need to provide it with your Firebase project’s credentials.

1. In the Firebase Console, go to Project Settings > Service Accounts.
2. Click Generate new private key. A JSON file containing your service account key will be downloaded.

3. Go to your NotificationAPI Dashboard and navigate to the settings/push.
4. Find the Android (FCM) form and copy the contents of the JSON file including the {} into the field and save.

Your NotificationAPI account is now connected to your Firebase project.

3. Install and initialize the NotificationAPI React Native SDK

Our React Native SDK makes it easy to register the device for push notifications.

Install the SDK:

npm install @notificationapi/react-native
# or
yarn add @notificationapi/react-native

Then, initialize the SDK in your app (e.g., in App.tsx or your main component):

import NotificationAPI from '@notificationapi/react-native';

// Initialize when your app starts
await NotificationAPI.setup({
  clientId: 'YOUR_CLIENT_ID', // from NotificationAPI dashboard
  userId: 'user123', // your app's user ID
  autoRequestPermission: true, // automatically request push permissions
  region: 'us' // 'us' (default), 'eu', or 'ca'
});

This will automatically handle requesting push permissions and registering the device token with NotificationAPI.

Parameters

4. Verify device registration

After running the app with NotificationAPI.setup(...) on a real device:

• Go to the NotificationAPI Dashboard and navigate to the EndUsers page
• Search for the userId you passed in the code
• Confirm Mobile Push is marked with the Android icon (token synced)

5. Send a notification from your backend

With the SDK initialized, you can now trigger notifications from your backend. The userId must match the one used to initialize the SDK.

Here’s an example using cURL:

curl -X POST \
  -H "Authorization: Bearer <YOUR_AUTH_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "new_comment",
    "to": {
      "id": "user123",
      "email": "test@example.com"
    },
    "parameters": {
      "comment": "This is a test comment"
    }
  }' \
  "https://api.notificationapi.com/<YOUR_CLIENT_ID>/sender"

Schematic Diagram

This diagram illustrates the entire flow, from app initialization to receiving a notification.

Frequently Asked Questions (FAQs)

Why are my notifications not arriving?

There can be several reasons:

• FCM Setup: Double-check that your google-services.json is correct and that your service account key is correctly uploaded to the NotificationAPI dashboard.
• User ID Mismatch: Ensure the userId in your React Native app is identical to the one you’re sending to in the backend API call.
• Device/Emulator Issues: Ensure your device or emulator has Google Play Services installed and is connected to the internet.
• App State: On some Android versions, notification delivery behavior can change if the app is in the foreground, background, or terminated. Check Android’s documentation for details.

How are expiring FCM tokens handled?

NotificationAPI handles expiring FCM tokens automatically. Should tokens stop working for any reason, you’ll see the warnings in the logs in the dashboard. You do not need to handle any errors on your end, and this doesn’t count towards your usage.

ClassNotFoundException for FirebaseMessagingService

The FirebaseMessagingService is automatically registered by the SDK. If you encounter this error:

• Ensure you’re using the latest version of @notificationapi/react-native
• Clean and rebuild: cd android && ./gradlew clean && cd .. && npx react-native run-android
• Verify the SDK’s AndroidManifest.xml is being merged correctly by checking the merged manifest at android/app/build/intermediates/merged_manifest/debug/processDebugMainManifest/AndroidManifest.xml