Local Notifications

Local notifications do not require a server - they are generated directly on the device.

Sending a Local Notification

import * as Notifications from 'expo-notifications';

// Immediate notification
async function sendLocalNotification() {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'Message from Atlantis!',
      body: 'Poseidon has a new task for you.',
      data: { screen: 'Tasks', taskId: '123' },
      sound: true,
      badge: 1,
    },
    trigger: null, // null = immediate
  });
}

// Delayed notification
async function scheduleNotification() {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'Reminder',
      body: 'Don\'t forget your training!',
    },
    trigger: {
      seconds: 60, // in 60 seconds
    },
  });
}

// Notification at a specific time
async function scheduleDailyReminder() {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'Good morning!',
      body: 'Time for your morning swimming session.',
    },
    trigger: {
      hour: 8,
      minute: 0,
      repeats: true, // daily
    },
  });
}

// Notification on a specific date
async function scheduleEventReminder(eventDate: Date) {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'Event tomorrow!',
      body: 'The Poseidon Festival starts tomorrow.',
    },
    trigger: eventDate,
  });
}

Canceling Notifications

// Cancel specific
const notificationId = await Notifications.scheduleNotificationAsync({...});
await Notifications.cancelScheduledNotificationAsync(notificationId);

// Cancel all scheduled
await Notifications.cancelAllScheduledNotificationsAsync();

// Get list of scheduled
const scheduled = await Notifications.getAllScheduledNotificationsAsync();

Managing Badge

// Set badge
await Notifications.setBadgeCountAsync(5);

// Get current badge
const count = await Notifications.getBadgeCountAsync();

// Clear badge
await Notifications.setBadgeCountAsync(0);

Local notifications are ideal for reminders and offline alerts!

import { View, Text, Button, StyleSheet } from 'react-native';
import * as Notifications from 'expo-notifications';

// Local notification after 1 hour
async function scheduleReminderInOneHour() {
  // TODO: call Notifications.scheduleNotificationAsync({ ... })
  // content should include title and body
  // set trigger to { seconds: 3600 } (1 hour)
  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'Reminder from Atlantis',
      // TODO: add body with the reminder text
      body: '',
    },
    // TODO: set trigger to 1 hour (3600 seconds)
    trigger: null,
  });
}

// Immediate notification (trigger: null)
async function sendNow() {
  // TODO: send a notification immediately (trigger: null)
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Reminders</Text>
      <Button title="Remind in an hour" onPress={scheduleReminderInOneHour} />
      <Button title="Send now" onPress={sendNow} />
    </View>
  );
}

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