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

[github-actions]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.