Amplify-js: Conflict zo0r/react-native-push-notification and @aws-amplify/pushnotification

[ththugues44]

Hello

I do not know how to do it because I have a conflict of package namely:
i am using @aws-amplify/pushnotification for remote push notifications and i want to use zo0r / react-native-push-notification for local notifications and badge. Here is the problem :

in the MainApllication.java file for the @ aws-amplify / pushnotification package we need to include importing this import com.amazonaws.amplify.pushnotification.RNPushNotificationPackage and add new RNPushNotificationPackage (). for the zo0r / react-native-push-notification package we need to import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage and add ReactNativePushNotificationPackage.

I have an error NATIVE model RNPushNotification tried to override RNPushNotificationModule for Mofule name RNPushNotification if this was your intention, set canOverrideExistingModule = true. (See photos ) => http://www.noelshack.com/2018-41-1-1539003383-conflict-package.jpeg

i think there is a conflict between @ aws-amplify / pushnotification and zo0r / react-native-push-notification, please how do I resolve this conflict because i need local notifications and badges for my application?

Source Code File File MainApllication.java
` package com.katika;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.android.freshchatSdk.FreshChatReactPackage;
import com.amazonaws.amplify.pushnotification.RNPushNotificationPackage;
import com.robinpowered.react.Intercom.IntercomPackage;
import io.intercom.android.sdk.Intercom;
import com.masteratul.RNAppstoreVersionCheckerPackage;
import io.xogus.reactnative.versioncheck.RNVersionCheckPackage;
import com.microsoft.codepush.react.CodePush;
import io.invertase.firebase.RNFirebasePackage;
import com.ocetnik.timer.BackgroundTimerPackage;
import io.underscope.react.fbak.RNAccountKitPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import io.underscope.react.fbak.RNAccountKitPackage;
import io.invertase.firebase.analytics.RNFirebaseAnalyticsPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;
import io.invertase.firebase.functions.RNFirebaseFunctionsPackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.fabric.crashlytics.RNFirebaseCrashlyticsPackage; // <-- Add this line
import io.invertase.firebase.crash.RNFirebaseCrashPackage; // <-- Add this line
import io.invertase.firebase.firestore.RNFirebaseFirestorePackage; // <-- Add this lin.util.Arrays;e
import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage ; // <--- Import Package

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    @Override
    protected String getJSBundleFile() {
    return CodePush.getJSBundleFile();
    }

@Override
public boolean getUseDeveloperSupport() {
  return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new VectorIconsPackage(),
        new FreshChatReactPackage(),
        new RNPushNotificationPackage(),
        new IntercomPackage(),
        new RNAppstoreVersionCheckerPackage(),
        new RNVersionCheckPackage(),
        new CodePush("bySq16a9P0d2pIdf9ZZvyaRJbzcOSJ8Sg7bHX", getApplicationContext(), BuildConfig.DEBUG),
        new RNFirebasePackage(),
        new BackgroundTimerPackage(),
        new RNAccountKitPackage(),
        new RNFirebaseAnalyticsPackage(),
        new RNFirebaseNotificationsPackage(),
        new RNFirebaseFunctionsPackage(),
        new RNFirebaseMessagingPackage(),
        new RNFirebaseCrashlyticsPackage(),
        new RNFirebaseFirestorePackage(),
        new RNFirebaseCrashPackage(),
        new ReactNativePushNotificationPackage () // <-- Add this line
  );
}

@Override
protected String getJSMainModuleName() {
  return "index";
}

};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
Intercom.initialize(this, "android_sdk-83be2abcbbe01abc199897d691de1c8b47f703d3", "tduveiqw");
}

}
`

[kushanson]

Hi, I am working on making these libraries compatible in my own project.

I found that I can get around the error you are seeing by doing the following:

• In ./node_modules/react-native-push-notification/android/src/main/java/modules/RNPushNotification.java make these changes:
  before:
  @Override public String getName() { return "RNPushNotification"; }
  after:
  @Override public String getName() { return "RNPushNotificationModule"; }
• In ./node_modules/react-native-push-notification/component/index.android.js, make the following changes
  before:
  var RNPushNotification = NativeModules.RNPushNotification;
  after:
  var RNPushNotification = NativeModules.RNPushNotificationModule;

This should fix the naming collision between the two libraries by renaming the react-native-push-notification module. I am planning on using this fix until aws-amplify supports local notifications.

[ththugues44]

@kushanson very nice hack. Is working very well.

[pribadi1st]

hey @noellaby , did you guys get an error :app:transformClassesWithMultidexlistForDebug after installing zo0r package ? if so, how do you handle it ?

[Jobel91]

After added "react-native-push-notification" lib, I got an error :
D8: Program type already present: com.google.android.gms.gcm.PendingCallback

I resolved the issue by adding :

compile (project(':react-native-push-notification')){
exclude group: 'com.google.android.gms', module: 'play-services-gcm'
}

Then, I followed @kushanson instructions to fix the naming collision between the two libraries.
And it works fine now.

Thanks.

[Jobel91]

I get an error when I try to open a notification sent by 'react-native-push-notifications' :

Cannot read property 'pinpoint.campaign.campaign_id' of undefined

It seems hard to implement these libraries without issue.
Set up Push Notifications is quite hard, then we need to simplify his implementation, so I will give up one of these library.

I hope that AWS Developers will improve the use of this module.

I will send Push Notifications using SNS, but I'm wondering if it will works...

[GraemeAllanBryce]

The "hack" from @kushanson is great as it gets rid of the conflict but it would be a simple solution to have this simple name change applied by the library owners to save others the same issue.

Note too that if you rename the module in this way you ALSO have to refactor the call to the module in the JS code at line 8 of index..android.js Thus:-

var RNPushNotification = NativeModules.RNPushNotificationModule;

Put simply, the Amazon AWS team and zo0r have both, quite reasonably, chosen to have the Android java module "RNPushNotifications". This is a problem because the GRADLE build system has no way to resolve the conflict.

I would request that the owners of this lib make the change to resolve the conflict.

This library has way more functionality than the AWS Amplify library and I would not expect AWS to EVER support local and scheduled push notifications as it has no benefit to them promoting the Pinpoint service.

[GraemeAllanBryce]

Note that for me the solution from @Jobel91 was a great help but not entirely what was required.

I have ended up with

implementation (project(':@aws-amplify_pushnotification')){
   exclude group: 'com.firebase'
   exclude group: 'com.google.android.gms', module: 'play-services-gcm'
}

in my case the GMS part is not actually required but I have included it as I suspect it may be in the future. The firebase line did the trick.

Note is it com.firebase and NOT com.google.firebase which I have also see documented and which did not work for me.

Hope this helps someone :-)

[viniciusfont]

@GraemeAllanBryce That helped me! Thank you very much. What was missing from my setup was:

exclude group: 'com.firebase'

That did the trick!
Thanks a lot!

[viniciusfont]

@GraemeAllanBryce with this setup, I can successfully build the app, but I think I broke the amplify google services connection.

I put the amplify + pushnotification logic in the App.js outside the App class component.

The device successfully appears at Pinpoint dashboard (as a endpoint without a address), but the @amplify/push_notifications module doesn't get the FCM token to update the endpoint (neither onRegister is called)

import React from 'react'
import Amplify, { Auth, Analytics } from 'aws-amplify'
import PushNotification from '@aws-amplify/pushnotification'
import awsmobile from './aws-exports'

Amplify.configure(awsmobile)
Analytics.configure(awsmobile)
PushNotification.configure(awsmobile)

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

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

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

class App extends React.Component {
    constructor(props) {
        super(props)
    }

        ...
}

[ejdoh1]

I get an error when I try to open a notification sent by 'react-native-push-notifications' :

Cannot read property 'pinpoint.campaign.campaign_id' of undefined

It seems hard to implement these libraries without issue.
Set up Push Notifications is quite hard, then we need to simplify his implementation, so I will give up one of these library.

I hope that AWS Developers will improve the use of this module.

I will send Push Notifications using SNS, but I'm wondering if it will works...

I also have this issue - only when my app is in the foreground and I try to open a notification.

[GraemeAllanBryce]

I would like to let people know that we have an app in production that is working perfectly using this library and AWS Pinpoint for both analytics and push notifications. It is working on iOS and Android.

Our discover was that this library provides everything that is required for push notifications.

you SHOULD NOT include the AWS push notifications library in your build. It is not required and does indeed create conflicts. We spent a lot of time trying to resolve the conflicts using many of the suggestions given here, some worked and some did not and all were complex. It was a lightbulb moment when we realised there is no need to resolve them - just don't include the AWS Push library.

Long way round for a simple and elegant solution. :-) . Hope this helps.

[GraemeAllanBryce]

I should add: we are successfully using all of Push, Scheduled and Local notifications.

[titoasty]

@Jobel91 @ejdoh1

I ran into the same campaign_id bug, and here is my fix :

Inside node_modules/@aws-amplify/pushnotification/lib/PushNotification.js, lines 350-352

replace:

var ret = null;
var dataPayload = dataObj.data;
if (dataPayload['pinpoint.campaign.campaign_id']) {

with:

var ret = null;
if(!dataObj.data) {
    dataObj.data = {}
    return dataObj;
}
var dataPayload = dataObj.data;
if (dataPayload['pinpoint.campaign.campaign_id']) {

The bug is due to no "data" field in in the raw message, because pinpoint is waiting for pushes with correct pinpoint data.