Setting up push notifications in React Native involves several key steps, primarily using libraries like react-native-push-notification or Firebase with @react-native-firebase/messaging. Below is a concise outline based on current best practices:

1. Choose a Notification Library

• Use react-native-push-notification (GitHub: zo0r/react-native-push-notification) for full control over local and remote notifications.

• Alternatively, use Firebase Cloud Messaging (FCM) via @react-native-firebase/messaging for scalable, server-driven push notifications.

2. Set Up the Project

• Install the required package:

  npm install react-native-push-notification
  # or
  npm install @react-native-firebase/messaging
     

• For native iOS/Android setup, follow the library’s installation guide (e.g., linking, adding permissions, configuring AppDelegate.mm for iOS).

3. Configure iOS (APNs)

• Enable Push Notifications in Xcode: Go to Signing & Capabilities → Add "Push Notifications".

• Use Authentication Keys (Recommended) instead of certificates for easier management and no expiration.

• Implement UNUserNotificationCenterDelegate in AppDelegate.mm to handle foreground and background notifications.

4. Configure Android (FCM)

• Set up Firebase Project: Create a project in the Firebase Console.

• Download google-services.json and place it in android/app/.

• Update build.gradle files to include Google Services plugin.

• Create Notification Channels (required for Android 8.0+):

  PushNotification.createChannel({
    channelId: "default-channel-id",
    channelName: "Default Channel",
    channelDescription: "A default channel",
    importance: 4,
    vibrate: true,
  });
     

5. Request User Permissions

• Use react-native-permissions to request notification access:

  import { request, PERMISSIONS } from 'react-native-permissions';
  await request(PERMISSIONS.IOS.NOTIFICATIONS);
  await request(PERMISSIONS.ANDROID.POST_NOTIFICATIONS);
     

6. Handle Notifications

• Set up notification listeners:

  PushNotification.configure({
    onNotification: function(notification) {
      console.log('Notification received:', notification);
      // Handle deep linking, navigation, etc.
      notification.finish(PushNotificationIOS.FetchResult.NoData);
    },
    onRegister: function(token) {
      console.log('Device token:', token);
      // Send token to your backend
    },
    onRegistrationError: function(err) {
      console.error('Registration error:', err);
    },
  });
     

7. Send Remote Notifications

• Use Firebase Console or backend API (e.g., FCM HTTP v1 API) to send messages with payload:

  {
    "to": "device_token",
    "notification": {
      "title": "Hello",
      "body": "This is a test notification"
    }
  }
     

8. Advanced Features

• Rich Notifications: Add images, sounds, actions, or custom layouts.

• Silent Notifications: Update app data without alerting the user.

• Deep Linking: Use link in payload to navigate users within the app.

• A/B Testing & Analytics: Track delivery, open, and engagement rates.

✅ Best Practices: Respect user privacy, avoid over-notification, personalize messages, and test thoroughly on both platforms. Use @react-native-firebase/messaging for production apps requiring scalability and real-time delivery.