Receiving multiple identical nofitications at once.

Hi @evollu ,

I have a project that I’m using react-native-fcm to receive messages from Firebase Cloud Functions, currently I have the heads up notifications working in foreground background and when the device is locked. Still working on when the app is killed, but that’s another issue.

My current problem is that I seem to be receiving duplicate notifications. I have noticed that sometimes if I switch between foreground and background, back to foreground it adds another duplicate when I receive another notification, I’ve seen it increase up to 10 at once. If I kill the app it resets the notifications back to a single notification.

Although I can’t always reproduce it in this fashion. For instance it was just sending 8 at once, then I killed the app on both the device and emulator and now it is only sending 1 notification and is not increasing in number if I switch between foreground and background. It must be something to do with the way I’ve implemented the PushController component, I’m fairly new to react native and perhaps I’m just doing something wrong.

RN - 0.44 react-native-fcm - ^6.2.3 Emulator - Nexus_5X_API_23 - Android 6.0 Device - Nexus 5 - Android 6.0.1

Here is my usage of the PushController Component inside my Screen that renders a user list:

	renderItem= ({item}) => {
		//const { navigate } = this.props.navigation
		return <TouchableOpacity onPress={() => this.props.navigation.navigate('Chat', {friend: item}) }
			title={item.name}>
			<View style={styles.profileRowsContainer}>
				<View style={styles.imageAndTextContainer}>
					<Image source={{ uri: 'https://www.gravatar.com/avatar/'}} style={styles.profileImage}/>
					<View style={styles.textColumnContainer}>
						<Text style={styles.profileName}>{item.name}</Text>
						<Text style={styles.lastMessage}>{item.lastMessage}</Text>
					</View>
				</View>
				<Text style={styles.timeStamp}>{item.timeStamp}</Text>
			</View>
		</TouchableOpacity>
	}

	render() {
		return (
			<View style={styles.container}>
				<PushController/>
					<FlatList
						data={this.state.data}
						renderItem={this.renderItem}
						extraData={this.state}
						keyExtractor={item => item.uid}
					/>
				<Spinner visible={this.state.loading} />
			</View>
		);
	}

And the PushController.js

import React, { Component } from "react";

import { Platform } from 'react-native';

import FCM, {
            FCMEvent,
            RemoteNotificationResult,
            WillPresentNotificationResult,
            NotificationType
            }
            from "react-native-fcm";

//import firebaseClient from  "./FirebaseClient";
const firebase = require("firebase");

export default class PushController extends Component {
  constructor(props) {
    super(props);

    this.friendsRef = this.getRef().child('friends');
  }

  getRef() {
    return firebase.database().ref();
  }

  componentDidMount() {
    FCM.requestPermissions();
    var user = firebase.auth().currentUser;

    FCM.getFCMToken().then(token => {
      console.log("TOKEN (getFCMToken)", token);
      this.friendsRef.child(user.uid).update({
        token: token
      })
      this.props.onChangeToken(token);
    });

    FCM.getInitialNotification().then(notif => {
      console.log("INITIAL NOTIFICATION", notif)
    });

    this.notificationListner = FCM.on(FCMEvent.Notification, notif => {
      console.log("Notification", notif);
      if(notif.local_notification){
        return;
      }
      if(notif.opened_from_tray){
        return;
      }

      if(Platform.OS ==='ios'){
              //optional
              //iOS requires developers to call completionHandler to end notification process. If you do not call it your background remote notifications could be throttled, to read more about it see the above documentation link.
              //This library handles it for you automatically with default behavior (for remote notification, finish with NoData; for WillPresent, finish depend on "show_in_foreground"). However if you want to return different result, follow the following code to override
              //notif._notificationType is available for iOS platfrom
              switch(notif._notificationType){
                case NotificationType.Remote:
                  notif.finish(RemoteNotificationResult.NewData) //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed
                  break;
                case NotificationType.NotificationResponse:
                  notif.finish();
                  break;
                case NotificationType.WillPresent:
                  notif.finish(WillPresentNotificationResult.All) //other types available: WillPresentNotificationResult.None
                  break;
              }
            }
      this.showLocalNotification(notif);
    });

    this.refreshTokenListener = FCM.on(FCMEvent.RefreshToken, token => {
      console.log("TOKEN (refreshUnsubscribe)", token);
      this.props.onChangeToken(token);
    });
  }

  showLocalNotification(notif) {
    FCM.presentLocalNotification({
      title: notif.title,
      body: notif.body,
      priority: "high",
      click_action: notif.click_action,
      show_in_foreground: true,
      local: true
    });
  }

  componentWillUnmount() {
    this.notificationListner.remove();
    this.refreshTokenListener.remove();
  }


  render() {
    return null;
  }
}

Any help is appreciated! Thanks.

[MichalRemis]

I’ve had similar problem, but it was my mistake. When I put FCM.on(FCMEvent.Notification,... outside of component and componentDidMount, multiple firings weren’t occuring. Finally found the reason - make sure your have correct setup of AndroidManifext.xml etc… (my problem was missing android:launchMode="singleTop") https://github.com/evollu/react-native-fcm#config-for-notification-and-click_action-in-android

[CristinaNicolae]

@nkov How did you figured you have registered multiple listeners? I think I have the same problem.

I have also the same implementation.