search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.45k stars 2.13k forks source link

PushNotifications are not showing up on android devices #11396

Closed aalindQuantel closed 1 year ago

aalindQuantel commented 1 year ago

Before opening, please confirm:

JavaScript Framework

React Native

Amplify APIs

Push Notifications

Amplify Categories

notifications, interactions

Environment information

``` System: OS: macOS 12.0.1 CPU: (8) x64 Apple M1 Memory: 19.06 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.15.4 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.8 - /opt/homebrew/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 113.0.5672.126 Edge: 113.0.1774.35 Safari: 15.1 npmPackages: @aws-amplify/rtn-push-notification: ^1.1.1 => 1.1.1 @babel/core: ^7.12.9 => 7.21.8 @babel/runtime: ^7.12.5 => 7.21.5 @codler/react-native-keyboard-aware-scroll-view: ^2.0.1 => 2.0.1 (1.0.1) @highcharts/highcharts-react-native: ^2.2.1 => 2.2.3 @react-native-async-storage/async-storage: ^1.17.3 => 1.18.1 @react-native-community/blur: ^4.2.0 => 4.3.2 @react-native-community/clipboard: ^1.5.1 => 1.5.1 @react-native-community/eslint-config: ^2.0.0 => 2.0.0 @react-native-community/netinfo: ^8.2.0 => 8.3.1 @react-native-community/picker: ^1.8.1 => 1.8.1 @react-native-community/push-notification-ios: ^1.10.1 => 1.11.0 @react-native-cookies/cookies: ^6.2.1 => 6.2.1 @react-navigation/bottom-tabs: ^6.3.1 => 6.5.7 @react-navigation/material-top-tabs: ^6.2.1 => 6.6.2 @react-navigation/native: ^6.0.10 => 6.1.6 @react-navigation/native-stack: ^6.6.2 => 6.9.12 @react-navigation/stack: ^6.2.1 => 6.3.16 @redux-devtools/extension: ^3.2.2 => 3.2.5 @rematch/core: ^2.2.0 => 2.2.0 @rematch/persist: ^2.1.2 => 2.1.2 @rematch/select: ^3.1.2 => 3.1.2 @twotalltotems/react-native-otp-input: ^1.3.11 => 1.3.11 @wwdrew/react-native-numeric-textinput: ^1.1.0 => 1.1.0 HelloWorld: 0.0.1 accounting: ^0.4.1 => 0.4.1 amazon-cognito-identity-js: ^5.2.8 => 5.2.14 (6.2.0) aws-amplify: ^5.2.1 => 5.2.1 babel-jest: ^26.6.3 => 26.6.3 chart.js: ^3.7.1 => 3.9.1 chart.js-auto: undefined () chart.js-helpers: undefined () code-push: ^4.0.5 => 4.1.2 eslint: ^7.32.0 => 7.32.0 example: 0.0.1 formik: ^2.2.9 => 2.2.9 galio-framework: ^0.8.0 => 0.8.0 hermes-inspector-msggen: 1.0.0 jest: ^26.6.3 => 26.6.3 jwt-encode: ^1.0.1 => 1.0.1 lodash: ^4.17.21 => 4.17.21 (4.17.4, 3.10.1) lottie-ios: ^3.2.3 => 3.5.0 lottie-react-native: ^5.0.1 => 5.1.6 metro-react-native-babel-preset: ^0.67.0 => 0.67.0 moment: ^2.29.3 => 2.29.4 native-base: ^2.15.2 => 2.15.2 parse-google-address: ^1.0.4 => 1.0.4 pubnub: ^5.0.1 => 5.0.1 pubnub-react: ^2.1.1 => 2.1.1 react: 17.0.2 => 17.0.2 (0.14.10) react-devtools-core: ^4.24.4 => 4.27.7 react-native: ^0.68.5 => 0.68.7 react-native-auto-scrolling: ^3.0.2 => 3.0.2 react-native-autoheight-webview: ^1.6.1 => 1.6.5 react-native-biometrics: ^2.1.4 => 2.2.2 react-native-chonse-select: ^1.0.5 => 1.0.5 react-native-code-push: ^7.0.4 => 7.1.0 react-native-confirmation-code-field: ^7.3.0 => 7.3.1 react-native-country-code-list: ^1.1.2 => 1.1.2 react-native-date-picker: ^4.2.5 => 4.2.13 react-native-device-info: ^8.7.1 => 8.7.1 react-native-dialog: ^9.2.1 => 9.3.0 react-native-dynamic-search-bar: ^2.0.2 => 2.0.2 react-native-easy-toast: ^2.0.0 => 2.3.0 react-native-elements: ^3.4.2 => 3.4.3 react-native-fingerprint-scanner: ^6.0.0 => 6.0.0 react-native-flash-message: ^0.2.1 => 0.2.1 react-native-gesture-handler: ^2.9.0 => 2.10.1 react-native-get-random-values: ^1.9.0 => 1.9.0 react-native-hide-show-password-input: ^1.2.0 => 1.2.0 react-native-inappbrowser-reborn: ^3.6.3 => 3.7.0 react-native-keychain: ^8.1.1 => 8.1.1 react-native-linear-gradient: ^2.5.6 => 2.6.2 react-native-mask-input: ^1.2.2 => 1.2.3 react-native-masked-text: ^1.13.0 => 1.13.0 react-native-modal: ^13.0.1 => 13.0.1 react-native-otp-textinput: 0.0.8 => 0.0.8 react-native-pager-view: ^5.4.15 => 5.4.25 react-native-paper: ^4.12.0 => 4.12.5 react-native-parallax-scroll-view: ^0.21.3 => 0.21.3 react-native-permissions: ^3.8.0 => 3.8.0 react-native-phone-input: ^1.3.3 => 1.3.6 react-native-phone-number-input: ^2.1.0 => 2.1.0 react-native-picker-select: ^8.0.4 => 8.0.4 react-native-pixel-perfect: ^1.0.2 => 1.0.2 react-native-plaid-link-sdk: ^10.3.0 => 10.3.0 react-native-push-notification: ^8.1.1 => 8.1.1 react-native-radio-buttons-group: ^2.2.10 => 2.3.2 react-native-reanimated: ^2.9.1 => 2.17.0 react-native-redash: ^16.2.3 => 16.3.0 (12.6.1) react-native-remote-svg: ^2.0.7 => 2.0.11 react-native-render-html: ^6.3.4 => 6.3.4 react-native-safe-area-context: ^4.2.4 => 4.5.3 react-native-screens: ^3.14.0 => 3.20.0 react-native-scrollable-tab-view: ^1.0.0 => 1.0.0 react-native-searchable-dropdown: ^1.1.3 => 1.1.3 react-native-select-two: ^1.1.0 => 1.1.0 react-native-shimmer: ^0.6.0 => 0.6.0 react-native-simple-toast: ^1.1.3 => 1.1.4 react-native-slider: ^0.11.0 => 0.11.0 react-native-speedometer: ^1.0.5 => 1.0.5 react-native-speedometer-chart: ^0.7.5 => 0.7.5 react-native-spinkit: ^1.5.1 => 1.5.1 react-native-splash-screen: ^3.3.0 => 3.3.0 react-native-step-indicator: ^1.0.3 => 1.0.3 react-native-svg: ^12.3.0 => 12.5.1 react-native-svg-charts: ^5.4.0 => 5.4.0 react-native-swiper: ^1.6.0 => 1.6.0 react-native-tab-view: ^3.1.1 => 3.5.1 react-native-table-component: ^1.2.2 => 1.2.2 react-native-ticker: ^5.0.1 => 5.1.0 react-native-touch-id: ^4.4.1 => 4.4.1 react-native-ui-lib: ^6.13.3 => 6.31.0 react-native-url-polyfill: ^1.3.0 => 1.3.0 react-native-vector-icons: ^9.1.0 => 9.2.0 (7.1.0) react-native-webview: ^12.0.2 => 12.0.2 react-redux: ^8.0.1 => 8.0.5 react-sortable-table: ^1.4.0 => 1.4.0 react-sortable-table-example: 1.0.0 react-test-renderer: 17.0.2 => 17.0.2 reanimated-bottom-sheet: ^1.0.0-alpha.22 => 1.0.0-alpha.22 redux: ^4.2.0 => 4.2.1 redux-persist: ^6.0.0 => 6.0.0 redux-persist/integration/react: undefined () rn-wave-bottom-bar: ^2.1.3 => 2.2.36 socket.io-client: ^4.4.1 => 4.6.1 (4.4.0) src: undefined () uilib-native: 3.0.9 use-deep-compare-effect: ^1.8.1 => 1.8.1 yup: ^0.32.11 => 0.32.11 npmGlobalPackages: expo-cli: 6.1.0 npm: 6.14.8 react-devtools: 4.26.0 ```

Describe the bug

I am using aws-amplify version 5.0.14 and @aws-amplify/rtn-push-notification version 1.1.1 , everything is set up and i am able to see notification data of Notifications.Push.onNotificationReceivedInForeground on console also the permissions are enabled too, but no pop up is coming up

Expected behavior

When Notifications.Push.onNotificationReceivedInForeground is triggered i should get a pop up of the notification also be displayed.

Reproduction steps

AndroidManifest.txt MainApplication.txt MainActivity.txt

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

Emulator

Mobile Operating System

Android 13 (sdk 33)

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

cwomack commented 1 year ago

Hello, @aalindQuantel 👋. When you say "no pop up is coming up", do you mean that the notifications center (usually in upper left) has nothing showing up in it (e.g. nothing when you swipe down/expand it the notification drawer)? The default settings for channel importance will send push notifications to the notification center without showing a heads up notification (pop up), and will not display when triggered in foreground.

So if I'm understanding your description about Notifications.Push.onNotificationReceivedInForeground() not triggering a pop up notification, that sounds like expected behavior. Can you confirm if the docs and descriptions above align with what you're seeing?

aalindQuantel commented 1 year ago

@cwomack yes the banner part is missing , notifications are coming up alert tone is there but banner is not showing how can i config that

cwomack commented 1 year ago

@aalindQuantel, if your app is active in foreground then the banner is not going to be displayed.

While your app is active in the foreground, all message types are handled through code and not by the notification center. On Android, you can intercept that and then create a notification to force something to display... but we currently don't support anything like that.

Since you can't create a notification directly from React Native, if you're wanting that behavior of displaying notifications (even while app is in foreground), you could potentially go into native Android code and add in that functionality.

cwomack commented 1 year ago

@aalindQuantel I wanted to follow up and verify if you were referring to only foreground or were you talking about Push Notifications not showing up as described above at all (foreground, background, etc.)?

aalindQuantel commented 1 year ago

@cwomack, I wanted to let you know that everything is functioning properly now. I understand that notifications are not displayed visibly while the app is active. However, I have one remaining issue: when the app is in the background or terminated state, the banner does not appear by default. I have to manually go to the settings to enable it. Is there a way to accomplish this through code during the configuration process?

cshfang commented 1 year ago

Hi @aalindQuantel

Is there a way to accomplish this through code during the configuration process?

At this time this is not yet configurable. This is configured via channel management on Android and, as of this time, not something Amplify can support. It is something we are aware of and are evaluating for our roadmap, however, and I welcome you to open a feature request around this.

cwomack commented 1 year ago

@aalindQuantel, I'll close this issue for now due to the confirmations above that the behavior you're describing is expected. We'd welcome you to open up a feature request (link here) detailing the improvements you'd like to see for Push Notifications.

If you do, please drop a link to the feature request in another comment here or just reference this issue in the feature request. Thank you!

seokjeatuiti commented 1 year ago

@cwomack, I wanted to let you know that everything is functioning properly now. I understand that notifications are not displayed visibly while the app is active. However, I have one remaining issue: when the app is in the background or terminated state, the banner does not appear by default. I have to manually go to the settings to enable it. Is there a way to accomplish this through code during the configuration process?

I am the same. Also, the banner is not showing on devices or emulators below Android 13. I also tested it on a clean react native project, but it's the same. Below 13, there is no option in system settings to set whether the banner should appear or not.

My env:

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 57.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.1.0 - /opt/homebrew/bin/npm
    Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 117.0.5938.149
    Safari: 16.5.2
  npmPackages:
    @aws-amplify/rtn-push-notification: ^1.1.7 => 1.1.7 
    @babel/core: ^7.20.0 => 7.22.17 
    @babel/preset-env: ^7.20.0 => 7.22.15 
    @babel/runtime: ^7.20.0 => 7.22.15 
    @react-native-async-storage/async-storage: ^1.19.3 => 1.19.3 
    @react-native-community/netinfo: ^9.4.1 => 9.4.1 
    @react-native/eslint-config: ^0.72.2 => 0.72.2 
    @react-native/metro-config: ^0.72.11 => 0.72.11 
    @tsconfig/react-native: ^3.0.0 => 3.0.2 
    @types/react: ^18.0.24 => 18.2.21 
    @types/react-test-renderer: ^18.0.0 => 18.0.1 
    HelloWorld:  0.0.1 
    amazon-cognito-identity-js: ^6.3.6 => 6.3.6 
    amazon-cognito-identity-js/internals:  undefined ()
    aws-amplify: ^5.3.11 => 5.3.11 
    babel-jest: ^29.2.1 => 29.7.0 
    eslint: ^8.19.0 => 8.49.0 
    jest: ^29.2.1 => 29.7.0 
    metro-config: ^0.79.1 => 0.79.1 (0.76.7, 0.76.8)
    metro-react-native-babel-preset: 0.76.8 => 0.76.8 (0.76.7)
    prettier: ^2.4.1 => 2.8.8 
    react: 18.2.0 => 18.2.0 
    react-native: 0.72.4 => 0.72.4 
    react-native-get-random-values: ^1.9.0 => 1.9.0 
    react-native-url-polyfill: ^2.0.0 => 2.0.0 (1.3.0)
    react-test-renderer: 18.2.0 => 18.2.0 
    typescript: 4.8.4 => 4.8.4 
  npmGlobalPackages:
    @aws-amplify/cli: 12.6.0
    eslint: 8.27.0
    n: 9.1.0
    node-gyp: 9.1.0
    npm: 10.1.0
    yarn: 1.22.19
stevenmathers commented 9 months ago

This is pretty basic requirement, isnt it?

What is the ETA?