Lesson 8: Rich Notifications & Image Support

In a world of constant digital noise, text alone often fails to capture a user's attention. Applications like Instagram and Pinterest succeed because their notifications are "rich"—they provide a visual preview of the content, making it impossible to ignore.

In this lesson, we will explore:

• The Power of Big Text: Sending expandable notifications for long messages.
• Data Payloads for Media: Structuring JSON to carry image URLs.
• Platform Differences: Understanding how Android and iOS handle rich media in Expo.
• In-App Image Previews: Implementing a seamless transition from notification to visual content.

1. Beyond the Snippet: Big Text Style

By default, notifications are usually truncated to a single line. However, on Android, you can send longer text that the user can expand to read in full.

In Expo, you simply provide a longer string in the body field. The operating system handles the "collapsed vs. expanded" view logic.

index.tstypescript
Copy
await Notifications.scheduleNotificationAsync({
  content: {
    title: "New Article Published! 📰",
    body: "We just released a massive guide on i18n in Next.js. It covers middleware, routing, and dynamic message loading with next-intl. Tap to read the full breakdown and see the code samples.",
    channelId: 'default',
  },
  trigger: null,
});

2. Incorporating Images via Data Payloads

In the Expo Managed Workflow, displaying an image inside the notification banner (Rich Content) can be complex on iOS. The most reliable and professional approach is to send the image URL within the data payload and handle the visual rendering within your app upon interaction.

The Sender Logic:

index.tstypescript
Copy
await Notifications.scheduleNotificationAsync({
  content: {
    title: "New Photo Comment 💬",
    body: "Someone commented on your sunset photo!",
    data: { 
      imageUrl: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
      type: 'PHOTO_PREVIEW' 
    },
    channelId: 'tasks',
  },
  trigger: { seconds: 1 },
});

3. Implementing the "Image Preview" Flow

Once the user taps the notification, your app should extract the imageUrl and immediately navigate to a preview screen. This gives the user the "visual" experience they expected when they saw the alert.

index.tstypescript
Copy
// Inside your Notification Response Listener:
const { imageUrl, type } = response.notification.request.content.data;

if (type === 'PHOTO_PREVIEW' && imageUrl) {
  // Navigate to a dedicated screen that displays the image in full screen
  navigation.navigate('MediaViewer', { uri: imageUrl });
}

Technical Note: iOS Service Extensions

For developers who need the image to appear in the iOS notification tray (next to the text), additional native steps are required. This involves creating a Notification Service Extension in Xcode.

“

[!NOTE] This typically requires "Ejecting" from the Managed Workflow or using Development Builds with custom config plugins. For 95% of use cases, the "Data Payload + In-App Deep Link" method provides an excellent and cross-platform experience.

Best Practices for Rich Content

1. High-Quality URLs: Ensure your image URLs are optimized and fast-loading.
2. Fallback Text: If the image fails to load, make sure the body text still makes sense on its own.
3. Contextual Navigation: Don't just show the image; show the comments or the "Like" button immediately beneath it to drive engagement.

Your Challenge

Create a "News Feed" mock-up in your project. Send a notification that contains a title, body, and an imageUrl of a news article. When the user taps it, navigate them to a screen that displays all three elements beautifully.