expo-notifee-remote-plugin

🖲 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();
}

🤔 What it does?

This plugin handles moving the necessary NotifeeNSE files into their respective iOS directories.

Steps

• Updates entitlements
• Sets the app group to group.<identifier> if applicable
• Adds the extension plist
• Adds the view controller
• Adds the NotifeeCore pod in Podfile
• Adds the sounds (if any) in the iOS project
• Updates the xcode project's build phases

📃 License

📃 This project is released under the MIT License.
💻 By contributing, you agree that your contributions will be licensed under its MIT License.

👏 Credits

Adapted from:

• https://github.com/OneSignal/onesignal-expo-plugin/blob/main/onesignal/withOneSignalIos.ts

• https://github.com/bluesky-social/social-app/tree/main/plugins/notificationsExtension

• https://github.com/evennit/notifee-expo-plugin

• https://github.com/andrew-levy/react-native-safari-extension

• https://github.com/timedtext/expo-config-plugin-ios-share-extension/blob/master/src/withShareExtensionXcodeTarget.ts

🏆 Sponsors