push-notifications

Installation#

yarn add @uplift-ltd/push-notifications

Firebase Cloud Messaging (FCM)#

FCM is required for sending push notifications to Android devices. See Expo docs.

Add Project in Firebase Console
Add Firebase to your Android app and follow the setup steps. Make sure that the Android package name you enter is the same as the value of android.package in your app.config.*.ts
Download the google-services.json file and place it in src/constants/google-services/google-services-*.json
In your app.config.*.ts, add an android.googleServicesFile field with the relative path to the google-services.json file you just downloaded.

{
  ...
  "android": {
    "googleServicesFile": "./src/constants/google-services/google-services-production.json",
    ...
  }
}

API#

This module can used either with context or hooks.

Note: When reading the docs below, pay attention to the difference between these:

registerForPushNotifications -> this is a function you can pass in to customize getting the token
registerPushNotifications -> this is a function you get back to trigger getting the token
onRegisterPushNotifications -> this is a callback when registerPushFunction resolves

NotificationProvider#

Takes in functions to handle:

notification received
notification response received
save token / register device

import {
  NotificationProvider,
  NotificationReceivedListener,
  NotificationResponseReceivedListener,
} from "@uplift-ltd/push-notifications";
import Constants from 'expo-constants

const handleNotificationReceived: NotificationReceivedListener = (notification) => {
  console.log(notification);
};

const handleNotificationResponseReceived: NotificationReceivedListener = (response) => {
  console.log(response.notification);
};

function Root() {
  const [registerDevice] = useMutation(REGISTER_DEVICE);

  const handleRegisterPushNotifications = useCallback(async (token) => {
    try {
      await registerDevice({ variables: { token, deviceId: Constants.installationId } });
    } catch (err) {
      Sentry.captureExeception(err)
    }
  }, []);

  return (
    <NotificationProvider
      onReceived={handleNotificationReceived}
      onResponseReceived={handleNotificationResponseReceived}
      onRegisterPushNotifications={handleRegisterPushNotifications}
    >
      <App />
    </NotificationProvider>
  );
}

NotificationPrompt#

On render, prompts the user for permission to send notifications. Uses context from NotificationProvider.

import { NotificationProvider, NotificationPrompt } from "@uplift-ltd/push-notifications";

function Root() {
  return (
    <NotificationProvider {...seePropsAbove}>
      <NotificationPrompt />
    </NotificationProvider>
  );
}

NotificationAlertPrompt#

If permission is undetermined, it renders an alert. If the user accepts, then it requests permission to notify. On iOS if the user denies you cannot ask for permission again. You can customize the alert copy, defaults are shown below.

NOTE: On iOS if the user denies the status is always undetermined, you may want to store if the user denied and hide the component. You can do this using onRegisterPushNotifications on NotificationProvider or onRegisterPushNotifications on NotificationAlertPrompt. In the future we will handle this here. Note that onRegisterPushNotifications should be a stable function (should not change on render).

import { NotificationProvider, NotificationAlertPrompt } from "@uplift-ltd/push-notifications";

function Root() {
  return (
    <NotificationProvider {...seePropsAbove}>
      <NotificationAlertPrompt
        title="Please Allow Notifications"
        message="This application uses notifications to keep you up to date on new activity."
        acceptLabel="Enable"
        cancelLabel="Not Now"
      />
    </NotificationProvider>
  );
}

NotificationRenderPrompt#

If permission is undetermined, it renders the children. The children is a function that gets passed in permissionStatus and registerPushNotifications.

NOTE: On iOS if the user denies the status is always undetermined, you may want to store if the user denied and hide the component. You can check the result of registerPushNotifications for this.

import {
  NotificationProvider,
  NotificationRenderPrompt,
  PermissionStatus,
} from "@uplift-ltd/push-notifications";

function Root() {
  return (
    <NotificationProvider {...seePropsAbove}>
      <NotificationRenderPrompt>
        {({ permissionStatus, registerPushNotifications }) => {
          if (permissionStatus !== PermissionStatus.UNDETERMINED) {
            return null;
          }
          return <Button onPress={registerPushNotifications}>Notify Me!</Button>;
        }}
      </NotificationRenderPrompt>
    </NotificationProvider>
  );
}

usePushNotifications#

You can avoid the context entirely and use the hooks instead.

import { usePushNotifications, PermissionStatus } from "@uplift-ltd/push-notifications";

const handleNotificationReceived: NotificationReceivedListener = (notification) => {
  console.log(notification);
};

const handleNotificationResponseReceived: NotificationReceivedListener = (response) => {
  console.log(response.notification);
};

function Root() {
  const { permissionStatus, registerPushNotifications } = usePushNotifications({
    onReceived: handleNotificationReceived,
    onResponseReceived: handleNotificationResponseReceived,
    onRegisterPushNotifications: async ({ token }) => {
      if (token) {
        const { data } = await registerDevice({
          variables: { token, deviceId: Constants.installationId, userId },
        });
        if (!data.registerDevice.success) {
          throw new Error(
            data.registerDevice.message || "Failed to register for push notifications."
          );
        }
      }
    },
  });

  const [registerDevice] = useMutation(REGISTER_DEVICE);

  useEffect(() => {
    const run = async () => {
      try {
        if (permissionStatus === PermissionStatus.UNDETERMINED) {
          const { token } = await registerPushNotifications();
          if (!token) {
            Alert.alert("If you change your mind you can go to app settings.");
          }
        }
      } catch (err) {
        Sentry.captureExeception(err);
      }
    };
    run();
  }, [userId]);
}