Expo Push Notifications in Managed Workflow | React Native

You will have to create a free Native Notify account to get your App ID and App Token in order for the native-notify package to work. Click the "Sign Up Free" button in the top right corner of this page to create a free account.

Start Here
Start Here Guide:

These instructions show how to add Native Notify push notifications to your React Native / Expo app. After you follow these instructions, you will be able to send mass push notifications to all of your app users.

This video walks you through the Start Here Instructions below:
Expo Setup Guide:

You need the Expo modules installed in your React Native app in order for Native Notify push notifications to work. Native Notify push notifications work in both Expo "managed workflow" AND "bare workflow". You do NOT have to eject out of Expo to use Native Notify push notifications.

If you already have Expo set up in your React Native app, you can skip this 'Expo Setup Guide' and go to Step 1 below this section.

If you have not yet added Expo to your existing React Native app, visit this link to learn how to get Expo set up in your existing React Native app: https://docs.expo.dev/bare/installing-expo-modules/

Step 1:

Paste these commands into your terminal and click return:

npm install native-notify

npx expo install expo-device expo-notifications

Step 2:

In your App.js file, make sure this import is included at the top of the screen:

import registerNNPushToken from 'native-notify';

Step 3:

Make sure you are using a Hook function as your App function. Here is an example:

export default function App() {

     ...

}

This link explains Hooks in detail: https://reactjs.org/docs/hooks-intro.html

Step 4:

Inside of your App function, at the top of your App function, paste this code:

registerNNPushToken(your-app-id, 'your-app-token');

Step 5:

Start your Expo app:

npx expo start

Step 6 (error handling):

If you see the following error in your terminal, it means you need to run 'eas build' in your terminal:

"WARN Calling getExpoPushTokenAsync without specifying a projectId is deprecated and will no longer be supported in SDK 49+"

After you run 'eas build' and follow the instructions at least one time, EAS will automatically create a "projectId" for you.

You can then run 'npx expo start' again and the error should be gone.

If there is no error, proceed to Step 7.

Step 7:

Open your app in the Expo Go app on your iOS phone or Android phone.

Step 8:

Send yourself a push notification from the NativeNotify.com push notification portal.

Android
Android Production Setup Guide:

These instructions show how to get Native Notify push notifications working in Android production mode. After you follow these instructions, you will be able to send push notifications to all of your Android app users.

Make sure you follow the 'Start Here' instructions BEFORE you set up Android production push notifications. Android production push notifications will not work without first following the 'Start Here ' instructions.

This video walks you through the Android Production setup guide:

iOS
iOS Production Setup Guide:

These instructions show how to get Native Notify push notifications working in iOS production mode. After you follow these instructions, you will be able to send push notifications to all of your iOS app users.

Make sure you follow the 'Start Here' instructions BEFORE you set up iOS production push notifications. iOS production push notifications will not work without first following the 'Start Here' instructions.

This video walks you through the iOS Production setup guide:

Notification Inbox
In-App Notification Inbox Setup Guide:

These instructions show how to create a Notification Inbox within your app. Your users will be able to see a history of all the previous notifications sent.

Make sure you follow the 'Start Here' instructions BEFORE you set up an In-App Notification Inbox. The In-App Notification Inbox will not work without first following the 'Start Here' instructions.

This video walks you through the In-App Notification Inbox setup guide:

Indie Push
Indie Push Notification Setup Guide:

These instructions show how to send customized push notifications to individual users. We call these notifications "Indie" push notifications.

Make sure you follow the 'Start Here' instructions BEFORE you set up Indie Push Notifications. Indie Push Notifications will not work without first following the 'Start Here' instructions.

This video walks you through the Indie Push Notification setup guide:

Indie Notification Inbox
Indie Notification Inbox Setup Guide:

These instructions show how to create an Indie Notification Inbox within your app. Your users will be able to see a history of all the previous notifications sent.

Make sure you follow the 'Indie Push' setup guide BEFORE you set up an Indie Notification Inbox. The Indie Notification Inbox will not work without first following the 'Indie Push' setup guide.

This video walks you through the Indie Notification Inbox setup guide:

Notification Inbox preview:

Here's how the Indie Notification Inbox API works:

Get Indie Notifications Sent: Use the native-notify 'getIndieNotificationInbox' function to get a history of all the push notifications sent to an individual user in the past.

Use: Use the Indie Notification Inbox data from the 'getIndieNotificationInbox' function to create an in-app Indie Notification Inbox.

Allow Users to Delete Notifications: Use the native-notify 'deleteIndieNotificationInbox' function to delete a notification within the Indie Notification Inbox.

Setup Guide:

Step 1:

Paste these commands into your terminal and click return:

npm uninstall native-notify

npm install native-notify

npx expo install expo-device expo-notifications

Step 2:

In your Indie Notification Inbox screen, make sure these imports are included at the top of the screen:

import React, { useState, useEffect } from 'react-native';

import { getIndieNotificationInbox, deleteIndieNotificationInbox } from 'native-notify';

Step 3:

Make sure you are using a Hook function as your Indie Notification Inbox function. Here is an example:

export default function IndieNotificationInbox() {

     ...

}

This link explains Hooks in detail: https://reactjs.org/docs/hooks-intro.html

Step 4:

Inside of your Indie Notification Inbox screen, create a useState to store your Indie Notification Inbox data like this:

const [data, setData] = useState([]);

Step 5:

Paste this 'useEffect' function into your Indie Notification Inbox function:

useEffect(async () => {

     let notifications = await getIndieNotificationInbox('your-indie-id', your-app-id, 'your-app-token');

     console.log("notifications: ", notifications);

     setData(notifications);

}, []);

How to delete a notification:

Something you need to know first:

Each notification in the Indie Notification Inbox has a notification_id. You need that notification_id to be able to delete the notification. If you're using something like a Flatlist or a map function to display your notifications in the Indie Notification Inbox, each notification object within your data array will include a notification_id. Use this notification_id as the parameter in the handleDeleteNotification function below. The delete function in your onPress event should look something like this:

handleDeleteNotification(item.notification_id);

Here's how to delete a notification in an Indie Notification Inbox:
Step 1:

Use this function:

const handleDeleteNotification = async (notificationId) => {

     let notifications = await deleteIndieNotificationInbox('your-indie-id', notificationId, your-app-id, 'your-app-token');

     console.log("notifications: ", notifications);

      setData(notifications);

}

Group Push
Group Push Notification Setup Guide:

These instructions show how to send push notifications to groups of users programmatically.

Make sure you follow the 'Indie Push' setup guide BEFORE you set up Group Push Notifications. Group Push Notifications will not work without first following the 'Indie Push' setup guide.

This video walks you through the Group Push setup guide:

Follow Push
Follow Push Notification Setup Guide:

These instructions show how to create a Following Network. Users can register to become a Follow Master. Follow Masters can be followed by other users. When a Follow Push Notification is sent, the notification is ONLY sent to all of the Follow Master's followers.

Make sure you follow the 'Start Here' instructions and the 'Indie Push' setup guide BEFORE you set up Follow Push Notifications. Follow Push Notifications will not work without first following the 'Start Here' instructions and the 'Indie Push' setup guide.

This video walks you through the Follow Push setup guide: