How to Add Rich Push Notifications in Expo (iOS Images) | Code with Beto

I'll teach you how to add rich push notifications with images on iOS in an Expo app. While Android supports images in notifications by default, iOS requires extra native setup. I demonstrate how to create a notification service extension using Expo Apple targets, which enables your iOS app to display images in push notifications. This makes your notifications more engaging and professional.

You’ll see a demo comparing image notifications on Android and iOS, using Quick Push to send test notifications with images. I walk through editing native Swift code, configuring your app for signing, prebuilding the iOS project, and testing on a physical iPhone. This is a practical guide for React Native and Expo developers who want to level up their iOS notifications.

What's inside

Introduction to rich push notifications with images in Expo
Demo of image notifications on Android vs iOS
Using Quick Push to send test push notifications with images
Creating a notification service extension with Expo Apple targets
Editing native Swift code to support rich content images
Prebuilding and opening the iOS project in Xcode
Configuring app config with Apple team ID and signing in
Testing the updated app on a physical iPhone
Updating Expo server SDK for rich content support

Introduction to rich push notifications with images in Expo

I explain that Expo notifications support images on Android out of the box, but iOS requires additional setup to handle rich content images. The goal is to extend Expo notifications on iOS by adding a notification service extension that downloads and displays images in push notifications. This enhances the user experience by making notifications more visually appealing.

This lesson is part of my React Native course and is available for free. It’s designed for developers who want to improve their app’s notification capabilities on iOS without ejecting from Expo’s managed workflow.

Demo of image notifications on Android vs iOS

Using my Expo notifications playground app, I demonstrate sending a push notification with an image URL. On Android, the image appears beautifully within the notification, showing how easy it is to support images there. On iOS, however, the image does not show because the notification service extension is missing.

This demo highlights the limitation on iOS and why the notification service extension is necessary to handle rich notifications. It sets the stage for the rest of the tutorial where I implement the extension to fix this.

Using Quick Push to send test push notifications with images

For testing push notifications, I use Quick Push, a macOS menu bar app that lets you quickly send Expo push notifications. Quick Push supports including an image URL in the notification payload, along with other fields like title, description, priority, and custom data.

I show how to send a notification with an image URL to multiple device tokens, including Android and iOS devices. This tool makes it easy to test rich notifications without writing server code.

Creating a notification service extension with Expo Apple targets

To add the iOS notification service extension, I use Evan Bacon’s Expo Apple targets tool. Running generates a new notification service extension target inside the Expo project. This approach keeps the native code integrated with Expo’s managed workflow and prebuild system, avoiding the need to eject.

The generated target includes necessary files and configuration to add the extension to your iOS app. This method is straightforward and works well with Expo’s continuous native code generation.

Editing native Swift code to support rich content images

The generated notification service extension includes a Swift file that handles the extension’s logic. I replace the default Swift code with code from a referenced pull request that adds support for downloading and displaying rich content images in notifications.

This Swift code manages fetching the image from the URL and attaching it to the notification content on iOS. It’s a concise file that you can read and customize if needed. After replacing the code, I save the file and prepare to build the app.

Prebuilding and opening the iOS project in Xcode

Before building, I run to regenerate the native iOS project files, including the new notification service extension target. Then I open the iOS folder in Xcode using .

Inside Xcode, I locate the notification service extension files to verify the Swift code is correctly added. This step ensures the native extension is properly integrated and ready for building and signing.

Configuring app config with Apple team ID and signing in

In , I manually add the plugin configuration for the new notification service extension target since the config is not JSON. I also add my Apple team ID under the iOS section to enable proper code signing.

Signing into Xcode with your Apple developer account is necessary to build and run the app on a physical device. This setup ensures the app and extension are signed correctly for deployment.

Testing the updated app on a physical iPhone

After building the app in Xcode, I run it on an iPhone 13 Pro. I clear old notifications on both Android and iOS devices, then send a new push notification with an image via Quick Push.

On iOS, I long press the notification and see the image displayed, confirming the notification service extension works as expected. This final test proves the setup is complete and functional.

Updating Expo server SDK for rich content support

If you send notifications from your own Node server using the Expo server SDK, I recommend updating to the latest version. The latest SDK supports sending rich content images properly by including the image URL in the notification payload.

With the updated SDK and the notification service extension installed, your iOS app will display images in push notifications correctly. This ensures a consistent experience across platforms.

Resources

CourseReact Native course

Complete fundamentals and advanced topics for building React Native apps with Expo.

Let's connect!