Lokale meldingen plannen
Installeer expo-notifications, vraag toestemming, plan een lokale melding die na een vertraging wordt geactiveerd en verwerk het aantikken van de melding om naar een specifiek scherm te navigeren.
Lokale meldingen plannen is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Wat zijn lokale meldingen?
Lokale meldingen zijn waarschuwingen die je app volledig op het apparaat plant en aflevert, zonder server. In tegenstelling tot pushmeldingen hebben ze geen internetverbinding of backendservice nodig. Ze zijn ideaal voor herinneringen, dagelijkse gewoontemeldingen, timerwaarschuwingen en meldingen in de app die na een bepaalde tijd of volgens een terugkerend schema worden geactiveerd.
expo-notifications installeren
Installeer expo-notifications met de installatieopdracht van Expo, zodat de met de SDK compatibele versie wordt geselecteerd. In beheerde Expo-projecten gebeurt het koppelen van native code automatisch. Voeg ook het configuratieblok notification toe aan app.json om het meldingspictogram en de kleur voor Android in te stellen die door het OS worden gebruikt.
npx expo install expo-notifications
// app.json:
{
"expo": {
"notification": {
"icon": "./assets/notification-icon.png",
"color": "#6200ee",
"androidMode": "default"
}
}
}Toestemming voor meldingen aanvragen
Op zowel iOS als Android moet je toestemming voor meldingen aanvragen voordat je een melding plant. Op iOS moet de gebruiker uitdrukkelijk goedkeuring geven — het systeem toont een dialoogvenster. Voor Android 13 en hoger is ook runtime-toestemming vereist. Roep Notifications.requestPermissionsAsync() aan en controleer of status gelijk is aan 'granted' voordat je verdergaat.
import * as Notifications from 'expo-notifications';
async function requestNotificationPermission() {
const { status } = await Notifications.requestPermissionsAsync();
if (status !== 'granted') {
Alert.alert(
'Permission Denied',
'Enable notifications in Settings to receive reminders.'
);
return false;
}
return true;
}Een standaardhandler voor meldingen instellen
Stel met Notifications.setNotificationHandler een globale meldingshandler in om te bepalen hoe meldingen zich gedragen wanneer de app op de voorgrond staat. Zonder deze handler worden meldingen die worden afgeleverd terwijl je app geopend is op iOS stil genegeerd. Roep de handler één keer aan op moduleniveau (buiten elke component), zodat deze altijd actief is.
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true, // show banner while app is open
shouldPlaySound: true,
shouldSetBadge: false,
}),
});Een eenmalige melding plannen
Notifications.scheduleNotificationAsync plant een melding om deze op een specifiek tijdstip af te leveren. De trigger kan een aantal seconden vanaf nu, een specifiek Date-object of een terugkerende kalendertrigger zijn. De functie retourneert een unieke meldings-ID die je later kunt gebruiken om de melding zo nodig te annuleren.
async function scheduleReminder() {
const hasPermission = await requestNotificationPermission();
if (!hasPermission) return;
const id = await Notifications.scheduleNotificationAsync({
content: {
title: 'Daily Reminder',
body: 'Time to check your goals for today!',
sound: true,
data: { screen: 'Goals' }, // custom data for handling the tap
},
trigger: {
seconds: 60, // deliver in 60 seconds
},
});
console.log('Notification scheduled with ID:', id);
}Een terugkerende melding plannen
Gebruik een kalendertrigger met een vlag repeats: true om een terugkerende melding te plannen — bijvoorbeeld een dagelijkse herinnering om 8.00 uur. Geef het uur, de minuut en eventueel de dag van de week op om elk gewenst terugkerend patroon te maken. Het OS levert de melding op het opgegeven tijdstip af en plant deze automatisch opnieuw voor de volgende keer.
await Notifications.scheduleNotificationAsync({
content: {
title: 'Good morning!',
body: 'Your daily coding practice is waiting.',
},
trigger: {
type: Notifications.SchedulableTriggerInputTypes.CALENDAR,
hour: 8,
minute: 0,
repeats: true, // fires every day at 8:00 AM
},
});Een geplande melding annuleren
Sla de meldings-ID op die door scheduleNotificationAsync wordt geretourneerd (bijvoorbeeld in status of AsyncStorage), zodat je de melding later kunt annuleren. Roep Notifications.cancelScheduledNotificationAsync(id) aan met de opgeslagen ID om een specifieke melding te annuleren. Gebruik cancelAllScheduledNotificationsAsync() om alle wachtende meldingen tegelijk te annuleren.
const [notifId, setNotifId] = React.useState<string | null>(null);
async function cancelReminder() {
if (notifId) {
await Notifications.cancelScheduledNotificationAsync(notifId);
setNotifId(null);
console.log('Notification cancelled');
}
}
// Or cancel all at once:
await Notifications.cancelAllScheduledNotificationsAsync();Meldingen op de voorgrond afhandelen
Gebruik Notifications.addNotificationReceivedListener om te reageren wanneer er een melding binnenkomt terwijl de app geopend is. Dit is handig voor het bijwerken van badges in de app, het afspelen van een aangepast geluid of het vernieuwen van een gegevensfeed. Verwijder de listener altijd in de opruimfunctie van useEffect om geheugenlekken te voorkomen.
useEffect(() => {
const subscription = Notifications.addNotificationReceivedListener(
(notification) => {
console.log('Received:', notification.request.content.title);
const screen = notification.request.content.data?.screen;
if (screen) setBadge(screen);
}
);
return () => subscription.remove();
}, []);Omgaan met tikken op meldingen
Gebruik Notifications.addNotificationResponseReceivedListener om af te handelen wanneer de gebruiker op een meldingsbanner tikt. Deze callback wordt uitgevoerd ongeacht of de app op de voorgrond, op de achtergrond of gesloten was. Gebruik het aangepaste veld data dat je bij het plannen hebt toegevoegd om naar het juiste scherm in je app te navigeren.
useEffect(() => {
const subscription = Notifications.addNotificationResponseReceivedListener(
(response) => {
const screen = response.notification.request.content.data?.screen;
if (screen && navigationRef.current) {
navigationRef.current.navigate(screen);
}
}
);
return () => subscription.remove();
}, []);Alle geplande meldingen ophalen
Roep Notifications.getAllScheduledNotificationsAsync() aan om een lijst op te halen van alle geplande meldingen die nog moeten worden weergegeven. Dit is handig voor foutopsporing, voor een beheerscherm voor 'Herinneringen' waarop gebruikers geplande meldingen kunnen bekijken en verwijderen, of om te voorkomen dat meldingen dubbel worden gepland wanneer de gebruiker het instellingenscherm opnieuw opent.
async function listScheduledNotifications() {
const scheduled = await Notifications.getAllScheduledNotificationsAsync();
console.log('Pending notifications:', scheduled.length);
scheduled.forEach((notif) => {
console.log(
notif.identifier,
notif.content.title,
JSON.stringify(notif.trigger)
);
});
}Badges en Android-kanalen
Stel op iOS het badgenummer van de app in met Notifications.setBadgeCountAsync(count). Op Android 8 en hoger moeten meldingen aan een meldingskanaal worden toegewezen. Dit kanaal bepaalt het geluid, de trilling en het belang van de melding. Maak bij het starten van de app één keer een kanaal aan met Notifications.setNotificationChannelAsync en verwijs naar de ID ervan in het veld channelId van je melding.
if (Platform.OS === 'android') {
await Notifications.setNotificationChannelAsync('reminders', {
name: 'Reminders',
importance: Notifications.AndroidImportance.HIGH,
vibrationPattern: [0, 250, 250, 250],
sound: 'default',
});
}
// Reference in notification:
await Notifications.scheduleNotificationAsync({
content: { title: 'Reminder', channelId: 'reminders' },
trigger: { seconds: 30 },
});Snelle controle
Toets je begrip van de concepten van React Native Mobile Development uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat requestPermissionsAsync moet zijn toegestaan voordat er een melding kan verschijnen, dat scheduleNotificationAsync met een trigger eenmalige of terugkerende meldingen op opgegeven tijden bezorgt, en dat addNotificationResponseReceivedListener tikken van gebruikers afhandelt om naar het juiste scherm te navigeren. Hierna bekijken we hoe je op een prettige manier met machtigingen omgaat.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Lokale meldingen plannen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Lokale meldingen plannen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Lokale meldingen plannen”?
Installeer expo-notifications, vraag toestemming, plan een lokale melding die na een vertraging wordt geactiveerd en verwerk het aantikken van de melding om naar een specifiek scherm te navigeren. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Lokale meldingen plannen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Cameratoegang met expo-camera
- GPS-locatie lezen met expo-location
- Lokale meldingen plannen
- Toestemmingen zorgvuldig verwerken