Canali di notifica e contenuti avanzati
Crei canali di notifica su Android per diversi tipi di notifiche, aggiunga immagini e pulsanti di azione alle notifiche e configuri il conteggio del badge su iOS.
Canali di notifica e contenuti avanzati è una lezione React Native Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Native Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Native Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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 recreatedNotification 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.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Canali di notifica e contenuti avanzati» è gratuita?
Sì — il testo completo di «Canali di notifica e contenuti avanzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Native Academy, passa a CoddyKit PRO. Il corso React Native Academy include 4 lezioni in totale.
Cosa imparerò in «Canali di notifica e contenuti avanzati»?
Crei canali di notifica su Android per diversi tipi di notifiche, aggiunga immagini e pulsanti di azione alle notifiche e configuri il conteggio del badge su iOS. Eserciti React Native Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Native Academy?
Non è richiesta alcuna esperienza precedente. React Native Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Canali di notifica e contenuti avanzati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Native Academy?
Sì. Ogni lezione React Native Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Richiedere l'autorizzazione e ottenere un token push
- Inviare notifiche tramite l'API Push di Expo
- Gestire le notifiche in primo piano e in background
- Canali di notifica e contenuti avanzati