Push notifications are a crucial feature in modern mobile applications, enabling real-time communication with users. In this article, I’ll guide you through implementing push notifications in a React Native app for both Android and iOS. We’ll cover setting up the notification prompt and managing permissions, along with code examples.
Why Push Notifications?
Push notifications allow you to:
- 1. – Engage users with timely updates.
- 2. – Increase user retention through reminders.
- 3. – Notify users about important events, offers, or updates.
- 4. – Let’s dive into implementing this in React Native.
Setting Up Push Notifications
- Prerequisites
Before starting, ensure you have:
A React Native app set up.
Dependencies installed:
- @react-native-async-storage/async-storage
- react-native-push-notification
-
@react-native-firebase/messaging (if using Firebase for
notifications) -
Requesting Notification Permissions
Permissions are critical for enabling push notifications. Here’s how to set up a prompt when a user clicks a button (e.g., “Remind Me”) to request notification permissions.
import Alert, PermissionsAndroid, Platform from 'react-native';
import PushNotification from 'react-native-push-notification';
export async function requestNotificationPermission() {
if (Platform.OS === 'ios')
authStatus === messaging.AuthorizationStatus.PROVISIONAL
)
setupPushNotificationChannel();
else
Alert.alert('Permission Denied', 'Notifications are disabled.');
else if (Platform.OS === 'android')
// Android-specific permission request
if (Platform.Version >= 33)
try
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
title: 'Notification Permission',
message: 'Allow this app to send notifications?',
);
if (granted === PermissionsAndroid.RESULTS.GRANTED)
setupPushNotificationChannel();
else
Alert.alert(
'Permission Denied',
'Please enable notifications from settings.'
);
catch (error)
console.error('Permission request failed:', error);
else
setupPushNotificationChannel();
}
- Setting Up Notification Channels
Notification channels are essential on Android to categorize and prioritize notifications. The following code demonstrates how to create a channel using react-native-push-notification:
const setupPushNotificationChannel = () =>
PushNotification.createChannel(
channelId: 'default_channel', // Unique ID for the channel
channelName: 'Default Notifications', // Channel name
channelDescription: 'A default notification channel', // Description
vibrate: true, // Vibration setting
,
(created) => console.log(`Notification channel created: $created`)
);
;
- Triggering Local Notifications
You can trigger a local notification using react-native-push-notification. This is useful for testing or sending reminders.
const triggerLocalNotification = () =>
PushNotification.localNotification(
channelId: 'default_channel',
title: 'Reminder!',
message: 'Don’t forget to check this out!',
playSound: true,
soundName: 'default',
vibrate: true,
);
;
- Handling Notifications in Foreground, Background, and Quit States
To manage notification behavior in different app states, you can use @react-native-firebase/messaging or a similar package.
import messaging from '@react-native-firebase/messaging';
export const notificationListener = () =>
// Handle notification when the app is in the foreground
messaging().onMessage(async (remoteMessage) =>
console.log('Foreground notification:', remoteMessage);
triggerLocalNotification();
);
// Handle notification when the app is opened from the background
messaging().onNotificationOpenedApp((remoteMessage) =>
console.log('Notification opened:', remoteMessage);
);
// Handle notification when the app is launched via a notification
messaging()
.getInitialNotification()
.then((remoteMessage) =>
if (remoteMessage)
console.log('Initial notification:', remoteMessage);
);
;
Final Implementation in Your App
Integrate the above functions into your app. Here’s how you can wire everything together:
Request permission when the user clicks a button:
<Button title="Remind Me" onPress=requestNotificationPermission />
Trigger local notifications:
<Button title="Test Notification" onPress=triggerLocalNotification/>
Initialize listeners in your app entry point:
import notificationListener from './NotificationService';
useEffect(() =>
notificationListener();
, []);
Impact of Push Notifications
Implementing push notifications can significantly enhance user engagement. Here are some key benefits:
Real-time updates: Notify users about important events immediately.
Improved retention: Send reminders to encourage users to return to the app.
Enhanced experience: Personalise messages to create a tailored experience.