Notifications

Introduction

AppKickstarter has been fully setup to support notifications. There are 2 main types of notifications: Local Notifications and Push Notifications (remote).

Local Notifications

These notifications originate from within your app. For example, setting up a daily notification to remind the user to log an activity.

There are 2 parts to notifications: the handler and the trigger.

The handlers are setup in apps/native/src/hooks/usePushNotifications:

// define the default behavior
Notifications.setNotificationHandler({
	handleNotification: async () => ({
		shouldPlaySound: true,
		shouldSetBadge: true,
		shouldShowBanner: true,
		shouldShowList: true,
	}),
});

...

// this handler gets called when the app receives a notification. 
notificationListener.current =
	Notifications.addNotificationReceivedListener(
		(notification: Notifications.Notification) => {
			// In this case, we just set the notification in the state for consumers of the hook
			setNotification(notification);
		},
	);

// this handler gets called when a user responds to a notification
// useful for if it contains a link or a specific page (i.e. deep link) you want to open
responseListener.current =
	Notifications.addNotificationResponseReceivedListener(
		(response: Notifications.NotificationResponse) => {
			console.log(response);
		},
	);

You can trigger a notification by calling Notifications.scheduleNotificationAsync(). For example, to schedule a notification for every day at 12pm:

import * as Notifications from "expo-notifications";

async function schedulePushNotification() {
	// deliver a notification after 1 second
	await Notifications.scheduleNotificationAsync({
		content: {
			title: "It's time to go! 🏃",
			body: "Open the app to log your activity",
			data: { data: "goes here", test: { test1: "more data" } },
		},
		trigger: {
			type: Notifications.SchedulableTriggerInputTypes.DAILY,
			hour: 12,
			minute: 0,
		},
	});
}

You should get the following result:

The demo app's home screen has an example that triggers a notification after 1 second: packages/app/features/home/index.tsx.

We've setup the usePushNotifications hook to allow you to obtain the notification details from your app as well. Just consume the hook in the component that you'd like to read the notification details from:

const { expoPushToken, notification } = usePushNotifications();

Push Notifications (Remote)

Push Notifications are remote notifications that get triggered by some remote server, and then received by the app. For example, someone replied to a message.

Requirements

You will need to sign your build with certain credentials before you can use Push Notifications. Please see the official Expo documentation on getting credentials for development builds here

Testing

Once you have your development build signed, if you want to test it works, you can use the Expo Notification Tool.

• You can find the expoPushToken from apps/native/src/hooks/usePushNotifications during runtime (i.e. you can just console.log(pushToken) it).

Sending Notifications in Production

Once you have push notifications all setup (AppKickstarter has already set this up for you, and all you need to do is sign the build with your credentials for each App Store), the easiest way to send notifications in production is using Expo Push Service.

All you have to do is call the Expo API using an HTTPS POST request, and pass the ExpoPushToken and notification content.

More info about Expo Push Service here. There is also a guide there to do this manually, but it is a much more involved process (you will need to manage private keys, OAuth, etc.)

Further Reading

• https://docs.expo.dev/versions/latest/sdk/notifications
• https://docs.expo.dev/push-notifications/push-notifications-setup/