amplify-js: 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:
- make sure app in the background
- create a push notification
- wait for notification to show
- 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
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 27 (15 by maintainers)
@amhinson the issue that is still pending for Android: Android still doesn’t trigger onNotificationOpened - emulator nor physical device.
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.
@chintannp Can we test if https://github.com/aws-amplify/amplify-js/pull/9055 has an impact on this?