CODEWITHSUNDEEP
javascriptreact-nativepush-notificationnotificationsexpo
Niitron
Niitron

Reputation: 21

React Native with Expo - Schedule a notification to be sent globally at 8pm to all users for all time zones

I am using React native with Expo and i want to schedule a notification. I want it to be sent globally at 8pm to all users for all time zones. Can i achieve this with expo? If so, how i can i achieve this? Should i use a local or a push notification? Can someone please point me in the right direction? Thanks in advance!

Upvotes: 1

Views: 3507

Answers (2)

Karel Křesťan
Karel Křesťan

Reputation: 469

You have two approaches to achieve this:

  1. send notification locally
  2. send notification using server

Local notifications

You can very easily schedule recurring local notification. This means that all users who gives you permission to send them notifications will receive notification at the time you select. Here are some code snippets that should help you:

/** 
* Get permissions from user. 
* This needs to be done both for local and server notifications.
* Call this method after user click some 'Allow notifications' button
*/
const getPermission = async () => {
   if ( Platform.OS !== 'web' ) {
          const { status: existingStatus } = await Notifications.getPermissionsAsync();

          if ( existingStatus !== 'granted' ) {
            __DEV__ && console.log( 'Requesting notification permission' );

            const { status } = yield Notifications.requestPermissionsAsync();
          
            if ( status !== 'granted' )
              throw new Error( "Didn't receive permission to save notifications" );
          
            __DEV__ && console.log( 'Permission for notifications granted' );
   
   // This code is needed for Android to work
   if ( Platform.OS === 'android' ) {
            Notifications.setNotificationChannelAsync( 'default', {
              name: 'default',
              importance: Notifications.AndroidImportance.MAX,
              vibrationPattern: [0, 250, 250, 250],
              lightColor: '#FF231F7C',
            } );
          }
}

After you receive permissions you need, you can schedule recuring notifications very easily:

const scheduleDailyNotifications = async () => {
if ( self.gotPermission ) {
        // It's useful to save notification id so that you can edit/delete notification later
        const idOfNotification = await Notifications.scheduleNotificationAsync( {
          content: {
            title: "App Name - Daily Remainder",
            body: "Text you want to show in your notification",
            sound: 'default'
          },
          trigger: {
            hour: 14, // show this notification every day, 14:00
            repeats: true
          },
        } );
}

And that's it! Now your users will receive notification every day.

As you probably see from this example, local notifications have quite a few shortcommings, the biggest is that you need to know which notification you want to send at build time of your app and that you can't really manipulate with them well.

Use this approach if you want for example to remind users to open your app once a day and do something (good for education apps). For more complicated use cases, you need to use server notifications, which are a lot of harder to implement.

Server notifications

Server notifications are not set in the app, instead, you configure your app as 'receiver' of notifications you send from your server. To do this, you need to configure some third party services. On Android, you won't avoid using Firebase, as this is the only way for Android devices to receive notifications from your server. As this requires a lot of code, I will only provide you with directions in this answer. I will stick with Expo Push Notifications as you already use Expo and it's free (but note that there are other services you can use)

  1. Get permissions from user (same as with local notifications)
  2. When gettings permissions from user (point 1), also get Expo Push token and save it to your database (provided code is from Expo documentation https://docs.expo.dev/versions/latest/sdk/notifications/)
import * as Notifications from 'expo-notifications';

// .. rest of getPermission method
  const expoPushToken = await Notifications.getExpoPushTokenAsync({
    experienceId: '@username/example',
  });

  // .. save expoPushToken under user in your database. It is preferable to allow one user to have multiple tokens

  1. Configure app to receive notifications. See https://docs.expo.dev/versions/latest/sdk/notifications/, specifically check API/Push Notifications and how to use Notifications.setNotificationHandler and useEffect method that they use to configure listeners in their App.tsx file

  2. Register your app on Firebase. Follow this guide to acquire ./google-services.json and configure your app.json https://docs.expo.dev/push-notifications/using-fcm/

Now devices are configured to receive notifications. Last thing you need to do is actually to send it.

  1. I assume your app have some kind of server side. You need to configure this server to send notifications to your users. As you want recuring notifications, this will be a CRON task that runs once a day. Setting up a CRON task depends on your backend, but should be straightforward in major coding languages.
  2. In CRON task, send notifications. There is a lot of documentation about how to do it here: https://docs.expo.dev/push-notifications/sending-notifications/, but it can actually be pretty easy if you are using coding language for your server that is supported by Expo Push Notifications SDK. If you visit the documentation, there is a section dedicated to links various SDKs (Node.js, Python, Java, C#, Go...), you can find example app for your language under these links

And that's it! Quite a lot of steps for server notifications, but they are more powerful than local as you have complete control over them.

Upvotes: 1

marvler
marvler

Reputation: 74

Yes, it is possible. I can't tell from your question if you've already implemented push notifications for your app and what provider you used. I'll assume you haven't at all, so start there.

OneSignal, Firebase, Expo-notifications etc. There are many providers that allow scheduling of push notifications.

OneSignal-Expo documentation: https://documentation.onesignal.com/docs/react-native-expo-sdk-setup

Expo-server-sdk example: https://github.com/expo/expo-server-sdk-node#usage

Upvotes: 0

Related Questions