iOS/Android - React Native onNoficationOpened not triggered

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

[orizens]

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

[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.