Cours React Native · Module 7: Notifications

Canaux de notification (Android)

2 min de lecture ·
Dans cette leçon3

Android exige des canaux de notification depuis la version 8.0 (Oreo).

Créer des canaux

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

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

  // Canal pour les notifications importantes
  await Notifications.setNotificationChannelAsync('urgent', {
    name: 'Notifications urgentes',
    importance: Notifications.AndroidImportance.MAX,
    vibrationPattern: [0, 250, 250, 250],
    lightColor: '#FF0000',
    sound: 'alarm.wav',
    enableVibrate: true,
    enableLights: true,
  });

  // Canal pour les messages
  await Notifications.setNotificationChannelAsync('messages', {
    name: 'Messages',
    importance: Notifications.AndroidImportance.HIGH,
    sound: 'message.wav',
  });

  // Canal pour les rappels
  await Notifications.setNotificationChannelAsync('reminders', {
    name: 'Rappels',
    importance: Notifications.AndroidImportance.DEFAULT,
  });

  // Canal pour le marketing (faible priorité)
  await Notifications.setNotificationChannelAsync('marketing', {
    name: 'Promotions et actualités',
    importance: Notifications.AndroidImportance.LOW,
  });
}

Utiliser les canaux

// Envoi vers un canal précis
await Notifications.scheduleNotificationAsync({
  content: {
    title: 'Message urgent !',
    body: 'Le système de sécurité de l\'Atlantide a été percé !',
  },
  trigger: null,
  // Indiquer le canal pour Android
  ...(Platform.OS === 'android' && {
    channelId: 'urgent',
  }),
});

Gérer les canaux

// Obtenir tous les canaux
const channels = await Notifications.getNotificationChannelsAsync();

// Obtenir un canal précis
const channel = await Notifications.getNotificationChannelAsync('urgent');

// Supprimer un canal
await Notifications.deleteNotificationChannelAsync('old-channel');

Les canaux permettent aux utilisateurs de contrôler les différents types de notifications !

Code de cette leçon : App.tsx
import { useEffect } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import * as Notifications from 'expo-notifications';

// Configure les canaux de notification pour Android (depuis Android 8.0 Oreo)
async function setupNotificationChannels() {
  if (Platform.OS !== 'android') return;

  // TODO : crée le canal 'urgent' avec l'importance MAX
  // utilise Notifications.setNotificationChannelAsync('urgent', { name, importance })
  await Notifications.setNotificationChannelAsync('urgent', {
    name: 'Notifications urgentes',
    // TODO : définis importance à Notifications.AndroidImportance.MAX
    importance: Notifications.AndroidImportance.DEFAULT,
  });

  // TODO : crée le canal 'reminders' avec l'importance HIGH
  // await Notifications.setNotificationChannelAsync('reminders', { ... });

  // TODO : crée le canal 'marketing' avec l'importance LOW
  // await Notifications.setNotificationChannelAsync('marketing', { ... });
}

export default function App() {
  useEffect(() => {
    setupNotificationChannels();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Canaux Android</Text>
      <Text style={styles.info}>urgent • reminders • marketing</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#1a5276' },
  title: { fontSize: 24, color: '#fff', marginBottom: 12 },
  info: { fontSize: 14, color: '#aed6f1' },
});

Entrées de la documentation utilisées dans cette leçon

Tu as repéré une erreur dans cette leçon ?

Teste tes connaissances

Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.

  1. 1. À partir de quelle version d'Android les canaux de notification sont-ils requis ?

  2. 2. Quelle valeur d'importance donne la plus haute priorité ?

Tâches pratiques dans le jeu

  • Clique dans l'ordre

    Clique sur les éléments de création du canal :

  • Éditeur de code

    Complète le code setNotificationChannelAsync.

Articles utiles