Expo-notifee-remote-plugin NPM

🖲 expo-notifee-remote-plugin

Expo plugin that configures a Notification Service Extension to use Notifee for remote notifications

📖 Please visit the Notifee's Docs: Remote Notification Support to see what this plugin does behind the scenes

🔧 Installation

Yarn:

yarn add expo-notifee-remote-plugin

NPM:

npm install --save expo-notifee-remote-plugin

🎛 Setup

Add it to your plugins in your app.json file:

{
  "expo": {
    "plugins": [
      [
        "expo-notifee-remote-plugin",
        {
          "developmentTeam": "MYDEVTEAMID"
        }
      ]
    ]
  }
}

Run npx expo prebuild -p ios
Run yarn ios

Types

If you use app.config.ts for example:

import { ExpoConfig } from 'expo/config';
import { TExpoNotifeeRemote } from 'expo-notifee-remote-plugin';

const notifeeOptions: TExpoNotifeeRemote = {
  /**
   * Apple App Group if applicable.
   * @link https://developer.apple.com/documentation/bundleresources/entitlements/com_apple_security_application-groups
   */
  appGroup?: string;
  /** Custom target name of the NotificationServiceExtension
   * @default NotifeeNotificationService
   */
  appTarget?: string;
  developmentTeam: string;
  /**
   * An array containing the sound file names (including file extensions)
   * @example soundFiles: ['dm.aiff']
   * */
  soundFiles?: string[];
  /** Path of the folder that contains the sound. Relative to the app.config.js file.
   * @example soundFilesPath: 'assets/audio'
   */
  soundFilesPath?: string;
};

export const plugins: ExpoConfig['plugins'] = [
  'expo-localization',
  ['expo-screen-orientation', { initialOrientation: 'PORTRAIT_UP' }],
  '@react-native-firebase/app',
  ['expo-notifee-remote-plugin', notifeeOptions],
];

🛸 Usage

Example with Firebase Node SDK:

import type {Notification} from '@notifee/react-native/src/types/Notification';
import {AndroidImportance} from '@notifee/react-native/src/types/NotificationAndroid';
import {MulticastMessage} from 'firebase-admin/lib/messaging/messaging-api';
import admin from '../src/firebase-admin';

/**
 * @link https://notifee.app/react-native/reference/notification
 */
const notifeeOptions: Notification = {
  title: 'Title',
  subtitle: 'Subtitle',
  body: 'Main body content of the notification',
  android: {
    channelId: 'default',
    importance: AndroidImportance.HIGH,
    lightUpScreen: true,
    pressAction: {
      id: 'default',
    },
    sound: 'default',
  },
  ios: {
    sound: 'default',
    // Adding `foregroundPresentationOptions` controls how to
    // behave when app is UP AND RUNNING, not terminated,
    // AND not in background!
    foregroundPresentationOptions: {
      badge: true,
      banner: true,
      list: true,
      sound: true,
    },
  },
};


/** 
 * @description Firebase Message
 * @link https://firebase.google.com/docs/reference/admin/node/firebase-admin.messaging.basemessage.md#basemessage_interface
 */
const message: MulticastMessage = {
  // ✅ We can continue using local/data-only notification for Android
  // 👍 while triggering iOS remote notifications from `apns`
  data: {notifee_options: JSON.stringify(notifeeOptions)},
  tokens: [],
  android: {
    priority: 'high', // Needed to trigger data-only notifications
  },
  apns: {
    payload: {
      notifee_options: notifeeOptions,
      aps: {
        alert: {
          // 🚧 This is needed to trigger an alert/remote notification only for iOS
          // 👍 but Android will continue using data-only notifications
          title: 'ANY_DUMMY_STRING',
        },
        mutableContent: true,
      },
    },
  },
};

try {
  admin.messaging().sendEachForMulticast(message)
  res.status(200).end();
} catch (e) {
  res.status(400).end();
}