DEV Community

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

Posted on

1

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();
    }
  }
}

Enter fullscreen mode Exit fullscreen mode
  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}`)
  );
};

Enter fullscreen mode Exit fullscreen mode
  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,
  });
};

Enter fullscreen mode Exit fullscreen mode
  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);
      }
    });
};

Enter fullscreen mode Exit fullscreen mode

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} />
Enter fullscreen mode Exit fullscreen mode

Trigger local notifications:

<Button title="Test Notification" onPress={triggerLocalNotification}/>
Enter fullscreen mode Exit fullscreen mode

Initialize listeners in your app entry point:

import { notificationListener } from './NotificationService';

useEffect(() => {
  notificationListener();
}, []);
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay