receiving-messages.md

Receiving Firebase Cloud Messages

1) Check permissions

Before you are able to send and receive Cloud Messages, you need to ensure that the user has granted the correct permissions:

const enabled = await firebase.messaging().hasPermission();
if (enabled) {
    // user has permissions
} else {
    // user doesn't have permission
}

or:

firebase.messaging().hasPermission()
  .then(enabled => {
    if (enabled) {
      // user has permissions
    } else {
      // user doesn't have permission
    } 
  });

2) Request permissions

If the user has not already granted permissions, then you can prompt them to do so, as follows:

try {
    await firebase.messaging().requestPermission();
    // User has authorised
} catch (error) {
    // User has rejected permissions
}

or:

firebase.messaging().requestPermission()
  .then(() => {
    // User has authorised  
  })
  .catch(error => {
    // User has rejected permissions  
  });

3) Listen for FCM messages

We class Messages as:

• data-only messages from FCM

For notification-only or notification + data messages, please see the [Notifications Module](version /notifications/receiving-notifications).

A message will trigger the onMessage listener when the application receives a message in the foreground.

// Optional: Flow type
import type { RemoteMessage } from 'react-native-firebase';

componentDidMount() {
    this.messageListener = firebase.messaging().onMessage((message: RemoteMessage) => {
        // Process your message as required
    });
}

componentWillUnmount() {
    this.messageListener();
}

4) (Optional)(Android-only) Listen for FCM messages in the background

Android allows you to act on data-only messages when your application is closed or running in the background. This is particularly useful if you'd like to be able to show heads-up notifications to your user.

To allow this to work, we make use of React Native's built-in Headless JS functionality.

You will need to specify the FCM message priority as high for this functionality to work. If this isn't set, the app is not given permission to launch the background message handler.

1) Add Service to Android Manifest

Firstly, check that you've followed the optional steps in the [Android Installation guide](version /messaging/android).

2) Handle background messages

Create a new Javascript file (for this example we'll call it bgMessaging.js) which has the following structure:

// @flow
import firebase from 'react-native-firebase';
// Optional flow type
import type { RemoteMessage } from 'react-native-firebase';

export default async (message: RemoteMessage) => {
    // handle your message
    
    return Promise.resolve();
}

This handler method must return a promise and resolve within 60 seconds.

3) Register the background handler

In your main index.js you need to register your background handler before the main component as follows:

import bgMessaging from './src/bgMessaging'; // <-- Import the file you created in (2)

// New task registration
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging); // <-- Add this line
// Current main application
AppRegistry.registerComponent('ReactNativeFirebaseDemo', () => bootstrap);

The headless task must be registered as RNFirebaseBackgroundMessage.

4) Check MainApplication.java

In your MainApplication.java you need to check that SoLoader is initialised in the onCreate method. This was added in a recent version of React Native and may have been missed during an upgrade.

@Override
public void onCreate() { // <-- Check this block exists
  super.onCreate();
  SoLoader.init(this, /* native exopackage */ false); // <-- Check this line exists within the block
}