React Native

Mastering Notifications in React Native with Notifee


Introduction

Notifications are a key component of user engagement in modern mobile applications. React Native developers can leverage Notifee, a powerful notification library, to create rich, interactive, and customizable notifications. In this blog, we'll take a deep dive into Notifee—its installation, setup, features, and how to use arrow functions effectively for concise and modern code.

Why Notifee?

Notifee is a robust library for managing notifications in React Native applications. It provides advanced features like:

  • Customizable UI: Tailor notifications to match your app's branding.
  • Actionable Notifications: Add buttons and actions to enhance interactivity.
  • Scheduled Notifications: Set reminders or future notifications with ease.
  • Foreground and Background Handling: Manage notifications seamlessly across app states.
  • Custom Sounds and Big Text: Enhance user engagement with media-rich notifications.Cross-platform Support: Works well on both iOS and Android.

Installation and Setup

Before diving into Notifee, ensure your environment is ready for React Native development. Then, follow these steps:

1. Install Notifee

Install Notifee using npm or yarn:

npm install @notifee/react-native# oryarn add @notifee/react-native

 

2. Link Native Modules

Notifee requires native module integration. Use the following commands:

npx pod-install

 

For Android, ensure you have updated your android/build.gradle and android/app/build.gradle as per the Notifee documentation.

 

3. Request Permissions

Notifications require user permissions. Request them at the start of your application:

import notifee, { AuthorizationStatus } from '@notifee/react-native';const requestPermissions = async () => { const settings = await notifee.requestPermission(); if (settings.authorizationStatus === AuthorizationStatus.AUTHORIZED) { console.log('Notification permissions granted.'); } else { console.log('Notification permissions denied.'); }};requestPermissions();

 4. Platform-Specific Setup

 

Android

  • Ensure you define notification channels for Android:
const createChannel = async () => { await notifee.createChannel({ id: 'default', name: 'Default Channel', importance: notifee.AndroidImportance.HIGH, // Path for custom sound: 'android/app/src/main/res/raw/custom_sound.mp3' sound: 'custom_sound', // The sound file name without extension });};createChannel();

 

iOS

Add notification permissions in Info.plist:

<key>UIBackgroundModes</key><array>  <string>remote-notification</string></array><key>NSUserNotificationUsageDescription</key><string>We use notifications to keep you updated.</string>

 

  • For custom sounds, add the .wav or .caf file to the Xcode project and reference it in your notification payload.

Creating Your First Notification

Notifee simplifies notification creation with its intuitive API. Here's an example using arrow functions:

import notifee from '@notifee/react-native';const displayNotification = async () => { await notifee.displayNotification({ title: 'Hello world!', body: 'This is your first Notifee notification.', android: { channelId: 'default', pressAction: { id: 'default', launchActivity: 'default', // Corrected typo: launchActivity }, }, ios: { // The sound must be in the ios/Library/Sounds folder of the app's data container sound: 'custom_sound.wav', // Extension (.wav) is required in name }, });};displayNotification();

 

Advanced Features

1. Scheduled Notifications

Schedule notifications to trigger at a specific time:

import notifee, { TriggerType } from '@notifee/react-native';const scheduleNotification = async () => { await notifee.createTriggerNotification({ title: 'Reminder', body: 'This is your scheduled notification.', android: { channelId: 'default', }, ios: { sound: 'default', }, }, { type: TriggerType.TIMESTAMP, timestamp: Date.now() + 60000, // Trigger in 1 minute (60000 milliseconds) });};scheduleNotification();

 

2. Custom Sounds

Enhance notifications with custom sounds:

Android: Place your .mp3 file in android/app/src/main/res/raw/.

iOS: Add your sound file to the Xcode project and reference it in the ios/Library/Sounds.

import notifee from '@notifee/react-native';const displayCustomSoundNotification = async () => { await notifee.displayNotification({ title: 'Custom Sound', body: 'This notification uses a custom sound.', android: { channelId: 'default', sound: 'custom_sound', // File name without extension }, ios: { sound: 'custom_sound.wav', // File name with .wav extension }, });};displayCustomSoundNotification();

 

3. Big Text Style

Create notifications with expanded content:

import { AndroidStyle } from '@notifee/react-native';const displayBigTextNotification = async () => { await notifee.displayNotification({ title: 'Big Text Notification', body: 'This is a short preview.', android: { channelId: 'default', style: { type: AndroidStyle.BIGTEXT, text: 'This is the expanded preview of multiline content of the notification.', }, }, });};displayBigTextNotification();

 

4. Actionable Notifications

Add buttons to your notifications for enhanced interactivity:

import notifee from '@notifee/react-native';const displayActionableNotification = async () => { notifee.setNotificationCategories([ { id: 'message', actions: [ { title: 'Reply', id: 'reply', }, { title: 'Mark as Read', id: 'mark-read', }, ], }, ]); await notifee.displayNotification({ title: 'New Message', body: 'You have a new message.', android: { channelId: 'default', actions: [ { title: 'Reply', pressAction: { id: 'reply' }, }, { title: 'Mark as Read', pressAction: { id: 'mark-read' }, }, ], }, ios: { categoryId: 'message', }, });};displayActionableNotification();

 

5. Foreground Service Notifications

Foreground services keep notifications persistent, often used for tasks like music playback or location tracking:

import notifee from '@notifee/react-native';const startForegroundService = async () => { await notifee.displayNotification({ title: 'Music Player', body: 'Playing music...', android: { channelId: 'default', asForegroundService: true, }, });};startForegroundService();

 

Debugging Tips

  • Check your device's notification settings to ensure your app has the necessary permissions.
  • Use logs and debug messages to identify issues.
  • Ensure all dependencies are properly linked.
  • Refer to the Notifee documentation for platform-specific requirements.

 

Conclusion

Notifee empowers React Native developers to create engaging and dynamic notifications. Its rich feature set and straightforward API make it an excellent choice for managing notifications in your app. By combining it with modern JavaScript practices like arrow functions, you can write clean and maintainable code. Start experimenting with Notifee today, and take your app's user engagement to the next level!

 

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our React Native Expertise.

0

React Native

Related Center Of Excellence