Initial Setup (react-native-firebase)

For simple notifications functionality, we suggest using FCM (Firebase Cloud Messaging)

First, you'd need create a new project on Firebase

Then, you'd need to install the react-native-firabase library:

iOS (react-native-firebase)

Android (react-native-firebase)

Messaging Setup (Firebase/Messaging)

Now that you have an app on Firebase, and react-native-firebase is connected, you'd need to also link Firebase/Messaging library, as by default react-native-firebase comes only with the Core module.

iOS (Firebase/Messaging)

Follow the iOS installation guide for Messaging

! Notifications do not work on iPhone simulators, so don't worry if you don't get any. You'd need to use a physical device.

Android (Firebase/Messaging)

Follow the Android installation guide for Messaging

Usage

First you need to check whether the user has permissions to get notifications:

import { messaging, notifications } from 'react-native-firebase';

const enabled = await messaging().hasPermission();

if (!enabled) {
  let permission;

  try {
    permission = await firebase.messaging().requestPermission();
  } catch (error) {
    alert(
      "There's a problem with your notifications. Please, talk to VLADIMIR"
    );
  }
}

For Android's notifications to work, you have to create a 'channel' for notifications. You can call this method as many times as you want.

const channel = new notifications.Android.Channel(
  'example-channel',
  'Some channel',
  notifications.Android.Importance.Max
).setDescription("Some channel");

firebase.notifications().android.createChannel(channel);

Now set listeners for notifications. One for when the notifications is received WHILE the app is running:

firebase.notifications().onNotification(({ _data }) => {
  if (_data.something) {
    // Do something
  }
});

And one for when the app is opened from clicking on the notifications:

firebase.notifications().onNotificationOpened(({ notification }) => {
  if (get(['_data', 'route'], notification)) {
    NavigationService.navigate(get(['_data', 'route'], notification));
  }
});

Topics

Users can subscribe to specific 'topics', and get notifications to topics they're subscribed to.

import { messaging } from 'react-native-firebase';

messaging().subscribeToTopic('someTopic');

Now, when a notifications is sent, it can be sent only to users who are subscribed to 'someTopic', and only they will get the notification.

Sending notifications from client to client

You can send messages from within your Firebase app's console, or via API calls.

Read more about sending messages here

This is an example of an API call, thats send a notification to users how are subscribed to a specific topic

export const broadcastNotification = (topic, message) =>
  apiAction({
    type: AT.BROADCAST_NOTIFICATION,
    payload: {
      baseUrl: 'https://fcm.googleapis.com/',
      path: 'fcm/send',
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'key=${API_KEY}'
      },
      method: 'POST',
      data: {
        to: `/topics/${topic}`,
        data: {
          key: 'value'
        },
        android: {
          ttl: 0
        },
        apns: {
          headers: {
            'apns-priority': 10
          }
        },
        notification: {
          title: 'A NOTIFICATIONS!',
          body: message
        }
      }
    }
  });

to tells to whom we're sending a notification. Could be a group, a specific device, or specific topic
data is the data object users get in notification
android is android-specific config
apns is iOS specific config
notification describes the title and the body of the notification