Easily setup push notifications with Expo for React Native apps

I wrote this post because it took me way too long to send a basic push notification to my device. I am using Postman for the HTTP-Request, Expo and React Native. This post should give you a basic understanding on how push notifications get to your device as simple as possible.

We only need two things:

• The ExponentPushToken for your Device
• A HTTP-Post-Request to Expo Servers with your PushToken

That’s everything we need to send a basic push-notification! We just have to send a HTTP-Post-Request to https://exp.host/--/api/v2/push/send with our ExponentPushToken in the body. Let’s move on:

The code below is from the Expo-Documentation (Push Notifications)

import { Permissions, Notifications } from 'expo';
async function registerForPushNotificationsAsync() {
  const { status: existingStatus } = await Permissions.getAsync(
    Permissions.NOTIFICATIONS
  );
  let finalStatus = existingStatus;

  // only ask if permissions have not already been determined, because
  // iOS won't necessarily prompt the user a second time.
  if (existingStatus !== 'granted') {
    // Android remote notification permissions are granted during the app
    // install, so this will only ask on iOS
    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    finalStatus = status;
  }

  // Stop here if the user did not grant permissions
  if (finalStatus !== 'granted') {
    return;
  }

  // Get the token that uniquely identifies this device
  let token = await Notifications.getExpoPushTokenAsync();

  console.log(token);
}

You have to paste this Code into an app built with expo. Then just take the token and save it somewhere.

Now we can send a HTTP-Post-Request. You can do it in many different ways. I used Postman for it you can also use cURL for example.

With Postman you have to create a new Request. Just give it a name and add it to a collection.
Now you have to change from “Get” to “POST”.

Add the URL

https://exp.host/--/api/v2/push/send

Add the Headers:

Accept: application/json
Accept-Encoding: gzip, deflate
Content-Type: application/json

Important:
Save the words without the colon. Otherwise you will get an error. (See image below)

Header in Postman

Add the body:

{
“to”: “ExponentPushToken[…yourpushtoken]”,
“title”: “Title of the Notification”,
“body”: “Body of your Notification”
}

Important:
Choose JSON (application/json) for the body (See image below)

Body in Postman

Now just click on “Send”. You should receive a push notification on your device now. Note that on iOS you need to be outside of the app to receive the push notification.

If everything is fine the Notification should appear

Troubleshooting:

At first I received an error from Postman. If you also got an error click on “View” and “Show Postman Console” (or ALT+CTRL+C) to open up the console and get a detailed error message. This should help you find the error.

More steps:

I tried to set up push notifications and took a lot of time for it. Basically with expo it’s really simple. I wanted to make this post to show you the total basics of sending push notifications to devices. These are the minimum steps needed (But please don’t be angry with me if you find a way with less steps :)). From this point you can move on to build a push-notification-system for any type of app.

If you have any questions don’t hestitate to ask! I’ll try my best to help you, even though I am still relatively new to React Native.