Push Notifications in React Native with Google FCM

getAlarmManager().setRepeating(AlarmManager.RTC_WAKEUP, fireDate, interval, pendingIntent);

<div>
  <pre>// Can't use setRepeating for recurring notifications because setRepeating

 The easy part

<manifest ...>

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

    <application
      ...
      android:launchMode="singleTop">

      <service android:name="io.invertase.firebase.messaging.MessagingService" android:enabled="true" android:exported="true">
        <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
      </service>
      <service android:name="io.invertase.firebase.messaging.InstanceIdService" android:exported="false">
        <intent-filter>
          <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
        </intent-filter>
      </service>

      <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
      <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
        <intent-filter>
          <action android:name="android.intent.action.BOOT_COMPLETED" />
        </intent-filter>
      </receiver>
    </application>
</manifest>

The messy part

export function * addLocalNotification (data: PushDataTypes) : Iterable<mixed> {
  yield call(addLocalNotificationAction, data});
}

export function * removeLocalNotification ({ date }: PushDataTypes): Iterable<any> {
  yield call(removeLocalNotificationAction, date);
}

export function createNotificationChannel (): any {
  return eventChannel(emitter => {
    const handler = type => data => {
      emitter([type, data])
    }

    const unsubscribers = configurePushService(handler);

    return function closeNotificationChannel () {
      for(let unsubscriber of unsubscribers) {
        unsubscriber();
      }
    }
  })
}

export function * setupNotifications (channel) {
  try {
    while (true) {
      const [type, data] = yield take(channel);
      yield call(handleNotification, type, data)
      if (data.finish) {
        yield call(data.finish)
      }
    }
  } catch (err) {
    yield call([Sentry, Sentry.captureException], err);
  } finally {
    if (yield cancelled()) {
      yield call([channel, channel.close]);
    }
  }
}

export function * Setup () {
  yield call(setupFCM)

  const notificationChannel = yield call(createNotificationChannel);
  yield all([
    call(setupNotifications, notificationChannel),
    takeEvery(NotificationTypes.ADD_NOTIFICATION, addLocalNotification),
    takeEvery(NotificationTypes.DROP_NOTIFICATION, removeLocalNotification)
    takeEvery(NotificationTypes.JOIN_CHANNEL, ...)
    takeEvery(NotificationTypes.LEAVE_CHANNEL, ...)
  ]);
}

export function * setupFCM () {
  const initialNotification = yield call([firebase.messaging(), firebase.messaging().getInitialNotification]);
  yield call(handleNotification, 'initial', initialNotification)
  const token = yield call([firebase.messaging(), firebase.messaging().getToken]);
  // do something with the device token if you want here
}

1. I check for any initial notifications
2. and make it handle by handleNotification
3. I get the device FCM token
4. (I store it normally on  my server so I can send messages to single devices)

In Setup I do some more steps.

1. I create a channel to receive notifications
2. I set up firebase notifications
3. I register some Redux event listeners to handle setting up and removing local notifications or subscribing, unsubscribing from channels

The notification-related code for the above is the following:

Finishing it up

So, what are those methods called from the sagas?! Finally, here they come.

export function configure (eventChannel) {
  let unsubscribers = []
  unsubscribers.push(firebase.messaging().onMessage(eventChannel('message')))
  return unsubscribers;
}

export function handleNotification (notificationType, notificationData) {
  console.log({ name: notificationType, value: notificationData });
}

function _getId (date: number) {
  return parseInt(date / 1000, 10).toString()
}

export function addLocalNotification ({ type, date, bigText = 'Big Text', title = 'Title', message = 'Message' }: PushDataTypes): Iterable<mixed> {
  PushNotification.localNotificationSchedule({
    /* Android Only Properties */
    id: _getId(date), // (optional) Valid unique 32 bit integer specified as string. default: Autogenerated Unique ID
    // ticker: 'My Notification Ticker', // (optional)
    date: new Date(date),
    bigText, // (optional) default: "message" prop
    title, // (optional, for iOS this is only used in apple watch, the title will be the app name on other iOS devices)
    message, // (required)
    playSound: true, // (optional) default: true
    soundName: 'default', // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
    number: '1', // (optional) Valid 32 bit integer specified as string. default: none (Cannot be zero)
    repeatType: 'day', // (Android only) Repeating interval. Could be one of `week`, `day`, `hour`, `minute, `time`. If specified as time, it should be accompanied by one more parameter 'repeatTime` which should the number of milliseconds between each interval
    // actions: '["Yes", "No"]',  // (Android only) See the doc for notification actions to know more

    autoCancel: true, // (optional) default: true
    largeIcon: 'icon', // (optional) default: "ic_launcher"
    smallIcon: 'icon', // (optional) default: "ic_notification" with fallback for "ic_launcher"
    // subText: '', // (optional) default: none
    color: 'purple', // (optional) default: system default
    vibrate: true, // (optional) default: true
    vibration: 300, // vibration length in milliseconds, ignored if vibrate=false, default: 1000
    tag: 'some_tag', // (optional) add tag to message
    group: 'appapp', // (optional) add group to message
    ongoing: false // (optional) set whether this is an "ongoing" notification
  })
}

export function removeLocalNotification (date: number): Iterable<any> {
  PushNotification.cancelLocalNotifications({ id: _getId(date) })
}

The configure method manages all the message subscribers. Actually, we’ve only one, react-native-firebase. Thankfully, its onMessage method returns an unsubscribe function.

When a new message arrives, the handler passed into configure will be called. This handler was created from Setup, and it loops endlessly in setupNotifications. Once a notification arrives, it yields, and handleNotification is called that currently just writes to the console.

Why do we need all these criss-crossing-function-passing-mess? First, we might get rid of some of it, like to message type argument, and it would make the code a bit simpler. But I’ve left it there as it allows me to add new message handlers easily if I would ever need. (And it came really handly when I tried to set everything up properly.). Second, and more importantly, because I want to handle the closing of the channel properly. As I’ve already mentioned, react-native-firebase‘s onMessage method returns an unsubscribe funtion. This function gets called if we ever react the exception handling part of setupNotifications.

What messages might come in?

What messages shall we expect to arrive in the end? Obviously, having different handlers for local and remote messages won’t make our life very easy.  We have 2×3 possible scenarios.

A message can be

• local
• remote

When the push notification is tapped on the app might be

• in the foreground
• in the background, but running
• not running

All these cases will show up differently in our handleNotification method. When the app was not running, then the type will be initial, otherwise it will be message. When the message is local, then notificationData contains

{
  fcm: {
    action: null
  },
  notification: { ... }
}

When the message is remote, then there is no notification key, moreover _fcm _has many other keys. A typical remote message might be the following:

{
  "key1": "value1",
  "fcm": {
    "action": null,
    "tag": null,
    "icon": null,
    "color": null,
    "body": "előtér",
    "title": "címem"
  },
  "finish": " finish() "
}

I found it weird, but the key-value pairs come outside of the fcm part.

Possible Caveats

Until now I did not manage to get remote notifications show up as push-notification when the app was running, but in the background. There is quite some discussion about this topic on stackoverflow though, and to me it seemed that the answer can be constructed from the top 3 replies.