React native: on android notifications isn't rendered when app is in foreground

beqramo commented 3 years ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

Push Notifications

Amplify Categories

notifications

Environment information

``` # Put output below this line System: OS: macOS 11.2.1 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 543.86 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.3 - /usr/local/opt/node@14/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.13 - /usr/local/opt/node@14/bin/npm Watchman: 2021.06.07.00 - /usr/local/bin/watchman Browsers: Chrome: 92.0.4515.159 Safari: 14.0.3 npmPackages: @argyleio/argyle-plugin-react-native: ^3.1.12 => 3.2.0 @aws-amplify/pushnotification: ^4.2.3 => 4.2.3 @babel/core: ^7.12.9 => 7.15.0 (7.9.0) @babel/plugin-proposal-decorators: 7.12.1 => 7.12.1 (7.14.5) @babel/plugin-proposal-optional-catch-binding: 7.12.1 => 7.12.1 (7.14.5) @babel/runtime: ^7.12.5 => 7.15.3 @expo/react-native-action-sheet: ^3.9.0 => 3.10.0 @gorhom/bottom-sheet: ^3.6.6 => 3.6.6 @hookform/resolvers: ^2.6.0 => 2.7.1 @react-native-async-storage/async-storage: ^1.15.5 => 1.15.5 @react-native-clipboard/clipboard: ^1.8.4 => 1.8.4 @react-native-community/datetimepicker: ^3.5.2 => 3.5.2 @react-native-community/hooks: ^2.6.0 => 2.6.0 @react-native-community/masked-view: ^0.1.11 => 0.1.11 @react-native-community/netinfo: ^6.0.0 => 6.0.0 @react-native-community/push-notification-ios: ^1.9.0 => 1.9.0 (1.0.3) @react-native-picker/picker: ^1.16.5 => 1.16.5 @react-navigation/bottom-tabs: ^5.11.11 => 5.11.13 @react-navigation/native: 5.9.4 => 5.9.4 @react-navigation/stack: 5.14.5 => 5.14.5 @segment/analytics-react-native: ^1.5.0 => 1.5.0 @segment/analytics-react-native-mixpanel: ^1.5.0 => 1.5.0 @sentry/react-native: ^2.6.2 => 2.6.2 @storybook/addon-storyshots: 6.1.10 => 6.1.10 @storybook/react-native: 5.3.23 => 5.3.23 @storybook/react-native-server: 5.3.23 => 5.3.23 @styled-system/theme-get: ^5.1.2 => 5.1.2 @twotalltotems/react-native-otp-input: ^1.3.11 => 1.3.11 @types/i18n-js: 3.0.3 => 3.0.3 @types/jest: 26.0.19 => 26.0.19 (25.2.3, 27.0.1) @types/ramda: 0.27.32 => 0.27.32 @types/react: 16.14.0 => 16.14.0 (17.0.17, 16.14.13) @types/react-native: 0.63.40 => 0.63.40 (0.64.13) @types/react-native-calendars: ^1.505.3 => 1.1264.2 @types/react-native-push-notification: ^7.3.1 => 7.3.1 @types/react-test-renderer: 16.9.4 => 16.9.4 @types/styled-components: 5.1.6 => 5.1.6 (5.1.12) @types/styled-components-react-native: ^5.1.1 => 5.1.1 @types/styled-system: ^5.1.11 => 5.1.12 @types/styled-system__should-forward-prop: ^5.1.2 => 5.1.2 @typescript-eslint/eslint-plugin: 4.10.0 => 4.10.0 @typescript-eslint/parser: 4.10.0 => 4.10.0 @unimodules/core: 6.0.0 => 6.0.0 HelloWorld: 0.0.1 add: ^2.0.6 => 2.0.6 amazon-cognito-identity-js: ^5.0.6 => 5.0.6 apisauce: 2.0.0 => 2.0.0 (0.14.3) aws-amplify: ^4.2.3 => 4.2.3 aws-amplify-react-native: ^5.0.3 => 5.0.3 babel-jest: 26.6.3 => 26.6.3 (25.5.1) babel-loader: 8.2.2 => 8.2.2 babel-plugin-module-resolver: ^4.1.0 => 4.1.0 babel-plugin-styled-components: ^1.12.1 => 1.13.2 bufferutil: 4.0.2 => 4.0.2 canvas: 2.6.1 => 2.6.1 class-validator: 1.0.0 computed-types: 1.0.0 dayjs: ^1.10.6 => 1.10.6 detox: 17.14.5 => 17.14.5 eslint: 7.15.0 => 7.15.0 eslint-config-prettier: 7.0.0 => 7.0.0 eslint-config-standard: 16.0.2 => 16.0.2 eslint-plugin-import: 2.22.1 => 2.22.1 eslint-plugin-node: 11.1.0 => 11.1.0 eslint-plugin-promise: 4.2.1 => 4.2.1 eslint-plugin-react: 7.21.5 => 7.21.5 eslint-plugin-react-hooks: ^4.2.0 => 4.2.0 eslint-plugin-react-native: 3.10.0 => 3.10.0 expo-localization: 10.1.0 => 10.1.0 fbjs-scripts: 3.0.0 => 3.0.0 google-libphonenumber: ^3.2.22 => 3.2.22 hermes-inspector-msggen: 1.0.0 i18n-js: 3.8.0 => 3.8.0 io-ts: 1.0.0 jest: ^26.6.3 => 26.6.3 (25.5.4) jest-circus: 25.5.4 => 25.5.4 jest-expo: 40.0.1 => 40.0.1 jetifier: 1.6.6 => 1.6.6 (1.6.8) joi: 1.0.0 libphonenumber-js: ^1.9.23 => 1.9.23 libphonenumber-js-core: 1.0.0 libphonenumber-js-max: 1.0.0 libphonenumber-js-min: 1.0.0 libphonenumber-js-mobile: 1.0.0 memo-parser: 0.2.1 mobx: 6.3.2 => 6.3.2 mobx-react-lite: 3.2.0 => 3.2.0 mobx-state-tree: 5.0.2 => 5.0.2 mocha: 8.2.1 => 8.2.1 moti: ^0.11.0 => 0.11.0 nope: 1.0.0 npm-run-all: 4.1.5 => 4.1.5 patch-package: 6.2.2 => 6.2.2 postinstall-prepare: 1.0.1 => 1.0.1 prettier: 2.2.1 => 2.2.1 ramda: 0.27.1 => 0.27.1 (0.25.0, 0.21.0, 0.24.1) react: 17.0.1 => 17.0.1 (16.14.0) react-devtools-core: 4.10.1 => 4.10.1 (4.15.0) react-dom: 16.14.0 => 16.14.0 react-hook-form: 7.9.0 => 7.9.0 (7.12.2) react-native: 0.64.2 => 0.64.2 react-native-appsflyer: ^6.3.20 => 6.3.20 react-native-bootsplash: ^3.2.4 => 3.2.4 react-native-calendars: ^1.1264.0 => 1.1264.0 react-native-clean-project: ^3.6.3 => 3.6.4 react-native-collapsible: ^1.6.0 => 1.6.0 react-native-config: ^1.4.3 => 1.4.3 react-native-device-info: ^8.2.0 => 8.3.0 react-native-dropdownalert: ^4.3.0 => 4.3.0 react-native-fast-image: ^8.3.7 => 8.3.7 react-native-geolocation-service: ^5.3.0-beta.1 => 5.3.0-beta.1 react-native-gerald-widget: https://github.com/Gerald-Technologies-Inc/gerald-link-react-native.git#0.2.11 => 0.2.11 react-native-gerald-widget-example: 0.0.1 react-native-gesture-handler: ^1.10.3 => 1.10.3 react-native-hyperlink: ^0.0.19 => 0.0.19 react-native-intercom: ^21.1.0 => 21.1.0 react-native-iphone-x-helper: ^1.3.1 => 1.3.1 react-native-keyboard-spacer: ^0.4.1 => 0.4.1 react-native-keychain: 6.2.0 => 6.2.0 react-native-maps: 0.28.0 => 0.28.0 react-native-modal-datetime-picker: ^10.2.0 => 10.2.0 (9.2.3) react-native-pager-view: ^5.4.0 => 5.4.0 react-native-permissions: ^3.0.5 => 3.0.5 react-native-picker-select: ^8.0.4 => 8.0.4 react-native-plaid-link-sdk: ^7.0.7 => 7.0.7 react-native-reanimated: ^2.2.0 => 2.2.0 react-native-safe-area-context: ^3.3.0 => 3.3.0 react-native-screens: ^3.5.0 => 3.5.0 react-native-share: ^6.2.1 => 6.5.0 react-native-signature-canvas: ^4.3.0 => 4.3.0 react-native-splash-screen: 3.2.0 => 3.2.0 react-native-tab-view: ^3.0.1 => 3.1.1 react-native-tracking-transparency: ^0.1.1 => 0.1.1 react-native-unimodules: 0.12.0 => 0.12.0 react-native-version: ^4.0.0 => 4.0.0 react-native-web: 0.15.1 => 0.15.1 react-native-webview: ^11.6.4 => 11.13.0 react-powerplug: 1.0.0 => 1.0.0 react-test-renderer: 17.0.1 => 17.0.1 (17.0.2, 16.11.0) reactotron-mst: 3.1.3 => 3.1.3 reactotron-react-native: 5.0.0 => 5.0.0 rimraf: 3.0.2 => 3.0.2 (2.7.1, 2.6.3, 2.4.5, 2.2.8) solidarity: 2.3.1 => 2.3.1 styled-components: ^5.3.0 => 5.3.0 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () styled-system: ^5.1.5 => 5.1.5 superstruct: 1.0.0 swr: ^0.5.6 => 0.5.6 toggle-switch-react-native: ^3.2.0 => 3.2.0 typanion: 1.0.0 typescript: 4.2.3 => 4.2.3 utf-8-validate: 5.0.3 => 5.0.3 validate.js: 0.13.1 => 0.13.1 vest: 1.0.0 yup: ^0.32.9 => 0.32.9 (1.0.0) yup-phone: ^1.2.19 => 1.2.19 zod: 1.0.0 npmGlobalPackages: @aws-amplify/cli: 4.52.0 @mapbox/node-pre-gyp: 1.0.5 expo-cli: 4.0.2 generator-office: 1.7.6 node-gyp: 8.0.0 npm: 7.18.1 react-native-rename: 2.8.0 sql-cli: 0.6.2 yarn: 1.22.10 yo: 3.1.1 ```

Describe the bug

when I get a notification on android it is not rendered when the app is in foreground and also I'm not able to see the app logo in the notification icon.

Expected behavior

I should be able to render notifications when app is in the foreground and also I should be able to render app icon in notification icon if app is in background or killed notifications is rendered.

Reproduction steps

follow docs and do everything according to docs and send notifications and you will not be able to render notification when app is in foreground,

Code Snippet

// Put your code below this line.
import Amplify, { Analytics } from 'aws-amplify';
import PushNotification from '@aws-amplify/pushnotification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';

import awsconfig from 'src/aws-exports';

Amplify.configure({
  ...awsconfig,
});

// 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);
  storage.saveString('notificationToken', token);
});

// get the notification data when notification is received
PushNotification.onNotification((notification) => {
  // Note that the notification object structure is different from Android and IOS
  console.log('in app notification', notification);

  if (Platform.OS === 'ios') {
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  }
});

// get the notification data when notification is opened
PushNotification.onNotificationOpened((notification) => {
  console.log('the notification is opened', notification);
});

Log output

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

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-2",
    "aws_cognito_identity_pool_id": "us-east-2:255a7cf2-0147-4e6d-a3aa-955c7b2f2fb3",
    "aws_cognito_region": "us-east-2",
    "oauth": {},
    "aws_mobile_analytics_app_id": "37cd23ae8c7b4a6fa88e9049fe9f48ee",
    "aws_mobile_analytics_app_region": "us-east-1"
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

android pixel 3

Mobile Operating System

10

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

Samaritan1011001 commented 3 years ago

Hi @beqramo 👋 . Thank you for the clear and detailed issue. I could reproduce it. I'll address it below.

The notification banner does not show up when the app is in foreground -- This is the intended default behavior for how notifications are delivered by FCM on Android devices. Take a look at the workflow section here. In order to show a notification when the app is foreground you'll have to use Amplify's PushNotification.onNotification callback and show the banner using a custom implementation or a supporting package.
The icon not showing up when app is in background -- I could only reproduce this when I did not have the right sized launcher icons in my android res folder so I would recommend checking for the right sizes. This could be helpful in creating the right sizes.

Samaritan1011001 commented 2 years ago

Closing this as foreground notification pop-ups are not supported on Android at the moment. Please feel free to re-open this issue or create a new one if needed. Thank you.

aws-amplify / amplify-js