Installation

Learn how to install and setup Native Notify push notifications in React Native Expo apps.

This video walks through the setup guide below:

Prerequisites

Create a free NativeNotify.com account

You must create a free NativeNotify.com account to get your App ID and App Token. You need an App ID and App Token for Native Notify push notifications to work.

Create a free Expo.dev account

You must create a free https://Expo.dev account for Native Notify push notifications to work.

System Requirements

Node.js: Make sure you have Node.js installed. The project uses npm, which comes with Node.js. Install Node.js from here.
NPM or Yarn: Since the project uses npm commands, ensure that npm is installed with Node.js. Alternatively, you can use Yarn if preferred.

To verify installation, run:

node -v
npm -v

Expo Setup

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

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

Installation and setup

Install Native Notify

Run the following commands in your Expo project terminal:

npm install native-notify
npx expo install expo-device expo-notifications expo-constants

Import Native Notify

In your App.js or index.js file (for Expo 50+), include this import at the top of the screen:

import registerNNPushToken from 'native-notify';

Check for Hook function

Make sure your App.js or index.js file (for Expo 50+) is a Hook function. Here is an example:

export default function AppPage() {
    ...
}

This link explains Hooks in detail: https://react.dev/reference/react/hooks
If you are using a class component, this link shows how to wrap a class component inside of a hook function allowing you to still use Native Notify in a class component: https://github.com/NativeNotify/wrap-class-in-hook

Paste register function

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

registerNNPushToken(app-id-number, 'app-token-string');

Here is a complete example:

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

export default function AppPage() {
    registerNNPushToken(app-id-number, 'app-token-string');

    return (
      ...
    )
}

Test if push notifications are working

Install eas-cli

Run the following commands in your Expo project terminal:

npm install -g eas-cli

eas login

If you have not logged into your eas account, run the following command in your terminal and follow the instructions:

eas login

eas init

Run the following command in your terminal and follow the instructions to ensure your project has a projectId (your app requires an eas projectId for push notifications to work):

eas init

npx expo start

Run the following command in your terminal and follow the instructions to open your app in the Expo Go app:

npx expo start

Open your app

Open your app in the Expo Go app on your iOS phone or Android phone. If you have not downloaded the Expo Go app yet, here is the link:

https://expo.dev/go

Required:

You MUST open your app on an iOS phone or Android phone. Push notifications do NOT work in an Android emulator or an iOS simulator.

Send yourself a push notification

Post to this URL:

https://app.nativenotify.com/api/notification

Use this POST body (replacing the 'dateSent' with your current date as a string):

{
   appId: app-id-as-a-number,
   appToken: "app-token-as-a-string",
   title: "Push title here as a string",
   body: "Push message here as a string",
   dateSent: "put your date here as a string"
}

Notes:

Push notifications will NOT work on an emulator/simulator. Push notifications only work on an actual device.
If you are using a non-javascript based server language like Python, specify that this is an 'application/json' post type in your post header.

Next, setup iOS and/or Android Production Notifications

Production Setup Guide ->

iOS

iOS Production Push Notification Setup Next Steps