알림 채널 및 리치 콘텐츠
Android에서 알림 유형별 채널을 만들고, 알림에 이미지와 동작 버튼을 추가하며, iOS의 배지 개수를 구성합니다.
알림 채널 및 리치 콘텐츠은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Native Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
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.
AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“알림 채널 및 리치 콘텐츠” 강의는 무료인가요?
네 — “알림 채널 및 리치 콘텐츠” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“알림 채널 및 리치 콘텐츠”에서 뭘 배우나요?
Android에서 알림 유형별 채널을 만들고, 알림에 이미지와 동작 버튼을 추가하며, iOS의 배지 개수를 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
React Native Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“알림 채널 및 리치 콘텐츠” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.