Send notifications using expo-notifications(Part 1)

5 min readOct 25, 2020

Notifications vs Push Notifications

Local Notifications: They are scheduled, handle and triggered in the same device and are triggered inside the device. These notifications are not visible to other users.

Example: Reminder App to show notifications

Push Notification: Not triggered inside the app but are send due to some action outside the app. That can include database, updates, messages from other users or the admins.

They are send remotely to one or many users at the same time which corresponds to some action that is involved after clicking on the notification such as opening the app or start a conversation with other user etc.

Example: E-Commerce, Chat, Email, Marketing Notifiactions

This article focus on expo push notifications that are easy to execute and all the hassle with native device information and communicating with APNs (Apple Push Notification service) or FCM (Firebase Cloud Messaging) is taken care of behind the scenes, so that you can treat iOS and Android notifications the same, saving you time on the front-end, and back-end!

So without wasting much time, lets get into implementing Local Notification that will be used later to implement Push Notification.

Step 1: Initialize the project

Step 2: Starting the developer server

Step 3: Start the app on your android/ios device/emmulator

Download expo app on your device and scan the qr code from your device to open the bare expo app.

Note: expo push notifications will not work on emulator devices, so it is recommended to test the app on a real device.

Implementing Local Notifiaction

Step 1: Install expo-notifications package in the project and import it

Step 2: Now add a button inside your App.js file which triggers a function triggerNotificationHandler() onPress.

Define the function above return();

Inside the triggerNotificationHandler using the Notifications object imported above use scheduleNotificationAsync() method. It is used to schedule a notification asynchronously. This method always creates a local push notification.

const triggerNotificationHandler = () => {
Notifications.scheduleNotificationAsync();
};

Step 3: Add the following objects in scheduleNotificationHandler method:

content- pass ‘title’ and ‘body’ as the properties
trigger- pass ‘seconds’ as the property

Step 4: Go to app.json file and add “android” entry with the “useNextNotificationsApi” with the value as true.

Note: Step 4 is essential to receive notifications on Android devices only.
Step 5: In case of ios, the user has to grant permission to receive the notifications on their device. To get that setup, install expo-permissions package.

Step 6: Import Permissions from expo-permissions and useEffect hook from react. Create a useEffect hook above triggerNotificationHandler and use the Permissions object to check the permission status and if required, ask for it.

Permissions.getAsync() will be used for checking the current permission status. Pass Permissions.NOTIFICATIONS as value in getAsync() function.

Permissions.getAsync(Permissions.NOTIFICATIONS)

This will do nothing in case of Android but in case of ios it returns a promise.

Using .then we handel the promise by passing statusObj object and checking the status property of the object equal to ‘granted’ or not. If the permission is not granted, then ask for the notification permission with Permissions.askAsync() method and further if the permission is not granted, the function returns nothing.

After this step, the local notification system will work. Restart the app and click on the button. After clicking the button, minimise the application to receive the notification after 10s(if in trigger seconds:10 is set).

Note: You cannot receive notifications with the current code, if your app is open(foreground) and not minimised(background).

To receive notifications in the foreground(when the app is open)

Step 1: Use Notifications.setNotificationHandler() to inform android/ios about how to display the notifications before receiving them on the respective devices. Inside the function pass handleNotification property with needs an async function that returns an object which intimates the system of what should happen if a notification is received. Use shouldShowAlert property and set it to true.

Step 2: When the notification is received, a specific task can be performed by adding another method using the react useEffect hook below the previously used useEffect.
Notification.addNotificationRecievedListener(used when the app is open in foreground)
Notification.addNotificationResponseReceivedListener(When the app is closed i.e. in background)