Programming Tutorials

Send push notifications to android/ios sample code using expo - react native

By: Linda Ng in React-Native Tutorials on 2023-04-13  

Expo Notifications is a module provided by Expo that makes it easy to send and receive push notifications in your Expo app. Here are some advantages of using Expo Notifications:

1. Simplifies the implementation of push notifications: Expo Notifications provides a simple and easy-to-use API for handling push notifications in your app.

2. Cross-platform support: Expo Notifications works seamlessly across iOS, Android, and web platforms.

3. Easy to manage notification permissions: Expo Notifications simplifies the process of requesting and managing user notification permissions.

4. Enhanced notification delivery: Expo Notifications takes care of the complex details of push notification delivery and ensures that your notifications are delivered reliably.

Here's an example of how to use Expo Notifications in your app:

import { registerForPushNotificationsAsync } from 'expo-notifications';

async function registerForPushNotifications() {
  const { status } = await registerForPushNotificationsAsync();
  if (status !== 'granted') {
    alert('Failed to get push token for push notification!');
    return;
  }

  const token = (await Notifications.getExpoPushTokenAsync()).data;
  console.log(token);
}

This code uses the registerForPushNotificationsAsync function to request permission for push notifications and retrieve the device token. Once the token is retrieved, it can be used to send push notifications to the device using a server-side service like Firebase Cloud Messaging or Apple Push Notification service.

This token is the user's device's token that you can use to push any message to that user's device. Assuming you save this token to a server side database and map it to the user, you can then use a server side program such as Java to send a push notification from your server. You can use any HTTP client library that supports sending HTTP requests to a server, such as Apache HttpClient or OkHttp, to send requests to the Expo push notification server. Here is an example code snippet in Java using the OkHttp library to send a push notification:

import okhttp3.*;

public class PushNotification {
    public static final MediaType JSON = MediaType.get("application/json; charset=utf-8");
    public static final String EXPO_PUSH_ENDPOINT = "https://expo.io/--/api/v2/push/send";

    public static void sendPushNotification(String token, String title, String message) throws Exception {
        OkHttpClient client = new OkHttpClient();

        // create a JSON payload with the notification details
        String json = "{"
                + "\"to\":\"" + token + "\","
                + "\"title\":\"" + title + "\","
                + "\"body\":\"" + message + "\""
                + "}";

        // build the HTTP request
        RequestBody body = RequestBody.create(JSON, json);
        Request request = new Request.Builder()
                .url(EXPO_PUSH_ENDPOINT)
                .post(body)
                .addHeader("Accept", "application/json")
                .addHeader("Content-Type", "application/json")
                .build();

        // execute the HTTP request and handle the response
        Response response = client.newCall(request).execute();
        if (!response.isSuccessful()) {
            throw new Exception("Failed to send push notification: " + response.body().string());
        }
    }
}

Make sure to replace token with the actual device token that you want to send the push notification to. Also, note that you can send multiple push notifications by adding more elements to the messages array. You can then call the sendPushNotification method with the token and notification details to send a push notification.

If you prefer to push notification from the client side, here is the sample code to push notification from the client side:

const { Expo } = require('expo-server-sdk');

// Create a new Expo SDK client
let expo = new Expo();

// Define the push notification payload
let message = {
  to: 'ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]', // the device token
  sound: 'default',
  body: 'This is a test notification'
};

// Create an array of the push notification messages to send
let messages = [message];

// Use the Expo SDK to send the push notification messages
let chunks = expo.chunkPushNotifications(messages);
let tickets = [];
(async () => {
  for (let chunk of chunks) {
    try {
      let ticketChunk = await expo.sendPushNotificationsAsync(chunk);
      console.log(ticketChunk);
      tickets.push(...ticketChunk);
    } catch (error) {
      console.error(error);
    }
  }
})();

Make sure to replace ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx] with the actual device token that you want to send the push notification to. Also, note that you can send multiple push notifications by adding more elements to the messages array.