Preliminary Info

What Airship dependencies are you using?

In package.json :

"@ua/react-native-airship": "^19.3.1",

in Podfile.lock

  - Airship (18.7.2):
    - Airship/Automation (= 18.7.2)
    - Airship/Basement (= 18.7.2)
    - Airship/Core (= 18.7.2)
    - Airship/FeatureFlags (= 18.7.2)
    - Airship/MessageCenter (= 18.7.2)
    - Airship/PreferenceCenter (= 18.7.2)
  - Airship/Automation (18.7.2):
    - Airship/Core
  - Airship/Basement (18.7.2)
  - Airship/Core (18.7.2):
    - Airship/Basement
  - Airship/FeatureFlags (18.7.2):
    - Airship/Core
  - Airship/MessageCenter (18.7.2):
    - Airship/Core
  - Airship/PreferenceCenter (18.7.2):
    - Airship/Core
  - AirshipFrameworkProxy (7.3.0):
    - Airship (= 18.7.2)
  - AirshipServiceExtension (18.8.0)

What are the versions of any relevant development tools you are using?

Yarn 1.22.19 Cocoapods: 1.15.2 Xcode: 15.4 React Native: v74.3

Report

What unexpected behavior are you seeing?

The notifications do not have media content. I still do receive the notifications and can see the link to the image as part of the payload in the logs but it just doesn't display in the notification.

What is the expected behavior?

The notifications have media content.

What are the steps to reproduce the unexpected behavior?

Follow the React Native integration steps on the Airship docs, and also follow the Notification Service Extension docs in the Airship docs to add to the project.

My swift file in the NotificationServiceExtension target;

import UserNotifications
import AirshipServiceExtension

class NotificationService: UANotificationServiceExtension {
  override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
    print("Hello I have received a message")
  }

  override func serviceExtensionTimeWillExpire() {
    print("terminating extension")
  }
}

The only differences are that I've ticked Copy only when installing in the build phases as the app wasn't building due to a cycle detected, and in the Podfile I have added use_frameworks! to the target.

Do you have logging for the issue?

As you can see, the mutable-content is set to 1, and the url is sent. However, I don't see any logs from the extension service.

 Application received remote notification: [AnyHashable("aps"): {
    alert = hello;
    "mutable-content" = 1;
}, AnyHashable("com.urbanairship.media_attachment"): {
    options =     {
        hidden = 0;
    };
    url =     (
        "https://i.pravatar.cc"
    );
}, AnyHashable("com.urbanairship.metadata"):

These things are kinda tricky to debug, the console logs for the device might say something about not being able to find your service extension or why its not launching. In a simulator, run your app. Have the console open and filter on your package. Then send yourself messages and see if you can find anything about the service extension.

Those prints will only end up in the Xcode console. If you run your app first from Xcode, then switch to the extension target and run it again and select attach to your app, you can debug it directly from Xcode.

If its setup properly, its possible you are trying to attach too big of an image to the notification. The console logs should tell you that, but I doubt thats the issue. Usually they are misconfigured in someway. If you are having troubles with this, I would recommend trying to get a basic extension working that does not deal with images:

import UserNotifications

class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)

        if let bestAttemptContent = bestAttemptContent {
            bestAttemptContent.title = " [modified] \(bestAttemptContent.title)"
            contentHandler(bestAttemptContent)
        }
    }

    override func serviceExtensionTimeWillExpire() {
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            contentHandler(bestAttemptContent)
        }
    }

}

This will prefix the title with [modified], so it will be obvious if its working or not. Once that is working, then update to use Airship and see if images work.

Couple of things to look for:

Bundle ID of the extension should be prefixed with your main targets bundle ID. For instance, the example provided in this repo's bundle id is com.urbanairship.richpush so the extension is com.urbanairship.richpush.AirshipExampleNotificationServiceExtension.
Make sure the extension is embedded into the main apps target. In the main target -> General -> Frameworks, Libraries, and Embedded Content you should see it listed
The podfile should only have AirshipServiceExtension and no other frameworks attached to it.

If you write into support and provide your ios project files thats usually the easiest place to figure out what went wrong. Hopefully something is logged in the Console app that makes it obvious what the issue is.

Hi,

Thanks for your response. I've managed to get it to work! 🥳

The issue was pertaining to the setup - the copy only when installing checkbox needed to be unchecked, and then the build phase Embed Foundation Extensions needed to be moved up after the Copy Pods Resources phase and before the RNFB Core Configuration phase (which sets up Firebase and Firebase Crashlytics). Moving it before this phase prevents the build cycle detected during compilation.

Given the prevalence of Firebase amongst RN apps this might be handy to add to the docs!

Thanks for your help! Issue closed.

urbanairship / react-native-airship

Media sent with notifications not displaying #589