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.






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

npm install vs npx expo install

expo-secure-store to store sensitive data securely in React Native

expo-secure-store vs expo-file-system in expo - react native

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

use axios in Expo to call APIs

Start background location tracking after login in expo react native

react-native-background-job alternative in expo app

Some dependencies are incompatible with the installed expo version:

react-native-android-location-services-dialog-box alternative in expo

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

Remove all installed dependencies and install them again

set up a global error handler in React Native (expo)

state vs props in React Native

Error Handling in TextInput - React Native

loadAsync() vs useFonts() in expo - react native

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

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