notifee

Notifee is a powerful and feature-rich notification library for React Native applications. It provides a cross-platform API for creating and managing notifications on both Android and iOS, offering advanced features like notification channels, grouping, and actions.

Pros

• Cross-platform compatibility with a unified API for both Android and iOS
• Advanced notification features like channels, grouping, and custom actions
• Extensive documentation and examples for easy implementation
• Active development and community support

Cons

• Requires additional setup and configuration compared to basic notification libraries
• May have a steeper learning curve for developers new to advanced notification concepts
• Some features may be platform-specific, requiring separate handling for Android and iOS

Code Examples

Creating a basic notification:

import notifee from '@notifee/react-native';

async function displayNotification() {
  await notifee.requestPermission();

  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Default Channel',
  });

  await notifee.displayNotification({
    title: 'Notification Title',
    body: 'This is the notification body',
    android: {
      channelId,
      smallIcon: 'name_of_a_small_icon',
    },
  });
}

Creating a notification with actions:

import notifee, { AndroidImportance } from '@notifee/react-native';

async function displayNotificationWithActions() {
  const channelId = await notifee.createChannel({
    id: 'actions',
    name: 'Action Channel',
    importance: AndroidImportance.HIGH,
  });

  await notifee.displayNotification({
    title: 'New Message',
    body: 'You have a new message from John',
    android: {
      channelId,
      actions: [
        {
          title: 'Reply',
          pressAction: { id: 'reply' },
        },
        {
          title: 'Mark as Read',
          pressAction: { id: 'mark-read' },
        },
      ],
    },
  });
}

Handling notification events:

import notifee, { EventType } from '@notifee/react-native';

function setupNotificationListeners() {
  return notifee.onForegroundEvent(({ type, detail }) => {
    switch (type) {
      case EventType.DISMISSED:
        console.log('User dismissed notification', detail.notification);
        break;
      case EventType.PRESS:
        console.log('User pressed notification', detail.notification);
        break;
    }
  });
}

Getting Started

1. Install the library:

   npm install @notifee/react-native
   

2. For iOS, add the following to your Podfile:

   pod 'RNNotifee', :path => '../node_modules/@notifee/react-native'
   

3. Run pod install:

   cd ios && pod install
   

4. Import and use Notifee in your React Native app:

   import notifee from '@notifee/react-native';
   
   // Request notification permissions
   await notifee.requestPermission();
   
   // Display a notification
   await notifee.displayNotification({
     title: 'Hello World',
     body: 'This is your first notification!',
   });