Android React Native Setup

Last Edit: Mar 03 2020

For Android, we’ll be using Firebase Cloud Messaging to power push notifications:

Step 1 - Get your google-services.json

  • Go to the Firebase Console, create a new application OR select an existing project.

  • Go to Project Settings and under the General tab.

  • Click on Your Apps, add an Android application, and download your google-services.json file – you need to put this in the root of your projects android directory.

Step 2 - Configure google-services

Put google-services.json in the root of your project's android directory (e.g. ./android.

Make sure google-services.json file is included in your Android project’s dependencies by navigating to your project level build.gradle file (./android/build.gradle) and adding the following line:


buildscript {
	// ...
	dependencies {
		// ...
		classpath 'com.google.gms:google-services:+'
		// ...	
	}
	// ...
}
                    

Step 3 - Setup dependencies

In the same directory, find the settings.gradle file and copy the following content into the file if it isn’t already there


include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android')
                    
When you previously ran react-native link, it should have added the necessary files; however, it’s best to always double check. Linking can be temperamental at times.

Navigate to ./android/app/src and check you have the res folder. If not, create it and inside create another folder values. Then create a new file named colours.xml whose content is the following


<resources>
   <color name="white">#FFF</color>
</resources>
                    

Linking may have also taken care of this step, but once again, navigate to  MainApplication.java  in  android/app/src/main and check that it has these two parts, as highlighted with comments:


import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;  // <--- Import Package

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
      @Override
      protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
      }

      @Override
      protected List<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactNativePushNotificationPackage() // <---- Add the Package
      );
    }
  };

  ....
}
                    

Go to android/app/src/main/AndroidManifest.xml and copy the following (the comments below will help guide you for your particular setup)


.....
<!-- < Only if you're using GCM or localNotificationSchedule() > -->
<uses-permission android:name="android.permission.WAKE_LOCK" />
<permission
    android:name="${applicationId}.permission.C2D_MESSAGE"
    android:protectionLevel="signature" />
<uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
<!-- < Only if you're using GCM or localNotificationSchedule() > -->
        
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
        
<application ....>
    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
            android:value="YOUR NOTIFICATION CHANNEL NAME"/>
    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
                android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/>
    <!-- Change the resource name to your App's accent color - or any other color you want -->
    <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                android:resource="@android:color/white"/>
        
    <!-- < Only if you're using GCM or localNotificationSchedule() > -->
    <receiver
        android:name="com.google.android.gms.gcm.GcmReceiver"
        android:exported="true"
        android:permission="com.google.android.c2dm.permission.SEND" >
        <intent-filter>
            <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            <category android:name="${applicationId}" />
        </intent-filter>
    </receiver>
    <!-- < Only if you're using GCM or localNotificationSchedule() > -->
        
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
    <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
        <intent-filter>
            <action android:name="android.intent.action.BOOT_COMPLETED" />
        </intent-filter>
    </receiver>
    <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
        
    <!-- < Only if you're using GCM or localNotificationSchedule() > -->
    <service
        android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
        android:exported="false" >
        <intent-filter>
            <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        </intent-filter>
    </service>
    <!-- </ Only if you're using GCM or localNotificationSchedule() > -->
        
    <!-- < Else > -->
    <service
        android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
        android:exported="false" >
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
    <!-- </Else> -->
 .....
                    

Unlike iOS, the Android emulator does support push notifications - just make sure you use an emulator with Google Play Services installed (shown by the Play Store Icon in the AVD Manager)