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.
Notifee is a robust library for managing notifications in React Native applications. It provides advanced features like:
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
# or
yarn 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
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>
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();
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