AWS Amplify Push Notifications with React Native

Question

There seem to be some discrepancies in the documentation as to how to implement Push Notifications. Here is the RN code from the AWS Amplify docs:

import { PushNotificationIOS } from 'react-native';
import Analytics from '@aws-amplify/analytics';
import PushNotification from '@aws-amplify/pushnotification';
import aws_exports from './aws_exports';

// PushNotification need to work with Analytics
Analytics.configure(aws_exports);

PushNotification.configure(aws_exports);

But we also need to configure Analytics as part of this, and here is that implementation from the docs:

import Amplify, { Analytics } from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

Note that in the Analytics implementation, there is only a single Amplify configure. But in the Push Notification docs we directly configure Analytics and PushNotifications but not Amplify. Which is it?

To add further confusion, I found this Medium post from an AWS developer advocate explaining the RN implementation a third way:

import { PushNotificationIOS } from 'react-native';
import Amplify from 'aws-amplify';
import { PushNotification } from 'aws-amplify-react-native';
import aws_exports from './aws_exports';

Amplify.configure(aws_exports);
PushNotification.configure(aws_exports);

PushNotification is imported from aws-amplify-react-native instead of aws-amplify.

Totally confused here, and welcome any clarification!

Edit: Adding that I've tried various combinations of all these with no luck. PushNotification seems to be undefined and unable to configure.

Have you tried using react-native-push-notification instead? — Jose Vf

B.Hesseldieck B.Hesseldieck · Accepted Answer · 2018-08-03T14:05:13

// UPDATE

Updated the first code snippet, because I registered 2 endpoints for one device with it.

// OLD ANSWER

The following step should work, first:

import Amplify from 'aws-amplify;
import PushNotification from '@aws-amplify/pushnotification';
import awsExports from '../../../../../aws-exports';

Amplify.configure(awsExports);
// PushNotification.configure(awsExports); // registering 2 Endpoints for one device if running this line as well

Then, remember to run

npm install aws-amplify --save && npm install @aws-amplify/pushnotification --save

Especially the second part with the @ is important.

Lastly, in componentDidMount:

PushNotification.onNotification((notification) => {
  console.log('in app notification', notification);
  notification.finish(PushNotificationIOS.FetchResult.NoData);
});

PushNotification.onRegister((token) => {
  console.log('in app registration', token);
});

This is final solution for me, battled with it for 3 days.

AWS Amplify Push Notifications with React Native

1 Answers