Image in iOS push with Notification Service Extension

for React Native app

Mari Tafler
2 min readFeb 3, 2021

1. Add a notification service extension

  • From Xcode top menu go to: File > New > Target…
  • A modal will present a list of possible targets, scroll down or use the filter to select Notification Service Extension. Press Next.
  • Add a product name (I use NotificationServiceExtension) and click Finish
  • Enable the scheme by clicking Activate

2. Change Deployment Info for this new target. Set your minimal target version

3. Check, if you already set Push Notification and Background Mode capabilities for your main target (not NotificationService)

4. Add mutable-content to your push payload and alert with title and body

If you did everything right, you will see “Test title [modified]” in your push

5. Show image in push

If you send push using Firebase, just do step 2 and step 3 from https://rnfirebase.io/messaging/ios-notification-images

If you not using Firebase, you need:

  1. not forget to add in your payload: “mutable-content”: 1 and alert with title and body
  2. manually download image and add it to bestAttemptContent.attachments. See example here: https://medium.com/@lucasgoesvalle/custom-push-notification-with-image-and-interactions-on-ios-swift-4-ffdbde1f457

--

--