Handling Push Notification In React Native — Using Expo

Photo by Jamie Street on Unsplash

Imagine yourself in a business meeting, waiting for that facebook reply to get the big news! — Yh I used big news, you decide what the news is meant to be. You might never have the need to pick up your phone and open up the facebook application because you’re 100% sure when that message comes in you’d receive a notification.

But say we’re in a time where notifications don't exist, it would be clear to everyone in the meeting that you’re not with them, chances are you’d open up the Facebook app 5 to 10 times every 5minutes.

So believe it or not, notifications are really essential not just in mobile applications but every applications.

In this post, I’d be explaining how Expo handles push notifications as well as one of the easiest way to get push notification up and running in your react native application. Spoiler alert: it’s almost too easy.

So do relax, and have that cup of coffee in your hand as we get down to business.

How Expo handles push notification

Expo uses information about your device (called Expo push token) to send push notification.

Expo push token is unique each time an app is installed on a device. So the token you’d get after installing an expo app is different from the token which would be generated if that app was uninstalled and later installed on that same device.

Once you have the Expo push token, All we need to do is send this token to your server so you can associate it with the set user account and use it in the future for sending push notifications, or you could just initiate one directly in your app.

So yes they’re basically just two steps to follow, get the device expo push token and then Call Expo’s Push API with the user’s token! Yes, that easy :)

So let's try it out, first, we’ll;

Get the device expo push token

I assume you have React Native(Expo) set up on your machine if you have no idea how that's done you could check out how it’s done here.

Now then, in your App.js file, you’d have to get the device push token.

import {Platform} from ‘react-native’; 

componentWillMount(){
   // get expo push token
    token = await Expo.Notifications.getExpoPushTokenAsync();
} 
 

And that’s it! you have the expo push token for that device, which you can now associate with the current user.

Now we have the Expo push token, you’d want to send push notification to that device, to do this we’d need to;

Call Expo’s Push API with the user’s token

As I said, working with push notification in Expo is really simple, to send push notification to the device, you’d have to send a post request to the endpoint provided by Expo.

Most times you’d be sending push notification from your backend server, but it could also be done within your React Native application, so let's do that.

import {Platform} from ‘react-native’;
componentWillMount(){
   // get expo push token
  const token = await Expo.Notifications.getExpoPushTokenAsync();
fetch('https://exp.host/--/api/v2/push/send', {       
         method: 'POST', 
         headers: {
               Accept: 'application/json',  
              'Content-Type': 'application/json', 
              'accept-encoding': 'gzip, deflate',   
              'host': 'exp.host'      
          }, 
        body: JSON.stringify({                 
              to: token,                        
              title: 'New Notification',                  
              body: 'The notification worked!',             
              priority: "high",            
              sound:"default",              
              channelId:"default",   
                  }),        
      }).then((response) => response.json())   
               .then((responseJson) => {  })
                      .catch((error) => { console.log(error) });
}

And that’s it! Your device will receive a push notification.

Expo also allows you to create channels and define how you’d want notification associated with those channels to behave.

Well, now we have an idea of how Expo handles push notification, now for a little icing on the cake(drum roll), which is expo-push-notification-helper

expo-push-notification-helper

Yes, another npm package, deal with it.

Expo-push-notification-helper does the heavy lifting for you, it handles push notification for you, being able to;

• Get device expo push token
• Creates notification channels
• Send push notification

It is really a package that eases the push notification setup even more than it already is.

Conclusion

Setting up push notification in your application is really that simple, I do hope this was helpful.

Also, don’t forget to star expo-push-notification-helper

And feel free to follow me on twitter

Thanks for reading.