React Native Academy · Leçon

Canaux de notification et contenu enrichi

Créez des canaux de notification sur Android pour différents types de notifications, ajoutez des images et des boutons d'action aux notifications, puis configurez le nombre de badges sur iOS.

Leçon 4 sur 413 étapes

Canaux de notification et contenu enrichi est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Réponds-y dans la leçon interactive

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.

Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 30
Leçons: 120

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Canaux de notification et contenu enrichi » est-elle gratuite ?

Oui — le texte complet de « Canaux de notification et contenu enrichi » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Canaux de notification et contenu enrichi » ?

Créez des canaux de notification sur Android pour différents types de notifications, ajoutez des images et des boutons d'action aux notifications, puis configurez le nombre de badges sur iOS. Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Native Academy ?

Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Canaux de notification et contenu enrichi » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?

Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Demander l'autorisation et obtenir un jeton push
Envoyer des notifications via l'API Push d'Expo
Gérer les notifications au premier plan et en arrière-plan
Canaux de notification et contenu enrichi

← Retour à React Native Academy