Image of founer

Sending Notifications in React Native

January 23, 2020

Sending notifications can be tricky. Especially now that react-native-firebase still doesn't support notifications in theirr latest version.

This guide is written to help you setup notifications with firebase using react-native-firebase and push-notification-ios

Setup app

react-native init appName

Install the dependencies

yarn add react-native-push-notification
yarn add @react-native-community/push-notification-ios
cd ios && pod install && cd ..

Open the workspace in xcode from the terminal

open ios/appNam.xcworkspace

Go to your main target 'appName' and set a bundle identifier and a Team.

Add Push Notifications and Background Modes capabilities.

Screenshot 2020-02-07 at 15.09.27.png

In the Background Modes capability check the box for Remote notifications

Add Objective-C code

In AppDelegate.m

#import <RNCPushNotificationIOS.h>


// Required to register for notifications
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
  [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
  [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
  [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
  [RNCPushNotificationIOS didReceiveLocalNotification:notification];


Finally add the following to App.js

import PushNotification from 'react-native-push-notification';

  // (optional) Called when Token is generated (iOS and Android)
  onRegister(token) {
    console.log('TOKEN:', token);

  // (required) Called when a remote or local notification is opened or received
  onNotification(notification) {
    console.log('NOTIFICATION:', notification.foreground, notification);

    // process the notification

  // ANDROID ONLY: GCM or FCM Sender ID (product_number) (optional - not required for local notifications, but is need to receive remote push notifications)

  // IOS ONLY (optional): default: all - Permissions to register.
  permissions: {
    alert: true,
    badge: true,
    sound: true,

  // Should the initial notification be popped automatically
  // default: true
  popInitialNotification: true,

   * (optional) default: true
   * - Specified if permissions (ios) and token (android and ios) will requested or not,
   * - if not, you must call PushNotificationsHandler.requestPermissions() later
  requestPermissions: true,

Sending a notification

You can test your notification with a APNS Token (.p8 file) at for example

Example notification body