Remote Notification support - Not working on iOS (Simulator and Real Device)

[Sotiris-Bekiaris]

Even though I managed somehow to make it work once, when I tried to recreate it (multiple times) I wasn't lucky enough to have the same result...

Issue Description: I am unable to receive remote notifications with an image using Notifee. I have tested both on an iPhone 14 Pro simulator with iOS 17.0 and a real iPhone 14 Pro device with iOS 18. Despite trying various configurations, the image does not appear in the notification. I followed the documentation for sending remote notifications with images, but it still doesn't work.

Environment:

Notifee Version: 9.1.1
React Native Version: 0.73.6
Platform: iOS
Device: iPhone 14 Pro (Simulator and Real Device)
OS Version: iOS 17.0 (Simulator) and iOS 18 (Real Device)
Xcode Version: Version 16.0 (16A242d)

Steps to Reproduce:

Install Notifee and configure it to handle remote notifications. (followed carefully these steps)
Send a remote notification with an image payload.
Test on both an iPhone 14 Pro simulator (iOS 17.0) and a real device (iPhone 14 Pro with iOS 18).
Observe that the notification does not display the image.

Expected Behavior: Remote notifications should include the image when configured with the appropriate payload.

Actual Behavior: The notification is received, but the image is not displayed on both the simulator and real device.

Relevant Code:

Podfile

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!
install! 'cocoapods', :deterministic_uuids => false


target 'Name' do
  use_frameworks! :linkage => :static
  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-google-maps', :path => rn_maps_path
  config = use_native_modules!

  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true

  pod 'RNNotifeeCore', :path => '../node_modules/@notifee/react-native/RNNotifeeCore.podspec'


  
  
  
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    # Upcoming versions of React Native may rely on get_default_flags(), but
    # we make it explicit here to aid in the React Native upgrade process.
    :hermes_enabled => true,
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    :flipper_configuration => FlipperConfiguration.disabled,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'NameTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
  end
end

$NotifeeExtension = true

target 'NotifeeNotificationService' do
  use_frameworks! :linkage => :static
  pod 'RNNotifeeCore', :path => '../node_modules/@notifee/react-native/RNNotifeeCore.podspec'
end

NotificationService.m

//
//  NotificationService.m
//  NotifeeNotificationService
//
//  Created by Sotiris Bekiaris on 13/10/24.
//

#import "NotificationService.h"
#import "NotifeeExtensionHelper.h"

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    
    [NotifeeExtensionHelper populateNotificationContent:request
                                  withContent: self.bestAttemptContent
                                  withContentHandler:contentHandler];
}

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
    self.contentHandler(self.bestAttemptContent);
}

@end

Notification.ts (Back end call)

const createBasicNotification = (token: string) => ({
  token,
  notification: {
    title: "A notification title!",
    body: "A notification body",
  },
  apns: {
    payload: {
      aps: {
        // Payloads coming from Admin SDK should specify params in camelCase.
        // Payloads from REST API should specify in kebab-case
        // see their respective reference documentation
        contentAvailable: 1, // Important, to receive `onMessage` event in the foreground when message is incoming
        mutableContent: 1, // Important, without this the extension won't fire
      },
      notifee_options: {
        image: "https://metacode.biz/@test/avatar.jpg", // URL to pointing to a remote image
        ios: {
          foregroundPresentationOptions: { alert: true, badge: true, sound: true, banner: true, list: true },
          attachments: [{ url: "https://metacode.biz/@test/avatar.jpg", thumbnailHidden: false }], // array of attachments of type `IOSNotificationAttachment`
          badgeCount: 8,
        },
      },
    },
  },
});

I would really appreciate any help!

Also I tried the following "tips":

• Clean build folder
• remove CocoaPods
• remove Pods
• remove DerivedData content
• pod deintegrate
• pod install --repo-update

DISCLAIMER: The pods installation and the build are successful. I get a notification. But it seems like the notifee_options are ignored.

The most annoying part is that I managed to make it work and forgot to commit my changes before trying to recreate it. :)

[Sotiris-Bekiaris]

Also I want to make clear that it didn't work with the steps provided in the docs. I did some changes myself but I am still not sure which of all the things I tried actually helped.

[LunatiqueCoder]

Possible duplicate. See:

• fix(ios): Remote issues: #1041 / #1096 onForegroundEvent() and getInitialNotification() #1118
• docs(ios): - Improve Remote Notification Support section #1120