React-native-fcm: Notification without popups in background

[mts88]

Hello, i have a problem with notification when app is in background or killed.
I can receive notification from firebase but i can see only the icon on icon try, the popup never appears when app is in background or not running.
Can some one help me?

componentWillMount(){
        // If user isn't logged in goto LoginScreen 
        if( this.props.Auth.token === null ) {
            this.props.navigation.navigate('AuthScreen');
        } 

        FCM.requestPermissions()
            .then((garanted) => {
                if(garanted) {
                    this._setToken();
                }
            })
            .catch(()=>console.error('notification permission rejected'));

        this._notificationListener = FCM.on(FCMEvent.Notification, async (notif) => {
            // optional, do some component related stuff
            console.log('ON Notification', notif);
            // there are two parts of notif. notif.notification contains the notification payload, notif.data contains data payload
            if(notif.local_notification){
                //this is a local notification
                console.log('local notification');
            }
            if(notif.opened_from_tray){
                console.log('opened_from_tray');
                //iOS: app is open/resumed because user clicked banner
                //Android: app is open/resumed because user clicked banner or tapped app icon
            }
            // await someAsyncCall();

            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 https://developer.apple.com/documentation/uikit/uiapplicationdelegate/1623013-application.
                //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;
                }
            }
            if(notif.data) {
                //console.log( JSON.parse(notif.data));
                //this._sendRemote(notif);
            }
        });

        FCM.getInitialNotification().then(notif => {
            console.log('initials: ', notif);
            //do something with notification
        });
    }

    componentDidUpdate() {}

    componentWillUnmount = () => {
        this._notificationListener.remove();
    }

    _setToken = () => {
        FCM.getFCMToken().then(token => {
            this.props.setFCMToken(token);
        }); 
    }

    _sendRemote = notif => {
        FCM.presentLocalNotification({
            title: notif.fcm.title,                     // as FCM payload
            body: notif.fcm.body,                    // as FCM payload (required)
            sound: "default",                                   // as FCM payload
            priority: "high",                                   // as FCM payload
            click_action: "ACTION",                             // as FCM payload
            auto_cancel: true,                                  // Android only (default true)
            vibrate: 300,                                       // Android only default: 300, no vibration if you pass 0
            wake_screen: true,                                  // Android only, wake up screen when notification arrives
            lights: true,                                       // Android only, LED blinking (default false)
            show_in_foreground: true                                  // notification when app is in foreground (local & remote)        
        });
    }

Env:
RN 0.48.4
react-native-fcm: 11.2.0
Im using a Samsung Galaxy S7 and app is in background;

[mts88]

Was payload structure. The right way is in readme, using "custom_notification".

[Donhv]

@CicciMTS can you give me code example to show popup when app on background?

[mts88]

@Donhv i tested only on android. So, i send a structure like this:

{
    "to" : <TOKEN_DEVICE>,
    "content_available": true,
    "data": {
        "custom_notification": {
           "title": "hello",
           "body": "yo",
           "click_action": "fcm.ACTION.PUSH",
           "priority":"high",
           "show_in_foreground": true
        }
    }
}

to Firebase REST API (see this for documentation)
Hope help u.

[qDanik]

Ok guys, how switch off notification-reciever if app not active. Because i write on java my listener for background notifications and when my listener executed and showed my notification i've as a result two notifications one my and one default

[imjaadH]

@qDanik would you share the listener code