React-native-push-notification: onMessage not firing when application is closed state and clicking notification

[batuhansahan]

Problem

When getting notification in background state working, in app working but when app is closed user open app with notification is not working

• [x] In App

• [x] Background State? <-- I am handlind this via AppState.

  const _handleAppStateChange = async (nextAppState) => {
    if (nextAppState === 'active') {
      PushNotification.popInitialNotification((ev) => {
        setTimeout(() => {
            if (ev) {
              notifyHandler(ev);
            }
        }, 1000);
      });
    }
    setAppState(nextAppState);
  };

• [ ] Close/Killed State <-- not getting console.log either, In Release mode is not working but debug mode sometimes works i don't know why

Environment info

Windows 10

Library version: master branch

Steps To Reproduce

note: Notification has data and title+body too sending from backend

I am using the way library implement in Example folder same code no change

NotifyService is in react-native-push-notification/example/NotifService.js and i have NotificationHandler.js too

App.js

import NotifyService from './utils/services/notifyservice';

const notifyHandler = (data) => {
   console.log("NOTIFICATION",data);
}

function App(){
  useEffect(()=>{
        new NotifyService(saveToken, notifyHandler);
  },[])

  return(
   <Navigation stuff> // react-navigation v5
  )
}

Describe what you expected to happen:

1.Work expected in closed state
2.Also if i am not using appstate function background notification wont work

AndroidManifest file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.awesomeapp">

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

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus"/>

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    <uses-permission android:name="android.permission.WAKE_LOCK" />

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

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:usesCleartextTraffic="true"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="true"
      android:theme="@style/AppTheme">
      <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
              android:value="AwesomeApp"/>
      <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
                  android:value="desc"/>

      <!-- Change the value to true to enable pop-up for in foreground (remote-only, for local use ignoreInForeground) -->
      <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
                  android:value="false"/>
      <!-- Change the resource name to your App's accent color - or any other color you want -->
      <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                  android:resource="@color/red"/> <!-- or @android:color/{name} to use a standard color -->

      <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>
      <service
          android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
          android:exported="false" >
          <intent-filter>
              <action android:name="com.google.firebase.MESSAGING_EVENT" />
          </intent-filter>
      </service>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

android/build.gradle

    dependencies {
        classpath 'com.android.tools.build:gradle:3.4.2'
        classpath 'com.google.gms:google-services:4.3.3'
    }

android/app/build.gradle

dependencies {

    implementation 'com.google.firebase:firebase-analytics:17.3.0'`
}

// .. bottom
apply plugin: 'com.google.gms.google-services'

@Dallas62

[Dallas62]

Hi @batuhansahan
Can you show me the content of:
NotificationHandler.js ?

To work in killed state, .configue must be called outside of a component.
Since you introduced notifyHandler in the lifecycle of the App component, notifyHandler will not be called in killed state.

[batuhansahan]

Thank you for your answer and hardwork,

i wrap my App.js with new class component and called notifyService in CONSTRUCTOR(like in library/example folder) and now close/exit app is working but background is %50 time is not
working.

• [x] In App / Exit App
• [ ] Background %50 time is not working

New app.js

```jsx
export default class App extends React.Component {
constructor(props) {
super(props);
this.ref;
this.notif = new NotifService(
this.saveToken.bind(this),
this.handleNotify.bind(this)
);
}

saveToken(token) {
console.log('SAVE TOKEN', token.token);
}

handleNotify(data) {
Alert.alert('NOTIFY', JSON.stringify(data));
}

render() {
return ;
}
}

function App2() {
return()
}

```

NotifService is same as example folder, not changed anything

[Dallas62]

@batuhansahan
I think App component is not be instanciate so handleNotify isn't called.
Can you be more precise on what is working or not ?

• Does onNotification work when the app is in foreground without user interaction ?
• Does onNotification work when the app is in background without user interaction ?

• Does onNotification work when the app is killed without user interaction ?

• Does onNotification work when the app is in foreground after user interaction ?

• Does onNotification work when the app is in background after user interaction ?
• Does onNotification work when the app is killed after user interaction ?

In these cases,
https://github.com/zo0r/react-native-push-notification/blob/master/example/NotificationHandler.js#L5
should be triggered.

In killed state,
https://github.com/zo0r/react-native-push-notification/blob/master/example/NotificationHandler.js#L8
will not be triggered.

[batuhansahan]

• [x] Does onNotification work when the app is in foreground without user interaction ?

• [ ] Does onNotification work when the app is in background without user interaction ?

• [ ] Does onNotification work when the app is killed without user interaction ?

• [x] Does onNotification work when the app is in foreground after user interaction ?
  I don't show notification in app but onNotification shows console.log yes

• [x] Does onNotification work when the app is in background after user interaction ?

• [x] Does onNotification work when the app is killed after user interaction ?

last test is.. this is so strange why first alert is not called. but in if state is called

  onNotification(notification) {
    Alert.alert('notificationhandler', JSON.stringify(notification)); //<- this doesn't work !why
    console.log('notificationhandler', JSON.stringify(notification)); //<- this does work but how alert is not working.

    if (typeof this._onNotification === 'function') {
      Alert.alert('_onNotification', JSON.stringify(notification)); // <- this does work **
      console.log('_onNotification', JSON.stringify(notification)); // //<- this does work **

      this._onNotification(notification);
    }
  }

react native 0.61.5

[Dallas62]

Hi;
Did you check your answers when the console.log is printed ? or when the alert is trigger ?
What I need to know is only for the console.log.
Alert is not representative since the Application maybe not instanciate when called.

[batuhansahan]

@Dallas62

You mention

In killed state,
https://github.com/zo0r/react-native-push-notification/blob/master/example/NotificationHandler.js#L8
will not be triggered.

but it is triggered

[Dallas62]

@Dallas62

You mention

In killed state,
https://github.com/zo0r/react-native-push-notification/blob/master/example/NotificationHandler.js#L8
will not be triggered.

but it is triggered

With, or without user-interaction ?

[batuhansahan]

@Dallas62
You mention
In killed state,
https://github.com/zo0r/react-native-push-notification/blob/master/example/NotificationHandler.js#L8
will not be triggered.
but it is triggered

With, or without user-interaction ?

with user interaction i cannot show alert box either set state so how am i going to show some alert box when user clicks and opens app is there a way

[Dallas62]

You can turn off popInitialNotification in the .configure method, then you will be able to call the method:

PushNotification.popInitialNotification(function(notification) {
console.log(notification);
});

Inside your component to handle properly the notification that popup the Application.

I saw documentation doesn't mention this method, sorry for that.

[batuhansahan]

You can turn off popInitialNotification in the .configure method, then you will be able to call the method:

PushNotification.popInitialNotification(function(notification) {
console.log(notification);
});

Inside your component to handle properly the notification that popup the Application.

I saw documentation doesn't mention this method, sorry for that.

so killed state app with user interaction notification now i can send redux action or set state properly ? am i right

[Dallas62]

If you need to handle user interaction that open the application, you can use the change with popInitialNotification.
If PushNotification.popInitialNotification( is put in a component, you will be able to update state or whatever you want.
I recommend you to put this in the App component, to get the notification in any cases. If you put this in a nested component, this will not be trigger until the component is mounted.

[batuhansahan]

If you need to handle user interaction that open the application, you can use the change with popInitialNotification.
If PushNotification.popInitialNotification( is put in a component, you will be able to update state or whatever you want.
I recommend you to put this in the App component, to get the notification in any cases. If you put this in a nested component, this will not be trigger until the component is mounted.

should i put in constructor or can i put in the appstate listener function ?

[Dallas62]

I think in componentDidMount, or the hook if you prefer, is a good place.

[batuhansahan]

I think in componentDidMount, or the hook if you prefer, is a good place.

You are awesome, thank you for your help.