[ANDROID] Notifications from Klaviyo do not show the body message

[giorgiofellipe]

Checklist

• [X] I have read the contributing guidelines
• [X] I have determined whether this bug is also reproducible in a vanilla project, such as the example app in this repository.
• [X] If possible, I've reproduced the issue using the master branch or latest release of this package.
• [X] This issue hasn't been addressed in an existing issue or pull request

Description

Seems something related with Klaviyo payload when they send notifications to Firebase Cloud Message (Android).
As you can see on the screenshot if I send it from AWS SNS it shows title and message correctly.

Expected behavior

Should show title and message

Actual behavior

Showing only title (and it is showing as message)

Steps to reproduce

1. connect app to klaviyo sdk
2. register the token with a profile
3. fire a campaign with title and message

The Klaviyo React Native SDK version information

0.4.2

Environment Description

N/A

[ajaysubra]

Hey thanks for reporting this. While testing this on our test app we were able to confirm that pushes sent from Klaviyo were delivered to our test app and have both title and body. Could you please confirm if your setup is aligned with our integration guides or if you have any custom setup?

Additionally note that, Klaviyo relies solely on data messages & not notification messages when push notifications are sent via FCM for Android devices. You'll need to implement our SDK's push handler (KlaviyoPushService) as noted here to parse the data message payload & translate that payload into a displayable push notification.

[giorgiofellipe]

@ajaysubra actually there is not a single mention about it in this repository, I assumed it was already handled by the lib itself. Would be good to explicitly add these details to the docs as others may break into the same issue.

Thanks for the help, indeed it worked fine after adding the service on AndroidManifest.xml.

For anyone wondering how to do it in Expo:

Create a plugin that basically does the following:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const { withAndroidManifest } = require("@expo/config-plugins");

function applyKlaviyoServiceToManifest(androidManifest) {
  const serviceConfig = {
    "android:name": "com.klaviyo.pushFcm.KlaviyoPushService",
    "android:exported": "false",
  };

  const intentFilterConfig = {
    action: { $: { "android:name": "com.google.firebase.MESSAGING_EVENT" } },
  };

  const existingService = androidManifest.manifest.application[0].service || [];

  const hasService = existingService.some(
    service => service.$["android:name"] === serviceConfig["android:name"]
  );

  if (!hasService) {
    existingService.push({
      $: serviceConfig,
      "intent-filter": [intentFilterConfig],
    });

    androidManifest.manifest.application[0].service = existingService;
  }

  return androidManifest;
}

const withKlaviyoAndroid = expoConfig => {
  expoConfig = withAndroidManifest(expoConfig, config => {
    config.modResults = applyKlaviyoServiceToManifest(config.modResults);
    return config;
  });

  return expoConfig;
};

exports.default = withKlaviyoAndroid;

[ajaysubra]

@giorgiofellipe Glad you are sorted.

Thanks for the suggestion and the code you posted here for other expo developers going through the same issue as you. We generally try to keep the integration guides (aka README) pretty straightforward and avoid excessive internal implementation details there but agree we can add something in code may be.

Either ways, please know that expo support is on our radar and something we are looking to support at some point. Please keep an eye out on our releases but we'll also try to notify any open threads when we have updates.