How to Implement Push Notifications in React Native for Android and iOS

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

1. Prerequisites Before starting, ensure you have:

A React Native app set up.
Dependencies installed:

1. @react-native-async-storage/async-storage
2. react-native-push-notification

3. @react-native-firebase/messaging (if using Firebase for
   notifications)

4. 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') {
    // 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();
    }
  }
}

1. 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}`)
  );
};

1. 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,
  });
};

1. 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.