React Native Android Setting Up Firebase

📘

Objective

To configure a Firebase Cloud Messaging (FCM) Server Key to the Bubbl Dashboard to allow notifications to be sent from the Bubbl Platform through Firebase to a Bubbl enabled React Native Android app.

📘

Audience

React Native App Developer
Dashboard Administrator

Prerequisites

You must have a FCM Server Key, if you need assistance please see our How to create an Androd Push Notification Certificate guide.

You will also require your google-services.json file from Firebase Console.

Configure FCM Server Key on Bubbl Dashboard

Navigate to the SDK Configurations page on the Bubbl Dashboard, then select the Android Certificate tab.

Copy and paste the FCM Server Key into the box provided and press Save.

Integrate Firebase into your app

app/src/main/AndroidManifest.xml

<application
      android:name=".MainApplication"
      ...
      >
        <meta-data
            android:name="default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />

        <meta-data
            android:name="default_notification_channel_name"
            android:value="@string/default_notification_channel_name" />

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="fcm_default_channel" />
        ...
</application>

android/app/build.gradle

...
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
...
dependencies {
   ...
   implementation 'com.google.firebase:firebase-messaging:21.1.0'
  implementation 'com.google.firebase:firebase-core:21.1.1'
  implementation 'com.google.firebase:firebase-crash:16.2.1'
  implementation 'com.google.firebase:firebase-auth:21.1.0'
   ...
}
...
apply plugin: 'com.google.gms.google-services'

📘

app/google-services.json

This file is automatically generated when you set up Firebase for Android.

Add the following file, remembering to change the com/yourpackage to the package of your app.

app/src/main/java/com/yourpackage/MyFirebaseMessagingService.java

package com.yourpackage;

import tech.bubbl.sdk.BubblSdk;
import tech.bubbl.sdk.BubblSdkManager;
import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;
import java.util.Map;

public class MyFirebaseMessagingService extends FirebaseMessagingService {
    private final String MESSAGE_KEY = "data";

    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        Map<String, String> messageMap = remoteMessage.getData();

        String data = messageMap.get(MESSAGE_KEY);
        if (data == null) {
            return;
        }

        BubblSdkManager.getInstance(
                getApplicationContext()).handleFireBaseMessage(
                getApplicationContext(), data);
    }

    @Override
    public void onNewToken(String token) {
        // If you want to send messages to this application instance or
        // manage this apps subscriptions on the server side, send the
        // Instance ID token to your app server.
        BubblSdk.registerPushToken(getApplicationContext(), token, this);
    }
}

app/src/main/AndroidManifest.xml

<application
      android:name=".MainApplication"
      ...
      >
      ...
      <meta-data
                android:name="com.google.android.geo.API_KEY"
                android:value="@string/google_api_key" />
      ...
        <service android:name="your-package.MyFirebaseMessagingService" android:exported="true">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
        ...
</application>

app/src/main/res/values/strings.xml

...
  <string name="default_notification_channel_id" translatable="false">fcm_default_channel_id</string>
  <string name="default_notification_channel_name" translatable="true">fcm_default_channel_name</string>
...