Push Notification | React Native | Android
Tags: reactnative, react, javascript, tutorial
Published: 2020-04-08 12:31:28

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](npmjs.com/package/react-native-push-notification) 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. 

![Gif](https://cdn.dribbble.com/users/310943/screenshots/2518631/push-notifications-illustration2.gif "Push Notification")


### 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](https://d3ep2kbadr6005.cloudfront.net/krmblog/Local%20Notifications.gif)

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](https://d3ep2kbadr6005.cloudfront.net/krmblog/Scheduled%20Notifications.gif)

### Wrap up
If everything was successful you should be able to schedule local notifications! Here the complete repo for the project: 

[<img src="https://github.com/tpmabdulkareem/Push-Notification-App/raw/master/Screenshot_1586341482.png" width="250"/>](image.png)

{% github https://github.com/tpmabdulkareem/Push-Notification-App no-readme %}
 

### Sources
[https://github.com/zo0r/react-native-push-notification#readme](https://github.com/zo0r/react-native-push-notification#readme)