Push Notification | React Native | Android

#reactnative #react #javascript #tutorial

In React Native, most of the developers use third-party services like Firebase or OneSignal for Push Notification service. Here through this tutorial, I wish to show you how we can do Push Notification without these third-party services.

We can do this by React Native Push Notifications library.we can create both local push notifications and scheduled ones too. This would be similar to having set an event in the app or even a timer to trigger a notification while running the app, or even after it has been closed.

Installation

Open your project folder in your favourite editor. Install react-native-push-notification package.

npm install --save react-native-push-notification

Setting up Android Files

Open android/build.gradle and add the following changes:

 ext {
        googlePlayServicesVersion = "+"
        firebaseVersion = "+"
        ...
    }

After that, open AndroidManifest.xml and add following changes:

...
<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" /> 
    <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"/>
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                    android:resource="@android:color/white"/>
        <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>
        <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"/>
        <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>

After that, In android/settings.gradle

include ':react-native-push-notification'
project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android')

And finally, create the file android/app/src/res/values/colors.xml and add the following:

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

That's it for the Android Setup!

Putting it all together!

Open your App.js and add the following

import PushNotification from 'react-native-push-notification';

...

//Push Notification configuration 
    PushNotification.configure({
      onRegister: function (token) {
        console.log('TOKEN:', token);
      },
      onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
        notification.finish(PushNotificationIOS.FetchResult.NoData);
      },
      permissions: {
        alert: true,
        badge: true,
        sound: true,
      },
      popInitialNotification: true,
      requestPermissions: true,
    });

For Local Notifications,

// Function for Local Notification
  const localPushNotification = () => {
    PushNotification.localNotification({
      title: 'Local Notification',
      message: 'This is a local notification example',
    });
  };

Preview

For Scheduled Notifications,

//Function For Scheduled Notification
  const scheduledNotification = () => {
    PushNotification.localNotificationSchedule({
      title: 'Scheduled Notification',
      message: 'Scheduled Notification Message', // (required)
      date: new Date(Date.now() + 60 * 300),
    });
  };

Preview