0Pricing
React Native Academy · Lesson

Notification Channels and Rich Content

Create notification channels on Android for different notification types, add images and action buttons to notifications, and configure badge count on iOS.

Notification Channels and Rich Content is a free React Native Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Native Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are Notification Channels?

Notification channels are categories of notifications that Android users can control independently. Introduced in Android 8 (API 26), channels let users decide which types of notifications from your app they want to receive — for example, they might allow 'Messages' but block 'Promotions'. Each channel has its own sound, vibration, and importance settings.

Channels are an Android-only concept. iOS has its own notification management through notification categories and user settings, but no direct equivalent to channels. Always guard channel setup code with a Platform.OS check.

import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';

async function setupChannels() {
  if (Platform.OS !== 'android') return;

  // Create your app's notification channels:
  await Notifications.setNotificationChannelAsync('messages', { ... });
  await Notifications.setNotificationChannelAsync('reminders', { ... });
  await Notifications.setNotificationChannelAsync('promotions', { ... });
}

Creating a Notification Channel

Create a channel with Notifications.setNotificationChannelAsync(channelId, config). The config includes the name (shown to users in Settings), importance (how prominently notifications appear), vibrationPattern, lightColor, and whether to enableVibrate.

Channels are permanent — once created, users can modify them in Settings and your app cannot override their preferences. Create channels before calling them, and call this setup on every app launch because channels persist across app reinstalls through the channel ID.

await Notifications.setNotificationChannelAsync('messages', {
  name: 'Messages',
  description: 'New messages from other users',
  importance: Notifications.AndroidImportance.HIGH,
  vibrationPattern: [0, 250, 250, 250],
  lightColor: '#0066CC',
  enableVibrate: true,
  enableLights: true,
  showBadge: true,
  lockscreenVisibility: Notifications.AndroidNotificationVisibility.PUBLIC,
});

Importance Levels for Channels

The importance level controls how aggressively the notification interrupts the user:

  • NONE (0) — never appears
  • MIN (1) — no sound, no banner, appears in drawer
  • LOW (2) — no sound, no banner, in drawer
  • DEFAULT (3) — makes sound, appears as banner
  • HIGH (4) — makes sound, appears prominently
  • MAX (5) — always shown, wakes screen

Use HIGH for time-sensitive communications (messages, calls) and DEFAULT or LOW for informational updates and promotional content.

// Different channels with appropriate importance:
await Notifications.setNotificationChannelAsync('calls', {
  name: 'Incoming Calls',
  importance: Notifications.AndroidImportance.MAX, // wakes screen
});

await Notifications.setNotificationChannelAsync('news', {
  name: 'News Updates',
  importance: Notifications.AndroidImportance.LOW, // unobtrusive
});

await Notifications.setNotificationChannelAsync('marketing', {
  name: 'Promotions',
  importance: Notifications.AndroidImportance.MIN, // nearly invisible
});

Assigning Notifications to Channels

When sending a push notification to an Android device, specify which channel it belongs to by including channelId in the notification message. If no channel is specified, the notification falls into the default channel. On older Android versions (below API 26), the channel ID is ignored.

Correctly assigning notifications to channels is important — users who mute the 'Promotions' channel expect their 'Messages' channel to remain active. Mixing notification types in one channel leads to users muting important notifications.

// In push notification payload:
const message = {
  to: pushToken,
  title: 'Alice: Hey, are you free tonight?',
  body: 'New message from Alice',
  channelId: 'messages',     // routes to messages channel
  data: { screen: 'Chat', conversationId: 'alice_123' },
};

// For a promotional notification:
const promo = {
  to: pushToken,
  title: 'Weekend Sale — 30% off!',
  channelId: 'promotions',   // low importance, unobtrusive
};

Notification Groups on Android

When a user has multiple unread notifications from your app, Android can group them into a single expandable notification to avoid overwhelming the notification shade. Configure grouping by setting the groupId in the notification payload and creating a summary notification.

Grouped notifications show a stacked appearance with a count when collapsed and expand to show individual notifications. This is important for chat apps where a user might receive many messages before opening the app.

// Send individual notifications with group ID:
const messageNotif = {
  to: token,
  title: 'Alice: Hello!',
  channelId: 'messages',
  android: {
    groupId: 'chat_messages',
    tag: 'msg_alice_1',
  },
};

// Send group summary:
const summary = {
  to: token,
  title: '3 new messages',
  channelId: 'messages',
  android: {
    groupId: 'chat_messages',
    groupSummary: true,
  },
};

Rich Notifications: Images and Big Text

Android supports rich notification styles that go beyond title and body text. The BigPicture style shows a large image in the expanded notification. The BigText style shows multiple lines of text when expanded. These styles make notifications more informative and engaging.

In expo-notifications, use the android.bigPicture or android.bigText fields in the notification content. Rich notifications require Android channel support and increase engagement compared to plain text notifications.

const richNotification = {
  to: token,
  title: 'New photo from Alice',
  body: 'Alice shared a photo with you',
  channelId: 'messages',
  android: {
    imageUrl: 'https://myapp.com/photos/photo123.jpg', // big picture
    color: '#FF6B6B',
    actions: [
      { title: 'View', action: 'view_photo' },
      { title: 'Dismiss', action: 'dismiss' },
    ],
  },
};

iOS Rich Notifications

iOS supports rich notifications through notification service extensions — a separate target in the app that intercepts push notifications before display and can add images, modify content, or download media. This requires native code outside expo-notifications' managed API.

For simpler use cases, iOS push notifications can include a mutable-content: 1 flag and a media attachment URL in the APNs payload, processed by a Notification Service Extension. For Expo managed apps, this requires a config plugin or bare workflow.

// iOS push payload (APNs level):
// expo-notifications sends this automatically
// when you set content fields:
const iOSPushPayload = {
  aps: {
    alert: {
      title: 'New photo from Alice',
      body: 'Alice shared a photo with you',
    },
    sound: 'default',
    badge: 3,
    'mutable-content': 1, // allows service extension to modify
    'content-available': 1, // allows background fetch
  },
};

iOS Badge Count Management

On iOS the badge count appears as a red number on the app icon in the home screen. Set the badge count in the push notification payload's badge field. The server should always send the total unread count (absolute number), not an increment, because multiple devices must show the same badge count.

When the user opens and reads all notifications, reset the badge to 0 with Notifications.setBadgeCountAsync(0). Add this call to the screen that shows the notifications list so the badge clears naturally when the user checks their inbox.

// Push payload — absolute unread count:
const notification = {
  to: token,
  title: 'Alice sent you a message',
  body: 'Click to read',
  badge: 5, // total unread, not +1
};

// In app, when inbox is opened:
import * as Notifications from 'expo-notifications';

useEffect(() => {
  return navigation.addListener('focus', () => {
    Notifications.setBadgeCountAsync(0); // clear on inbox open
  });
}, [navigation]);

Notification Sound Customization

Both iOS and Android support custom notification sounds. Add audio files to your app bundle and reference them by filename. On iOS, short .aiff, .wav, or .caf files under 30 seconds work as notification sounds. On Android, sounds are configured at the channel level.

For Expo managed workflow, add audio files to the assets folder and reference them via a config plugin or bare workflow. Many apps skip custom sounds and use the default system sound, which users are already conditioned to notice.

// iOS: add sound file to iOS app bundle
// Android: create channel with sound
if (Platform.OS === 'android') {
  await Notifications.setNotificationChannelAsync('messages', {
    name: 'Messages',
    importance: Notifications.AndroidImportance.HIGH,
    sound: 'message_sound', // filename without extension
  });
}

// In push payload:
{
  to: token,
  sound: 'default', // use system default
  // Or: sound: 'message_sound.aiff' on iOS
}

Deleting Notification Channels

If you restructure your notification types, you can delete old channels with Notifications.deleteNotificationChannelAsync(channelId). Deleting and recreating a channel with the same ID resets user customizations — this is controversial because it overrides user preferences.

Best practice: avoid deleting channels that users might have customized. Instead, deprecate old channels by creating new ones with better names and routing new notifications to the new channel. Old channels become empty but remain visible in Settings (they disappear after the app is reinstalled).

// Get all current channels:
const channels = await Notifications.getNotificationChannelsAsync();
console.log('Active channels:', channels.map(c => c.id));

// Delete a deprecated channel:
await Notifications.deleteNotificationChannelAsync('old_alerts');

// CAUTION: this resets any user customizations
// for that channel ID if recreated

Notification Permission Status and In-App Settings

Provide in-app notification preference controls even if the OS-level permission is granted. Users should be able to opt out of marketing notifications while keeping message notifications enabled. Implement server-side preference flags per user and per notification type.

Also provide a clear UI when the OS permission is denied, with a button that opens the Settings app using Linking.openSettings(). This prevents users from assuming your app is broken when they've unknowingly denied permissions.

import { Linking } from 'react-native';
import * as Notifications from 'expo-notifications';

async function checkAndPromptPermission() {
  const { status } = await Notifications.getPermissionsAsync();

  if (status === 'denied') {
    Alert.alert(
      'Notifications Disabled',
      'Enable notifications in Settings to receive important updates.',
      [
        { text: 'Cancel', style: 'cancel' },
        { text: 'Open Settings', onPress: () => Linking.openSettings() },
      ]
    );
  }
}

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: Android notification channels group notifications by type and give users independent control over each category's sound, vibration, and display settings, importance levels from MIN to MAX control how aggressively notifications interrupt the user, and the channelId field in push payloads routes each notification to the correct channel. Next up we implement offline-first data fetching using TanStack React Query with cache persistence.

Frequently asked questions

Is the “Notification Channels and Rich Content” lesson free?

Yes — the full text of “Notification Channels and Rich Content” is free to read here on the web, and the React Native Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Native Academy course, upgrade to CoddyKit PRO.

What will I learn in “Notification Channels and Rich Content”?

Create notification channels on Android for different notification types, add images and action buttons to notifications, and configure badge count on iOS. You practise React Native Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Native Academy?

No prior experience is required. React Native Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Notification Channels and Rich Content” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Native Academy lesson?

Yes. Every React Native Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Requesting Permission and Getting a Push Token
  2. Sending Notifications via the Expo Push API
  3. Handling Foreground and Background Notifications
  4. Notification Channels and Rich Content
← Back to React Native Academy