React Native Local Push Notifications

Saad Khan
Saad Khan
Aug 27 · 6 min read
Photo by Jamie Street on Unsplash

Background

A lot of times in our app, we need to set up local push notifications. What do we mean by local notifications? Basically, the push notification does not trigger from cloud service, for example, a firebase push notification is a remote push notification service. Similarly, we have other push notification services for remote notifications.

However, sometimes we just want to set notifications from our app side. Let’s say we have a reminder system in our app and when the user sets a time we will need to set up a notification at that particular time.

We will see how we can achieve that in this blog post. We will be using a very good package called react-native-push-notification. In this post, I will be showing the android part, in the next post I will writing on iOS.

Demo Starts

Let’s start! First thing first, we need a demo app to show that our notifications are working. So, let’s create a demo app.

For the demo purpose, we need to have a DateTime input so that the user can set the notification time. For the DateTime picker, I am going to install react-native-date-picker. After installing this package, we will set up our demo component.

demo component

With the above, we get the following output.

our app

Our demo app is all set up. Now let’s go to the main focus of this blog post — Notification. First, I am going to install the notification package.

Package setup

Don’t forget to pod install for iOS. We can basically follow the readme from the package, but since our main focus is local push notification we will ignore anything related to firebase setup from the documentation.

Android setup (Written from the official readme)

Just copy-paste this following portion in your AndroidManifest.xml file inside <application> , don’t forget to change the app name according to your app name where necessary.

also, add the permission at the top.

One important setting to add, from the documentation — “If not using a built-in Android color (@android:color/{name}) for the notification_color meta-data item. In android/app/src/main/res/values/colors.xml (Create the file if it doesn’t exist).”

In my case for this demo app, I created the file inside android/app/src/main/res/values/colors.xml and add the following inside this file.

With that our android native side’s setting is done! Now it is time to go back to our React Native App.

iOS setup (Written from the official readme)

For our iOS setup, we need to first install @react-native-community/push-notification-ios. We can do that by yarn add @react-native-community/push-notification-ios and then we need to run pod install it in our ios folder of the app. Now we need to follow few steps to make the iOS setup complete.

1. Add Capabilities: Background Mode — Remote Notifications

Go into your NotificationDemo/ios dir and open MyProject.xcworkspace workspace. Select the top project “NotificationDemo” and select the “Signing & Capabilities” tab. Add 2 new Capabilities using the “+” button:

  • Background Mode capability and tick Remote Notifications.
  • Push Notifications capability

2. Update AppDelegate.h

At the top of the file:

#import <UserNotifications/UNUserNotificationCenter.h>,

Then, add the ‘UNUserNotificationCenterDelegate’ to protocols: @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

3. Update AppDelegate.m

At the top of the file:

Then, add the following lines:

And then in your AppDelegate implementation, add the following:

App side setup

In order to use react-native-push-notification, first, we will create a Notifications class that will hold the common configurations and services needed by the app. We can not initialize our Notifications inside a component, so it needs to be outside a component and should be at the root of our project.

I will be creating a Notifications class and export its instance directly from the file. In that way, it will work as a singleton. Whenever we import the Notification class in any of our components it will be initialized one time and will be used throughout the whole app.

Let us see our Notifications class now –

notifications class

Few breakdowns of the above class

  • We need to call configure first to initialize our PushNotification, note that we do not really need our onRegister func and onNotification func for this demo. But we do need to create the channel, without the channel the notifications won’t work
  • Next, we see the function called scheduleNotification which we will be using from our main app component. When a user sets a date, we can also notice that it receives a date object. scheduleNotification will schedule a local push notification for us at the DateTime we pass to its’ option. We need to also mention channelD for it to work. A lot more customizations can be done. We are just setting a title and message for now.

That’s all! Now we just need to use this class in our main app component. We can do it when the user presses the SET NOTIFICATION button.

Let’s see our final demo, Please note that for demo purposes I schedule my notification after 5 seconds.

android demo
iOS demo

Here is the git repo for this demo. That’s it for today, hopefully, in my next blog post, we will see this on iOS.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Saad Khan

Written by

Saad Khan

React-Native | JS | Native Android | Node | A Learner

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.