crossplatform-push-notifications-example icon indicating copy to clipboard operation
crossplatform-push-notifications-example copied to clipboard

Example for crossplatform push notifications with node.js and React Native

Crossplatform Push-Notifications Demo

This is an example for a Crossplatform Push-Notification setup that works for both Android and iOS.

The example comprises of a server application written in node.js that uses the node-pushnotifications library and a React Native app that demonstrates the usage of the react-native-push-notification library and the react-native-fcm library.

It includes an example Firebase application setup that works out of the box. In order to use your own Firebase application, replace the google-services.json in the app/android directory, respectively the GoogleService-Info.plistin the app/iosdirectory with your own (downloadable in the Firebase Console).

Requirements

Setup

  • Optional: Install yarn (npm install yarn -g)
  • Run npm install or yarn

Run demo application

Start server

  • Run docker-compose up
  • Alternatively:
    • Start MongoDB mongod --dbpath=<yourDbPath>
    • Start server npm run server

Run app

  • Start React Native app packager npm run app-pkg
  • Connect a device or start a simulator
  • Run Android app npm run android
  • Run iOS app npm run ios

What's happening?

After application startup you should see a screen which displays your device token and the information that no notification has been received yet.

The device token should have been sent to the node.js server and stored in the MongoDB.

In order to send a sample push notification to all known device tokens execute curl http://localhost:3000/push or open http://localhost:3000/push in your local browser.

The application should now display Last notification title: Crossplatform push is working.

Configuration options

Server

If you choose to run the backend locally without Docker, you can configure two parameters via environment variables:

  • DB_HOST: MongoDB host string
  • SERVER_PORT: HTTP port of the server application

App

The app uses the react-native-config library to configure its environment.

You can edit the app/.env file in order to configure the following:

Known issues

  • Usage of react-native-push-notification for iOS currently not functional. Help appreciated.