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

Support for Push Notifications on Expo #7699

Open eaddingtonwhite opened 3 years ago

eaddingtonwhite commented 3 years ago

Describe the bug When im trying to use AWS Amplify Notification library in my react native expo app I get the following error on start up consistently Invariant Violation: Native module cannot be null. which causes app to crash. Ive tried updating to latest versions of expo as well as amplify library's and keep getting. Looking at guide here https://docs.amplify.aws/lib/push-notifications/getting-started/q/platform/js#setup-for-ios I see it asking us to do npx pod-install which is not supported in our repo because we are not using an expo bare workflow as described here. https://docs.expo.io/workflow/customizing/

Looking at this error seems my question is can we use aws-amplify/pushnotification with out having to cut over to expos full bare work flow and leverage native modules?

I tried using expo's push notification library to obtain device token and set with pinpoint instead but that lead to a separate issue which Ive started in a discussion here to track as I wasnt sure if it was an issue or me doing something wrong when configuring. https://github.com/aws-amplify/amplify-js/discussions/7698

I have fallen back to using expo's hosted push notification service in mean time as stop gap but would much rather use pinpoint so I don't have to maintain back-end API to store expo push notification service token as well as so I can take advantage of Pinpoint managing push notifications and tying it all back together nicely with our analytics which were also currently sending to pinpoint.

Any help/insight would be appreciated if someone else has gotten this working. 🙏

Ive been looking online and cant find anyone else who seems to be trying to do exactly this and have opened an issue.

To Reproduce Following guides here:

I have some code like this for bootstrapping my app

import PushNotification from '@aws-amplify/pushnotification';

Amplify.configure({
    Auth: { /* ... */ },
    Analytics: { /* ... */ },
    PushNotification: {
        requestIOSPermissions: true
    }
});

// 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);
});

Expected behavior App Starts up properly and is configured for push notifications

Code Snippet See steps in To Reproduce section

Screenshots

Screen Shot 2021-02-06 at 11 06 07 AM
Environment System: OS: macOS 10.15.7 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 1.13 GB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v12.19.0/bin/yarn npm: 6.14.10 - ~/.nvm/versions/node/v12.19.0/bin/npm Browsers: Chrome: 88.0.4324.150 Firefox: 85.0 Safari: 13.1.3 npmPackages: @aws-amplify/pushnotification: ~3.2.20 => 3.2.20 @babel/core: ~7.9.0 => 7.9.6 @expo-google-fonts/poppins: ^0.1.0 => 0.1.0 @expo/react-native-action-sheet: ^3.8.0 => 3.8.0 @expo/vector-icons: ^12.0.0 => 12.0.3 @react-native-community/async-storage: ~1.12.0 => 1.12.1 @react-native-community/datetimepicker: 3.0.4 => 3.0.4 @react-native-community/masked-view: 0.1.10 => 0.1.10 @react-native-community/netinfo: 5.9.7 => 5.9.7 @react-navigation/bottom-tabs: ^5.6.1 => 5.11.7 @react-navigation/native: ^5.6.1 => 5.9.2 @react-navigation/stack: ^5.6.2 => 5.14.2 @reduxjs/toolkit: ^1.4.0 => 1.5.0 @testing-library/react-native: ^7.1.0 => 7.1.0 @types/enzyme: ^3.10.8 => 3.10.8 @types/enzyme-adapter-react-16: ^1.0.6 => 1.0.6 @types/lodash.debounce: ^4.0.6 => 4.0.6 @types/react: ~16.9.35 => 16.9.56 @types/react-native: ~0.63.2 => 0.63.46 @types/react-native-calendars: ^1.505.0 => 1.505.0 @types/react-native-snap-carousel: ^3.8.2 => 3.8.2 @types/react-native-svg-charts: ^5.0.3 => 5.0.6 @types/react-redux: ^7.1.11 => 7.1.16 @types/redux-logger: ^3.0.8 => 3.0.8 @types/styled-components: ^5.1.4 => 5.1.7 @types/uuid: ^8.3.0 => 8.3.0 @typescript-eslint/eslint-plugin: ^4.1.1 => 4.14.2 @typescript-eslint/parser: ^4.1.1 => 4.14.2 amazon-cognito-identity-js: ^4.5.5 => 4.5.9 aws-amplify: ^3.3.4 => 3.3.16 aws-amplify-react-native: ^4.2.7 => 4.3.1 axios: ^0.21.0 => 0.21.1 axios-mock-adapter: ^1.19.0 => 1.19.0 babel-plugin-module-resolver: ^4.0.0 => 4.1.0 babel-preset-expo: 8.3.0 => 8.3.0 deep-equal: ^2.0.4 => 2.0.5 enzyme: ^3.11.0 => 3.11.0 enzyme-adapter-react-16: ^1.15.5 => 1.15.6 eslint: ^7.9.0 => 7.19.0 eslint-config-airbnb-base: ^14.2.0 => 14.2.1 eslint-config-prettier: ^7.0.0 => 7.2.0 eslint-plugin-import: ^2.22.0 => 2.22.1 eslint-plugin-prettier: ^3.1.4 => 3.3.1 eslint-plugin-react: ^7.20.6 => 7.22.0 eslint-plugin-react-hooks: ^4.2.0 => 4.2.0 eslint-plugin-react-native: ^3.9.1 => 3.10.0 expo: ^40.0.0 => 40.0.1 expo-application: ~2.4.1 => 2.4.1 expo-asset: ~8.2.1 => 8.2.2 expo-constants: ~9.3.3 => 9.3.5 expo-font: ~8.4.0 => 8.4.0 expo-image-manipulator: ~8.4.0 => 8.4.0 expo-image-picker: ~9.2.0 => 9.2.1 expo-notifications: ~0.8.2 => 0.8.2 expo-screen-orientation: ~2.1.0 => 2.1.0 expo-splash-screen: ~0.8.1 => 0.8.1 expo-status-bar: ~1.0.3 => 1.0.3 expo-web-browser: ~8.6.0 => 8.6.0 husky: ^4.3.0 => 4.3.8 jest: ^26.6.3 => 26.6.3 jest-expo: ^40.0.0 => 40.0.2 lint-staged: ^10.5.1 => 10.5.3 lodash.debounce: ^4.0.8 => 4.0.8 moment: ^2.28.0 => 2.29.1 prettier: ^2.1.2 => 2.2.1 prop-types: ^15.7.2 => 15.7.2 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-hook-form: ^6.11.5 => 6.14.2 react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 react-native-calendars: ^1.1129.0 => 1.1222.0 react-native-gesture-handler: ~1.8.0 => 1.8.0 react-native-get-random-values: ^1.5.0 => 1.5.1 react-native-keyboard-aware-scroll-view: ^0.9.3 => 0.9.3 react-native-picker-select: ^8.0.0 => 8.0.4 react-native-reanimated: ~1.13.0 => 1.13.2 react-native-safe-area-context: 3.1.9 => 3.1.9 react-native-screens: ~2.15.2 => 2.15.2 react-native-snap-carousel: ^3.9.1 => 3.9.1 react-native-status-bar-height: ^2.6.0 => 2.6.0 react-native-svg: 12.1.0 => 12.1.0 react-native-svg-charts: ^5.4.0 => 5.4.0 react-native-swipe-item: ^0.4.0 => 0.4.0 react-native-tab-view: ^2.15.2 => 2.15.2 react-native-toast-message: ^1.4.2 => 1.4.3 react-native-web: ~0.13.12 => 0.13.18 react-native-webview: 11.0.0 => 11.0.0 react-redux: ^7.2.2 => 7.2.2 reactotron-react-native: ^5.0.0 => 5.0.0 reactotron-redux: ^3.1.3 => 3.1.3 redux-logger: ^3.0.6 => 3.0.6 reselect: ^4.0.0 => 4.0.0 styled-components: ^5.2.1 => 5.2.1 ts-jest: ^26.4.4 => 26.5.0 typescript: ~4.0.0 => 4.0.5 use-swr: ^1.0.3 => 1.0.3 uuid: ^8.3.1 => 8.3.2 npmGlobalPackages: @aws-amplify/cli: 4.29.6 aws-cdk: 1.80.0 cdk8s-cli: 0.33.0 expo-cli: 4.1.6 npm: 6.14.10 tsc: 1.20150623.0 yarn: 1.22.10

Smartphone (please complete the following information):

amhinson commented 3 years ago

Unfortunately the Amplify Push Notification library will only work for React Native apps created with the CLI, not managed Expo apps. However, it will still work with the bare workflow. I'm going to mark this as a feature request to be sure it is taken into account for any future push notification updates.

my-name-is-nheo commented 3 years ago

I'm following the amplify docs, followed the instruction to setting up for android. but for some reason, I'm not able to get the token when calling onRegister. Although I'm able to successfully send a test message to the deviceId using NativeModules.RNPushNotification.getToken. Am I missing something here? Screen Shot 2021-02-10 at 9 06 26 PM

amhinson commented 3 years ago

@my-name-is-nheo One thing to note is that, based on the documentation, onRegister will only be triggered when the token is generated or updated by the push provider i.e. Apple/Google (and when the app opened the first time).

I'd also recommend seeing if the behavior is different if you put those event handlers inside componentDidMount or a useEffect.

If you're still having problems, could you open a new issue since what you are experiencing is a bit different that the original issue?

my-name-is-nheo commented 3 years ago

@my-name-is-nheo One thing to note is that, based on the documentation, onRegister will only be triggered when the token is generated or updated by the push provider i.e. Apple/Google (and when the app opened the first time).

I'd also recommend seeing if the behavior is different if you put those event handlers inside componentDidMount or a useEffect.

If you're still having problems, could you open a new issue since what you are experiencing is a bit different that the original issue?

@amhinson thank you for your response. I can only think I may have set up my .p12 wrong? I chose service (Apple Push Notification SSL (Sandbox & Production)) when creating a new certificate. I'm deep diving the documents now. But feels like I'm going in circles.

I have tried it with componentDidMount and the behavior is the same. (works for android, not for iOS)

I just opened up a new issue; added as much detail as I could. Thank you again.

gdesio75 commented 2 years ago

Hi, I'm using the aws-amplify/pushnotification library with a react-native app created via CLI and I'm experiencing the issue on iOS (works fine on Android). Importing the library in enough to have the Invariant Violation at the next run:

import PushNotification from '@aws-amplify/pushnotification';

This is my environment:

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 1.63 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    Yarn: Not Found
    npm: 8.1.0 - ~/.nvm/versions/node/v16.12.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 27, 28, 29, 30, 31
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0
      System Images: android-28 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-Sv2 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_311 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.1 => 0.66.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Could it be caused by the fact that I'm using the iOS emulator?

Thnx. G.

Samaritan1011001 commented 2 years ago

@gdesio75 try running npx pod install before running the app as show in the documentation.

mounaiban commented 6 months ago

I'm willing to give a try at adding Expo support for Push Notifications. Are there any known major issues which may stand in the way of adding managed Expo support?