React-native-push-notification: Notifications received but not showing userInteraction and data when app is in background on Android. IOS works fine

[Ramandsb]

Question

I am able to receive the notifications for both Android and IOS and I am trying to navigate the user to screens according to the type of notification when the user taps on the notification. IOS works fine but on Android when I receive the notification in foreground then onNotification properly gets called and I receive this

{
foreground: true
id: "*******"
message: "[add your message]"
title: "Working Good"
type: "customType"
userInteraction: false
}

which has userInteraction which I use to determine user clicked on notification.

PROBLEM
The issue is when the app is in background onNotification does not get called and when the app is killed onNotification gets called but is receive

{
collapse_key: "com.project"
finish: ƒ finish()
foreground: false
from: "*********"
google.delivered_priority: "high"
google.message_id: "0:10009434*****"
google.original_priority: "high"
google.sent_time: 159544444361
google.ttl: 2234200
type: "customType"
}

which does not have userInteraction property.
Please help.

Push notification version: ^3.1.9
React native version: 0.61.5

[Dallas62]

Hi @Ramandsb
Can you be more precise for the version ? like in the lock file.
Also, can you provide the payload of the notification and the Android manifest ?

[luigbren]

@Ramandsb Hello, I think I understood, you need to redirect the user to a specific screen by clicking on the notification when the application is minimized or closed?, I had that problem but I solved it

[vishwa1937]

@Ramandsb and @luigbren how you both solved the problem of navigating user when notification clicked because i am having problem on that ? Also, I am having problem of clearing notification when user clicks it and navigate to specific screen or app . I have posted this issue here [ #1545]. Thank you.

[luigbren]

hello friend, well i was guided by a code i found on the net and i analyzed the way the notifications were received and i applied this form and it worked

APP IS OPEN: (Visible to the user, not minimized) If the app is open it recives the data in the object data{}, it recives the object userInteraction but in false, when the user touches the notification userInteraction goes to true

APP IS CLOSED: (minimized or closed) when the app is closed, you receive the notification, and touching the notification opens the app and you receive the data without the data object and also without the userInteraction object, I simply validate it with the object infodata.foreground == false, if you receive the notification and open the app through the executable, open it normally without redirection, then when you click on the notification it sends you to the page you indicate

  var PushNotification = require("react-native-push-notification");
    import { NavigationActions } from '@react-navigation/compat';

    constructor(props) {
        super(props);
        this.state = {
        };
        this.handleNotification = this.handleNotification.bind(this);
    }

  componentDidMount = () => {
        var that = this;
        PushNotification.configure({
            onNotification(notification) {
                that.handleNotification(notification);
            },
            permissions: {
                alert: true,
                badge: true,
                sound: true
            },
            popInitialNotification: true,
            requestPermissions: true,
        });
}

    handleNotification(notification) {
        if (notification.data) { //// **APP IS OPEN**
            if (notification.userInteraction == true) {
                this.props.navigation.push('Seccion', { param: notification.data.valueopc }) // if you are on a page and need to send to the same page but with other values you need to send by .push, otherwise without different pages you can send by the option NavigationActions.navigate()
                //this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Seccion', params: { param: notification.data.valueopc } }))     
            }
        } else { ///////**APP IS CLOSED!!!**
            if (notification.foreground == false) {
                this.props.navigation.push('Seccion', { param: notification.valueopc }) 
                //this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Seccion', params: { param: notification..valueopc} }))     }))
            }
        }

[Ramandsb]

Thanks for help guys. Your suggestions helped me solve this.

[vishwa1937]

@luigbren Thank you so much for your answer. I tried as you said and now working well in foreground, background and app closed state. Previously, i used different JSON format of remote message i.e
{ "data": { "title": "Hello John Doe", "message": "How are you? How you doing?" }, "to": "/topics/fcmDemo" }

I changed this format to :
{ "notification": { "title": "Hello John Doe", "body": "How are you? How you doing?" }, "data": { "badge": 35, "payload": { "message": "This is payload message", "url": "This is payload url" } }, "to": "/topics/fcmDemo" }

I am able to get FCM notification form FCM console and remote message using https://fcm.googleapis.com/fcm/send.

Next , I will try to route as you said using payload data.

Thank you again to all of you.