React Native Push Notifications with Supabase and Entrig

Most push notification tutorials cover the basics: one user, one device, one notification. Real apps are messier. A group chat needs to notify the right people at the right time: the group owner when someone joins, everyone in a room when a message arrives, all users when a new group is created.

Each of those is a different recipient pattern: one-to-one, one-to-many via a join table, and broadcast. This tutorial builds all three using a real Supabase schema, configured in the Entrig dashboard with no Edge Functions or custom backend code.

The schema

A minimal group chat app with four tables:

The three notifications we’re building:

1. Member joins a group → notify the group owner (one-to-one)
2. New message in a group → notify all members except the sender (one-to-many)
3. New group created → notify all users except the creator (broadcast)

Set up the SDK

Install the package:

npm install @entrig/react-native

iOS setup, run from your project root:

npx @entrig/react-native setup ios
cd ios && pod install

Initialize Entrig and register devices with Supabase Auth:

import Entrig from '@entrig/react-native';
import { supabase } from './lib/supabase';

// Call once at app startup
await Entrig.init({ apiKey: 'YOUR_ENTRIG_API_KEY' });

// Register on sign-in, unregister on sign-out
supabase.auth.onAuthStateChange(async (event, session) => {
  if (event === 'SIGNED_IN' && session?.user) {
    await Entrig.register(session.user.id);
  } else if (event === 'SIGNED_OUT') {
    await Entrig.unregister();
  }
});

The userId passed to Entrig.register() must be the Supabase Auth user ID (session.user.id). This is the ID Entrig uses to resolve which device to send to. See the React Native SDK docs for the full setup including Android.

Configure the notifications

Each notification is created in the Entrig dashboard in three steps: Trigger (when), Users (who), Message (what). The three tabs below walk through each notification type.

myapp://chat/{{group_members.group_id}}?name={{groups.name}}

myapp://chat/{{messages.group_id}}?name={{groups.name}}

myapp://chat/{{groups.id}}?name={{groups.name}}

Handle notification taps

All three notifications carry a deeplink of the form myapp://chat/<group-id>?name=<group-name>. Read it from event.deeplink when a notification is opened, parse it, and navigate to the chat screen. Put this in a component rendered inside your navigator so useNavigation() is available:

import { useEntrigEvent } from '@entrig/react-native';
import { useNavigation } from '@react-navigation/native';

function NotificationRouter() {
  const navigation = useNavigation();

  useEntrigEvent('opened', (event) => {
    if (!event.deeplink) return;
    const uri = new URL(event.deeplink);          // myapp://chat/<id>?name=<name>
    navigation.navigate('Chat', {
      id: uri.pathname.replace('/', ''),
      name: uri.searchParams.get('name') ?? '',
    });
  });

  return null;
}

new URL(...) works because the Supabase client already pulls in react-native-url-polyfill. The Chat route takes { id, name }, the same params the app uses when opening a room from the list.

If the app was fully closed when the notification was tapped, the tap doesn’t fire opened. Read the launch notification once on startup with getInitialNotification():

import Entrig from '@entrig/react-native';

useEffect(() => {
  Entrig.getInitialNotification().then((notification) => {
    if (!notification?.deeplink) return;
    const uri = new URL(notification.deeplink);
    navigation.navigate('Chat', {
      id: uri.pathname.replace('/', ''),
      name: uri.searchParams.get('name') ?? '',
    });
  });
}, []);

Prefer to skip the parsing? Initialize with Entrig.init({ apiKey, autoOpenDeeplink: true }) and the SDK opens the URL for you on tap. You then handle it through React Native’s Linking API and register the myapp:// URL scheme (an intent filter on Android, CFBundleURLTypes on iOS). The manual approach above needs no URL-scheme setup, which is why we use it here.

Test it

Push notifications require a real device. With your app running, trigger each notification by inserting a row from the Supabase dashboard or SQL editor:

-- Notification 1: member joins a group
INSERT INTO group_members (group_id, user_id)
VALUES ('your-group-id', 'joining-user-id');

-- Notification 2: new message
INSERT INTO messages (content, group_id, user_id)
VALUES ('Hey everyone!', 'your-group-id', 'sender-user-id');

-- Notification 3: new group created
INSERT INTO groups (name, created_by)
VALUES ('Weekend Plans', 'creator-user-id');

Each insert should deliver the notification to the right device within a few seconds.

The three notifications in this tutorial cover the full range of what Entrig supports: Direct for targeted one-to-one, Indirect for group-aware delivery, and Broadcast for app-wide announcements. The same patterns apply to any app: e-commerce orders, task assignments, social follows.

Full SDK reference at entrig.com/docs.

Read the Push Notifications for Supabase overview for a comparison of the manual setup versus Entrig.

Start free with Entrig and get this running on your own Supabase project in minutes. More at entrig.com.