Push notifications are an important feature in modern mobile applications, enabling instant communication with users. In this article, I will guide you in implementing push notifications in React Native apps for Android and iOS. We’ll cover setting up notification alerts and managing permissions, along with code examples.
Why push notifications?
Push notifications allow you to:
- 1. – Attract users through timely updates.
- 2. – Improve user retention through reminders.
- 3. – Notify users of important events, offers or updates.
- 4. – Let’s dive into implementing this in React Native. Set up push notifications
- Prerequisites Before you begin, make sure you have:
React Native application set up.
Installed dependencies:
- @react-native-async-storage/asynchronous storage
- react native push notification
-
@react-native-firebase/messaging (if using Firebase
notify) -
Request notification permission
Permissions are crucial to enable push notifications. Here’s how to set up a prompt when a user clicks a button (such as “Remind Me”) to request notification permission.
import { Alert, PermissionsAndroid, Platform } from 'react-native';
import PushNotification from 'react-native-push-notification';
export async function requestNotificationPermission() {
if (Platform.OS === 'ios') {
// iOS-specific permission request
const authStatus = await messaging().requestPermission();
if (
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
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 crucial for categorizing and prioritizing notifications on Android. The following code demonstrates how to use react-native-push-notification to create a channel:
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 native notifications You can trigger native notifications 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 exit 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 application
Integrate the above features into your application. Here’s how to connect everything together:
Request permission when the user clicks the button:
Trigger local notification:
Initialize the listener at the application entry point:
import { notificationListener } from './NotificationService';
useEffect(() => {
notificationListener();
}, []);
The impact of push notifications
Implementing push notifications can significantly increase user engagement. Here are some of the main advantages:
Instant updates: Notify users of important events immediately.
Improve retention: Send reminders to encourage users to return to the app.
Enhance the experience: Personalize messages to create a tailored experience.