Chapter 18: Notifications & Permissions

In previous chapters, we learned how to use:

• Camera APIs
• Image Picker
• Location Services
• Async Operations
• Device Permissions

Modern mobile applications also use notifications to improve user engagement and user experience.

Examples:

• Banking apps send payment alerts
• Food delivery apps send order updates
• Expense apps send budget reminders

In ExpenseApp, notifications can help users:

• Add daily expenses
• Track budgets regularly
• Get alerts when budget exceeds limit
• Receive important updates

In this chapter, we will learn:

✅ Local Notifications ✅ Push Notification Basics ✅ Permission Handling ✅ Notification Scheduling ✅ Notification Events

using Expo Notifications API.

🎯 What You Will Learn

By the end of this chapter, you will:

• Understand notification types
• Implement local notifications
• Schedule notifications
• Understand push notification basics
• Handle notification permissions
• Handle denied permissions gracefully
• Respond to notification taps
• Build reminder systems in ExpenseApp

🔔 Understanding Notifications

Notifications are messages displayed outside the application UI.

They help users stay informed even when the app is closed.

🔹 Notification Types

There are two major notification types:

🔹 Local Notifications

Local notifications are created directly inside the application.

No backend server is required.

Examples

• Daily expense reminder
• Budget exceeded alert
• Monthly spending summary

Benefits

✅ Works offline ✅ Easy to implement ✅ No backend required

🔹 Push Notifications

Push notifications are sent from remote servers.

Examples

• Promotional offers
• Account alerts
• Multi-device updates

Requires

• Backend server
• Push notification service
• Device registration token

🔹 Notification Flow

Application Schedules Notification
                ↓
Operating System Stores Notification
                ↓
Notification Trigger Executes
                ↓
User Receives Alert

⚙️ Install Notifications Package

npx expo install expo-notifications

🔹 Import Notifications Module

import * as Notifications from "expo-notifications";

🔹 Why Permissions are Required

Operating systems require permission before sending notifications.

This protects users from spam and unwanted alerts.

🔹 Request Notification Permission

📁 src/services/notificationService.ts

import * as Notifications from "expo-notifications";

export const requestNotificationPermission = async () => {
    const { status } = await Notifications.requestPermissionsAsync();

    if (status !== "granted") {
        alert("Notification permission denied");

        return false;
    }

    return true;
};

🔹 Permission States

🔹 Best Practices for Permissions

✅ Ask permission contextually

✅ Explain why notification is useful

✅ Handle denied state properly

✅ Avoid repeated prompts

🔔 Configure Notification Behavior

Applications can control notification behavior while app is open.

🔹 Notification Handler

📁 src/services/notificationService.ts

Notifications.setNotificationHandler({
    handleNotification: async () => ({
        shouldShowAlert: true,

        shouldPlaySound: true,

        shouldSetBadge: false,
    }),
});

🔹 Handler Responsibilities

Controls:

• Alert display
• Sound playback
• Badge updates

🔔 Send Immediate Notification

Local notifications can be triggered instantly.

🔹 Example

await Notifications.scheduleNotificationAsync({
    content: {
        title: "Expense Reminder",

        body: "Don't forget to add today's expenses!",
    },

    trigger: null,
});

🔹 ExpenseApp Use Cases

• Expense reminders
• Payment reminders
• Budget alerts

⏰ Scheduling Notifications

Notifications can also be scheduled for future time.

🔹 Schedule Notification After Delay

await Notifications.scheduleNotificationAsync({
    content: {
        title: "Expense Reminder",

        body: "Track your expenses now!",
    },

    trigger: {
        seconds: 10,
    },
});

🔹 Daily Reminder Example

await Notifications.scheduleNotificationAsync({
    content: {
        title: "Daily Reminder",

        body: "Add today's expenses",
    },

    trigger: {
        hour: 20,
        minute: 0,
        repeats: true,
    },
});

🔹 Why Scheduled Notifications Matter

Scheduled reminders help users:

✅ Build habits ✅ Improve engagement ✅ Track expenses regularly

📡 Push Notifications Basics

Push notifications require remote server communication.

🔹 Push Notification Flow

Device Registers
        ↓
Expo Push Token Generated
        ↓
Token Sent to Backend
        ↓
Backend Sends Notification
        ↓
Device Receives Push Alert

🔹 Get Expo Push Token

const token = (await Notifications.getExpoPushTokenAsync()).data;

console.log(token);

🔹 Important Note

Complete push notification implementation requires:

• Backend APIs
• Database
• Push services

We will cover backend integration in advanced chapters.

📱 Handle Notification Tap

Applications can respond when users tap notifications.

🔹 Example

Notifications.addNotificationResponseReceivedListener((response) => {
    console.log(response);
});

🔹 ExpenseApp Use Cases

Notification tap can:

• Open expense screen
• Open budget page
• Open transaction details

🚫 Handling Denied Permissions

Users may reject notification access.

Applications must handle this gracefully.

🔹 Example

if (status !== "granted") {
    alert("Notifications are disabled");

    return;
}

🔹 Fallback Strategies

If notifications are disabled:

✅ Show in-app reminders

✅ Show banner messages

✅ Allow manual reminder setup

🔹 Guiding User to Settings

Instead of repeatedly requesting permission:

Enable notifications from device settings to receive reminders.

🧪 ExpenseApp Example

📁 src/app/settings.tsx

import React from "react";

import { View, Text, Pressable } from "react-native";

import * as Notifications from "expo-notifications";

import { style } from "../styles/styles";

export default function SettingsScreen() {
    const scheduleReminder = async () => {
        const { status } = await Notifications.requestPermissionsAsync();

        if (status !== "granted") {
            alert("Permission required");

            return;
        }

        await Notifications.scheduleNotificationAsync({
            content: {
                title: "Expense Reminder",

                body: "Add today's expenses!",
            },

            trigger: {
                hour: 20,
                minute: 0,
                repeats: true,
            },
        });

        alert("Daily reminder scheduled");
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Notification Settings</Text>

            <Pressable style={styles.button} onPress={scheduleReminder}>
                <Text style={styles.buttonText}>Enable Daily Reminder</Text>
            </Pressable>
        </View>
    );
}

🔹 Async Flow in Notifications

User Enables Reminder
           ↓
Permission Requested
           ↓
User Grants Access
           ↓
Notification Scheduled
           ↓
Operating System Triggers Alert

🔹 Recommended Folder Structure

src
│
├── app
│   └── settings.tsx
│
├── services
│   └── notificationService.ts
│
├── hooks
│   └── useNotifications.ts
│
└── styles
    └── styles.ts

⚡ Performance Considerations

✅ Avoid excessive notifications ✅ Schedule only important reminders ✅ Avoid notification spam ✅ Keep notification payloads simple

🔐 Security & Privacy

✅ Respect user preferences ✅ Do not spam users ✅ Explain why notifications are useful ✅ Avoid unnecessary background behavior

✅ Best Practices

✅ Use local notifications for reminders ✅ Use push notifications for server updates ✅ Handle denied permissions gracefully ✅ Keep notifications meaningful ✅ Schedule reminders thoughtfully ✅ Separate notification logic into services

⚠️ Common Mistakes

❌ Forgetting permission requests ❌ Sending too many notifications ❌ Ignoring denied permissions ❌ Not handling notification taps ❌ Scheduling duplicate notifications ❌ Mixing notification logic with UI

🧪 Practice Exercises

1. Add budget exceeded notification
2. Add weekly expense summary reminder
3. Add notification toggle setting
4. Navigate to expense screen on notification tap
5. Cancel scheduled notifications
6. Create reusable notification utility
7. Store notification preferences in AsyncStorage

📘 Chapter Summary

In this chapter, you:

✅ Learned local vs push notifications ✅ Implemented notification permissions ✅ Scheduled local notifications ✅ Understood push notification basics ✅ Handled denied permissions gracefully ✅ Responded to notification taps ✅ Built reminder functionality in ExpenseApp ✅ Structured reusable notification architecture