iOS/Android - React Native onNoficationOpened not triggered

[orizens]

Describe the bug we have configured push notification on our react native apps - and the notifications are coming in. However, "onNoficationOpened" is not triggering the callback, but simply switch the app.

To Reproduce Steps to reproduce the behavior:

1. make sure app in the background
2. create a push notification
3. wait for notification to show
4. tap the notification

Expected behavior notification callback function should log the notification to the console

Code Snippet this code runs once the app has loaded

export function useNotificationsHandler() {
  useEffect(() => {
    try {
      if (Platform.OS === 'ios') {
        PushNotification.requestIOSPermissions();
      }
    } catch {
      error => console.log('useNotifiactionsHandler ERROR: ', error);
    }

    PushNotification.onNotification((notification: IPNotification) => {
      if (notification.foreground) {
        console.log('onNotification foreground', notification);
      } else {
        console.log('onNotification background or closed', notification);
      }
    });

    PushNotification.onNotificationOpened(notification => {
      console.log('onNotificationOpened', notification);
    });

    // get the registration token
    // This will only be triggered when the token is generated or updated.
    PushNotification.onRegister(token => {
      console.log('in app registration', token);
    });
  }, []);
}

What is Configured? we're using the standard configuration. out configuration is:

PushNotification.configure({
  appId: 'ourUniqueAppId',
  region: 'us-east-1',
});

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 86.59 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 85.1.14.84
    Chrome: 86.0.4240.80
    Edge: 86.0.622.48
    Safari: 14.0
  npmPackages:
    @aws-amplify/cli: ^4.29.0 => 4.29.3 
    @aws-amplify/pushnotification: ^3.1.7 => 3.2.5 
    @babel/core: ^7.9.0 => 7.11.6 
    @babel/runtime: 7.9.2 => 7.9.2 
    @lingui/babel-preset-react: ^2.9.1 => 2.9.2 
    @lingui/cli: ^2.9.1 => 2.9.2 
    @lingui/core: ^2.9.1 => 2.9.2 
    @lingui/react: ^2.9.1 => 2.9.2 
    @react-native-community/async-storage: ^1.10.0 => 1.12.0 
    @react-native-community/datetimepicker: 2.2.2 => 2.2.2 
    @react-native-community/eslint-config: 1.1.0 => 1.1.0 
    @react-native-community/hooks: 2.6.0 => 2.6.0 
    @react-native-community/masked-view: 0.1.6 => 0.1.6 
    @react-native-community/netinfo: 5.9.5 => 5.9.5 
    @react-native-community/picker: 1.3.0 => 1.3.0 
    @react-native-community/progress-bar-android: ^1.0.3 => 1.0.3 
    @react-native-community/progress-view: ^1.1.1 => 1.1.1 
    @react-native-community/push-notification-ios: ^1.1.1 => 1.5.0 
    @react-native-community/slider: ^3.0.3 => 3.0.3 
    @react-native-community/toolbar-android: 0.1.0-rc.2 => 0.1.0-rc.2 
    @react-navigation/bottom-tabs: ^5.2.7 => 5.9.1 
    @react-navigation/drawer: ^5.5.0 => 5.9.2 
    @react-navigation/material-bottom-tabs: ^5.1.9 => 5.2.18 
    @react-navigation/native: ^5.1.6 => 5.7.5 
    @react-navigation/stack: ^5.2.11 => 5.9.2 
    @reduxjs/toolkit: 1.4.0 => 1.4.0 
    @tensorflow/tfjs: ^1.7.0 => 1.7.4 
    @types/jest: 25.2.1 => 25.2.1 
    @types/react: 16.9.34 => 16.9.34 
    @types/react-native: 0.62.4 => 0.62.4 
    @types/react-redux: ^7.1.7 => 7.1.9 
    @types/react-test-renderer: 16.9.2 => 16.9.2 
    @typescript-eslint/eslint-plugin: 2.30.0 => 2.30.0 
    amazon-cognito-identity-js: ^4.2.1 => 4.4.0 
    aws-amplify: ^3.0.21 => 3.3.2 
    aws-amplify-react-native: ^4.2.7 => 4.2.7 
    babel-core: ^7.0.0-bridge.0 => 7.0.0-bridge.0 
    babel-jest: 25.4.0 => 25.4.0 
    base64-arraybuffer: 0.2.0 => 0.2.0 
    clean: ^4.0.2 => 4.0.2 
    eslint: 6.8.0 => 6.8.0 
    eslint-config-airbnb-typescript: 7.2.1 => 7.2.1 
    eslint-config-prettier: 6.11.0 => 6.11.0 
    eslint-plugin-import: 2.20.2 => 2.20.2 
    eslint-plugin-jsx-a11y: 6.2.3 => 6.2.3 
    eslint-plugin-react: 7.19.0 => 7.19.0 
    husky: 4.2.5 => 4.2.5 
    jest: 25.4.0 => 25.4.0 
    lint-staged: 10.2.11 => 10.2.11 
    metro-react-native-babel-preset: 0.59.0 => 0.59.0 
    moment: ^2.24.0 => 2.29.0 
    opentok-react-native: 0.14.0 => 0.14.0 
    prettier: 2.0.5 => 2.0.5 
    react: 16.13.1 => 16.13.1 
    react-devtools: 4.6.0 => 4.6.0 
    react-native: 0.63.2 => 0.63.2 
    react-native-detector: ^0.1.2 => 0.1.2 
    react-native-elements: 2.3.2 => 2.3.2 
    react-native-fs: ^2.16.6 => 2.16.6 
    react-native-gesture-handler: ~1.6.0 => 1.6.1 
    react-native-gifted-chat: 0.16.3 => 0.16.3 
    react-native-image-crop-picker: ^0.32.2 => 0.32.3 
    react-native-image-picker: ^2.3.1 => 2.3.4 
    react-native-keychain: ^6.0.0 => 6.2.0 
    react-native-localize: ^1.4.1 => 1.4.1 
    react-native-maps: 0.27.1 => 0.27.1 
    react-native-network-info: ^5.2.1 => 5.2.1 
    react-native-paper: ^4.2.0 => 4.2.0 
    react-native-pdf: ^6.2.1 => 6.2.1 
    react-native-permissions: ^2.1.3 => 2.2.2 
    react-native-picker-select: ^7.0.0 => 7.0.0 
    react-native-raw-bottom-sheet: ^2.2.0 => 2.2.0 
    react-native-reanimated: ~1.7.0 => 1.7.1 
    react-native-safe-area-context: 0.7.3 => 0.7.3 
    react-native-screens: ~2.2.0 => 2.2.0 
    react-native-sound: ^0.11.0 => 0.11.0 
    react-native-splash-screen: ^3.2.0 => 3.2.0 
    react-native-touch-id: ^4.4.1 => 4.4.1 
    react-native-unimodules: 0.9.0 => 0.9.0 
    react-native-vector-icons: ^7.1.0 => 7.1.0 
    react-native-video: ^4.4.5 => 4.4.5 
    react-native-voice: ^0.2.6 => 0.2.6 
    react-native-web: ^0.11.7 => 0.11.7 
    react-redux: ^7.2.0 => 7.2.1 
    react-test-renderer: 16.11.0 => 16.11.0 
    redux: ^4.0.5 => 4.0.5 
    redux-devtools-extension: ^2.13.8 => 2.13.8 
    redux-thunk: ^2.3.0 => 2.3.0 
    rn-fetch-blob: ^0.12.0 => 0.12.0 
    typescript: 3.8.3 => 3.8.3 
  npmGlobalPackages:
    @angular/cli: 9.1.7
    @bubblewrap/cli: 1.4.0
    expo-cli: 3.20.3
    firebase-tools: 8.10.0
    gatsby: 2.22.11
    npm: 6.14.5
    react-devtools: 4.8.2
    source-map-explorer: 2.4.2

Smartphone (please complete the following information):

• Device: Pixel 3 API-30 Emulator, Pixel 2 (android 11) physical device
• OS: iOS11, android 11
• Browser safari, stock browser
• Version latest

[amhinson]

A few questions:

• To clarify, you're seeing the exact same behavior on iOS and Android, right?
• Is the app "killed" in the background, or just in an inactive state?
  • On that topic, could you also verify the behavior for both states?

[orizens]

@amhinson The behavior is the same in both platforms. The app is im inactive state and not killed.

Thanks.

[amhinson]

For iOS, did you setup @react-native-community/push-notification-ios, particularly the Add Capabilities : Background Mode - Remote Notifications & Augment AppDelegate steps?

[orizens]

hi @amhinson thanks for the links. I did followed the setup instructions for iOS and everything is setup as it should. iOS now triggers onNotificationOpened event in our physical device - though not in iOS emulator - any advice on that? Android still doesn't trigger onNotificationOpened. thanks.

[amhinson]

Ah yes, you will only be able to receive push notifications on real devices for both iOS and Android.

[orizens]

@amhinson the issue that is still pending for Android: Android still doesn't trigger onNotificationOpened - emulator nor physical device.

[suryateja77]

Hi, I have landed on the same issue, the onNotificationOpened never gets called on Android (I am using an actual device: Redmi 6A) whereas the onNotification method gets called as expected every time a notification is received when the app is in the background state or the foreground state. Is there any workaround to make the onNotificationOpened work?

Here is my code.

PushNotification.onNotificationOpened((notification: any) => { console.log("the notification is opened", notification); }); // PushNotification.onNotification((notification: any) => { console.log("in app notification", notification); });

const App = () => { return() }

Both the handlers are declared outside the App component.

Here are my library versions. "react-native": "0.63.3", "@aws-amplify/pushnotification": "3.2.7",

Thanks in advance!

[viprocket1]

same issue, PushNotification.onNotification works but PushNotification.onNotificationOpned doesn't.

[suryateja77]

I had Amplify configured in the index.js file, I also needed to configure the PushNotifications which solved the issue for me. It was a blunder from me.

Here are the lines of code that I have added to make it work for me.

index.js import PushNotification from "@aws-amplify/pushnotification"; import awsconfig from "./aws-exports";

PushNotification.configure(awsconfig);

I found this article really helpful.

[calebpollman]

@chintannp Can we test if https://github.com/aws-amplify/amplify-js/pull/9055 has an impact on this?

[LYevhen]

I had Amplify configured in the index.js file, I also needed to configure the PushNotifications which solved the issue for me. It was a blunder from me.

Here are the lines of code that I have added to make it work for me.

index.js import PushNotification from "@aws-amplify/pushnotification"; import awsconfig from "./aws-exports";

PushNotification.configure(awsconfig);

I found this article really helpful. I tried a lot so far, nothing from above helped me. Including #9055

This bug is reproducible on both platforms iOS 15.1, Android 11. on real devices not on emulators I've tried every version starting from "@aws-amplify/pushnotification" v 4.1.0 up to 4.3.7 with lowest steps 0.0.1

followed many advices, configuration is as documented, subscribed on event as early as possible in root js file, not in component. Press on notification opens app but PushNotification.onNotificationOpened never triggers if app was closed by swipe.

"@aws-amplify/pushnotification": "^4.1.0" - "4.3.7" "react-native": "0.63.4",

I have also Branch io and it works just fine, opens the app and do what it suppose to do in subscribe handler.

[Samaritan1011001]

@suryateja77 @orizens can you try the latest pushnotification version (4.3.26) and confirm onNotificaitonOpened works as expected?

@LYevhen I was only able to reproduce onNotificationOpened not being triggered when I did not do this configuration step from the PushNotificationIOS package setup doc.

Can you confirm you have the below code in AppDelegate.m?

// Required for localNotification event
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
         withCompletionHandler:(void (^)(void))completionHandler
{
  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
}

[tannerabread]

@LYevhen were you able to check if you had the config step @Samaritan1011001 mentioned

[LYevhen]

@LYevhen were you able to check if you had the config step @Samaritan1011001 mentioned

[tannerabread]

@LYevhen now that we are getting the android issue solved, are you still experiencing issues with iOS? I haven't had any problems with iOS testing on a real device, however I did initially have some problems with where to put that config in the AppDelegate. From my testing, onNotificationTriggered always seemed to fire

[LYevhen]

@tannerabread Hi, I managed to have this callback working only in case app is running on background, but If app is closed then issue is reproducible.

[tannerabread]

This bug is reproducible on both platforms iOS 15.1, Android 11. on real devices not on emulators I've tried every version starting from "@aws-amplify/pushnotification" v 4.1.0 up to 4.3.7 with lowest steps 0.0.1

@LYevhen just checking but are these details about the app still true? Is it only on iOS 15.1 with older versions of Amplify or do you experience it on the newest version as well? And did that other fix for android solve the problem there or do you still see this with Android?

[LYevhen]

@tannerabread I have installed iOS v16.2, @aws-amplify/pushnotification 5.0.14, aws-amplify: 5.0.14, onNotificationOpened is triggered if app was closed by swipe, or put on background ( switched focus on another app ), so it is not an issue for iOs, but it is not triggered on Android 12 (SM-G975U1 - 12), just switch active app on push notification click Both cases it is real device

[tannerabread]

@LYevhen just to be clear, it works completely on iOS, but doesn't work on android for either background or closed by swipe? It goes to the app but doesn't fire the callback?

I have seen this happen before if there was no control statement to block out the following line on android devices:

// required on iOS only (see fetchCompletionHandler docs: https://github.com/react-native-community/push-notification-ios#finish)
notification.finish(PushNotificationIOS.FetchResult.NoData);

This line is only needed for iOS and might give unexpected behavior if not ignored on android

[LYevhen]

@tannerabread it works completely on iOS android:

1. app is not unloaded from memory, and not stalled because of long time app is unused ( not closed, change active app, home screen etc) - work as expected
2. app is closed by swipe, or stopped by android OS because of long time app is not used ( energy economy ) - in this case it is not working

[tannerabread]

Oh that sounds very similar to what was going on in #8947. I will try the reproduction steps and see if I can make that happen

[tannerabread]

@LYevhen I tried to recreate this, and was able to get the same onNotificationOpened not firing, but I was able to fix it. For me, I made sure all of my dependencies were updated related to this package.

I think my dependency versions may have gotten messed up when I only updated @aws-amplify/pushnotification so the way I went about it was deleting the following from my dependencies:

@aws-amplify/pushnotification
@react-native-async-storage/async-storage
@react-native-community/netinfo
@react-native-community/push-notification-ios
amazon-cognito-identity-js
aws-amplify

and then also deleting my node_modules folder and yarn.lock

I then re-ran my install with yarn add @aws-amplify/pushnotification @react-native-async-storage/async-storage @react-native-community/netinfo @react-native-community/push-notification-ios amazon-cognito-identity-js aws-amplify

That seemed to fix it for me The current dependency versions are as follows after doing this today:

I would be curious if this fixes the issue for you as well

[LYevhen]

@tannerabread well, I did everything from steps described in Your post, but no luck. Tested on real device, from local branch. Tested on real device from apk.

[tannerabread]

Hi @LYevhen we have recently released a rewritten Push Notification category with new features, can you try it out and let me know if it works for you?

You can follow the migration steps here or if you are starting again from scratch follow the getting-started guide here

Also note the API changes here for interacting with notifications

[nadetastic]

11303

[cwomack]

Hello, @LYevhen, @orizens, and anyone else following this issue 👋 .

Can you please update us if the migration steps, getting started guide, and list of API changes that @tannerabread linked above helped resolve the problems described in this issue?

[cwomack]

Closing this issue as we haven't heard back. If anyone experiences further problems tied to this (and has reviewed this comment above), please feel free to leave a comment we'd be happy to re-open the issue or provide further help.

Thank you!