Gérer les Notifications avec React Native

Les notifications sont un élément essentiel pour améliorer l’engagement utilisateur dans une application mobile. Dans React Native, il existe plusieurs façons d’implémenter des notifications locales ou push (distantes). Cet article te montre les bases pour démarrer rapidement.

🧠 Types de Notifications

🔹 Notifications Locales

Envoyées directement depuis l’application sur l’appareil, sans passer par un serveur. Utiles pour :

• Rappels
• Alarmes
• Notifications internes à l’app

🔹 Notifications Push (ou distantes)

Envoyées via un serveur externe (Firebase, OneSignal, etc.). Idéales pour :

• Messages
• Nouveaux contenus
• Promotions

🛠️ Bibliothèques Populaires

Voici quelques bibliothèques fiables pour gérer les notifications dans React Native :

⚙️ Exemple avec react-native-push-notification

1. 📦 Installation

npm install react-native-push-notification
npm install @react-native-community/push-notification-ios # Pour iOS

2. 🔧 Configuration (Android)

Dans AndroidManifest.xml, ajoute :

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

3. 🧩 Initialisation

// NotificationService.js
import PushNotification from 'react-native-push-notification';

PushNotification.configure({
  onNotification: function (notification) {
    console.log('Notification reçue :', notification);
  },
  requestPermissions: Platform.OS === 'ios',
});

PushNotification.createChannel(
  {
    channelId: 'default-channel-id',
    channelName: 'Default Channel',
  },
  (created) => console.log(`Canal créé : ${created}`)
);

4. ✅ Envoyer une Notification Locale

import PushNotification from 'react-native-push-notification';

PushNotification.localNotification({
  channelId: 'default-channel-id',
  title: 'Bonjour Salah 👋',
  message: 'Ceci est une notification locale !',
});

⏰ Notifications Programmées

PushNotification.localNotificationSchedule({
  channelId: 'default-channel-id',
  title: 'Rappel 🔔',
  message: 'N’oublie pas ta tâche importante !',
  date: new Date(Date.now() + 60 * 1000), // dans 1 minute
});

🔐 Pour les Push Notifications (Firebase)

1. Crée un projet sur Firebase Console.
2. Installe :

npm install @react-native-firebase/app @react-native-firebase/messaging

3. Configure les clés Firebase pour Android et iOS.
4. Utilise messaging().onMessage(...) pour gérer les notifications en temps réel.

✅ Bonnes Pratiques

• Toujours demander la permission à l’utilisateur avant d’envoyer des notifications.
• Organiser les notifications par canaux (Android) pour faciliter la gestion.
• Personnalise les sons, icônes et actions pour une meilleure expérience.

Ajouter des notifications à ton application React Native est un excellent moyen d’engager les utilisateurs. Tu peux commencer avec des notifications locales, puis évoluer vers les push via Firebase ou OneSignal.

Si tu veux, je peux t’aider à intégrer ça dans ton app actuelle de gestion de budget.