DEV Community

Cover image for Push Notification | React Native | Android

Posted on

Push Notification | React Native | Android

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.



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

npm install --save react-native-push-notification
Enter fullscreen mode Exit fullscreen mode

Setting up Android Files

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

 ext {
        googlePlayServicesVersion = "+"
        firebaseVersion = "+"
Enter fullscreen mode Exit fullscreen mode

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

<uses-permission android:name="android.permission.WAKE_LOCK" />
        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:permission="" >
                <action android:name="" />
                <category android:name="${applicationId}" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
                <action android:name="android.intent.action.BOOT_COMPLETED" />
        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/>
        <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
            android:exported="false" >
                <action android:name="" />
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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

    <color name="white">#FFF</color>
Enter fullscreen mode Exit fullscreen mode

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 
      onRegister: function (token) {
        console.log('TOKEN:', token);
      onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
      permissions: {
        alert: true,
        badge: true,
        sound: true,
      popInitialNotification: true,
      requestPermissions: true,

Enter fullscreen mode Exit fullscreen mode

For Local Notifications,

// Function for Local Notification
  const localPushNotification = () => {
      title: 'Local Notification',
      message: 'This is a local notification example',
Enter fullscreen mode Exit fullscreen mode


For Scheduled Notifications,

//Function For Scheduled Notification
  const scheduledNotification = () => {
      title: 'Scheduled Notification',
      message: 'Scheduled Notification Message', // (required)
      date: new Date( + 60 * 300),
Enter fullscreen mode Exit fullscreen mode


Wrap up

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

GitHub logo tpmabdulkareem / Push-Notification-App

A simple example for react native push notification


Top comments (1)

fabianobj profile image
100% Fantastico • Edited

congratulations my friend! I made the project pass by step. but the notification does not arrive with the app closed. could help in this part.