Push Notifications

Overview

We are using Expo Push Notifications to send push notifications to your users.

Setup

Actually I handled this in codebase. If you interested, you can go to the @/hooks/usePushNotifications.ts file.

With this hook, your user can get notifications in background, on lock screen, and in notification center automatically.

You don’t need to do anything else but I want to give you some hints:

1

Go to your @/hooks/usePushNotifications file. You’ll see bunch of codes. But Important part is:

    const { expoPushToken, sendPushNotification, notification } = usePushNotification();
2

expoPushToken is your user’s push token. You can use this token to send push notifications to your user.

3

sendPushNotification is a function to send push notifications to your user.

4

notification is a hook to get the notification data.

Types

import * as Notifications from 'expo-notifications';

interface PushNotificationReturnType {
  expoPushToken: string | undefined;
  notification: Notifications.Notification | null;
  sendPushNotification: (expoPushToken: string) => Promise<void>;
}

Advanced

If you want to send advanced notifications, you should create Supabase Edge Functions. Let me tell you step by step. But I am not going to code this in this documentation. Because it is project specific.

1

I assumed you already set up Supabase and created your tables. Such as profiles, likes, comments, etc.

2

Go to Supabase Edge Function documentation. Which is: Supabase Edge Functions.

3

Click Get Started button and open your terminal.

    supabase init

You should have Supabase CLI installed. If you don’t have, follow the documentation.

4

Then you need to create a new Edge Function. Like:

    supabase functions new send-push-notification
5

Open your supabase/functions/send-push-notification folder. And you will see the index.ts file.

6

Now we need to integrate with Expo Push Notifications. You can follow this link: Sending Notifications

7

If you got stuck, you can watch this video:

8

Now you can use Edge Functions and send push notifications to your users.

Don’t forget to use webhooks.

Push Notifications

Overview

We are using Expo Push Notifications to send push notifications to your users.

Setup

Actually I handled this in codebase. If you interested, you can go to the @/hooks/usePushNotifications.ts file.

With this hook, your user can get notifications in background, on lock screen, and in notification center automatically.

You don’t need to do anything else but I want to give you some hints:

1

Go to your @/hooks/usePushNotifications file. You’ll see bunch of codes. But Important part is:

    const { expoPushToken, sendPushNotification, notification } = usePushNotification();
2

expoPushToken is your user’s push token. You can use this token to send push notifications to your user.

3

sendPushNotification is a function to send push notifications to your user.

4

notification is a hook to get the notification data.

Types

import * as Notifications from 'expo-notifications';

interface PushNotificationReturnType {
  expoPushToken: string | undefined;
  notification: Notifications.Notification | null;
  sendPushNotification: (expoPushToken: string) => Promise<void>;
}

Advanced

If you want to send advanced notifications, you should create Supabase Edge Functions. Let me tell you step by step. But I am not going to code this in this documentation. Because it is project specific.

1

I assumed you already set up Supabase and created your tables. Such as profiles, likes, comments, etc.

2

Go to Supabase Edge Function documentation. Which is: Supabase Edge Functions.

3

Click Get Started button and open your terminal.

    supabase init

You should have Supabase CLI installed. If you don’t have, follow the documentation.

4

Then you need to create a new Edge Function. Like:

    supabase functions new send-push-notification
5

Open your supabase/functions/send-push-notification folder. And you will see the index.ts file.

6

Now we need to integrate with Expo Push Notifications. You can follow this link: Sending Notifications

7

If you got stuck, you can watch this video:

8

Now you can use Edge Functions and send push notifications to your users.

Don’t forget to use webhooks.