Implement Push Notification in React Native using Expo in just 5 min

Implement Push Notification in React Native using Expo in just 5 min

Back in days of native mobile application development, implementing push notification was a complex part of your application. It used to take lot of development efforts and time. But hey! we are in React Native era now, where you have the power of JavaScript to implement it easily. And thanks to Expo to made it so easy to configure and use it in our react native app.

Today, we’ll use expo to implement push notification in our simple react native app.

First understands some basics,

What is push notification and why do we need this?

Push notification is an automated message sent by an application to a user when the application is not open. App owners will receive push notifications whenever new content is uploaded.

A text message will bring you to your messaging app, while a push notification will bring the user to whatever app sent the message. Push notifications are much better because the user knows exactly who it’s coming from. It’s clear that the message is from the app that they’ve installed on their device.

What is Expo?

Expo is a set of tools and services for building, deploying, and quickly iterating on native iOS, Android, and web apps from the same codebase.

Now lets dive into the actual implementation and we will understand it step-by-step.

1. Install Expo CLI and create new project

First thing you need to have Expo CLI installed globally on your development machine. You can install it by using npm command :

**npm install -g expo-cli**

After installing Expo CLI create a new project using command:

**expo init ReactNativePushNotification**

Expo CLI will ask you to choose between templates, choose ‘blank’ under the Managed workflow section. Expo CLI is now initializing a new project: it copies a basic template and installs react, react-native and expo. When the project is initialized and ready to go, the command will exit.

2. Install Permissions Module

When it comes to adding functionality that can access potentially sensitive information on a user’s device, such as their location, or possibly send them unwanted push notifications, you will need to ask the user for their permission first. To do so we need to add Permissions module in our app.

Install Permissions module using below expo cli command,

**expo install expo-permissions**

This will add dependency in your package.json file. Here are the dependencies at the time of building this project:

**"expo": "^35.0.0",  
"expo-permissions": "~7.0.0",  
"react": "16.8.3"**

3. Get Token For Push Notification

Now that we have permission module installed, we will use it to get NOTIFICATION token from user. For that we first need to ask user to grant permission.

Focus on the function getPushNotificationPermissions . This function asks user to grant notification permission and prints the token on console. If you run this with yarn start , you will see the token printed in you shell console as below.

ExponentPushToken

The token ExponentPushToken[YPU4bUD2NANefVgvBa9ANi] is used to uniquely identify the device and send notification to it.

4. Send Notification To Our App

It’s time to buckle up and get ready to send our first notification. For that we need a tool which will generate a notification request and send it to our app. Expo has provided a tool for that

Expo - Push notification tool

Open this tool and add below information in the form shown,

Expo Push Notification Tool

Here , you will notice that the Expo Push Token is nothing but the token that we have generated earlier in our app.

Now, keep your app running on your mobile and hit the ‘Send a notification’ button at the bottom of the tool. You will get a notification right on top of your mobile screen. Cool, isn’t it!

ReactNativePushNotification

Conclusion

We have successfully created a react native app(with Expo) which allows user to receive and display push notifications. You can find the final code in the GitHub repo,

RishikeshVedpathak/ReactNativePushNotification

I hope this will help you to understand and encourage you to freely use Expo for with React Native. Please feel free to give feedback and suggestions!

And more...

• Check Hybrowlabs for React app development services.

Comments

[Gaurav Vaidya]

Hi Rishikesh. Thanks for the great guide! I'm trying to build an app that sends push notifications every x minutes. Is there a way to do it with Expo? Or will I have to build something else that calls the push notification tool every x minutes?

[Shmuel Leider]

Thank You Rishikesh!