Push notification content (title and message) not being showed on android

[rickmed]

The push notification arrives but empty. I've added to Manifest.xml

    <service android:name="com.clevertap.android.sdk.pushnotification.fcm.FcmMessageListenerService" android:exported="true">
      <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT"/>
      </intent-filter>
    </service>

and added

CleverTap.createNotificationChannel("CtRNS", "Clever Tap React Native Testing", "CT React Native Testing", 5, true)

Also, the callback

CleverTap.addListener(CleverTap.CleverTapPushNotificationClicked, (e)=>{/*consume the event*/})

is not being triggered I'm testing in an Android 11 real device.

Using

import messaging from '@react-native-firebase/messaging'

  messaging().onMessage(async (remoteMessage) => {
    console.log('Received FCM message:')
    console.log(JSON.stringify(remoteMessage, null, 2))
  })

prints a payload like:

{
  "sentTime": 1724351130228,
  "data": {
    "wzrk_pn": "true",
    "wzrk_id": "0_0",
    "wzrk_dt": "FIREBASE",
    "wzrk_ck": "1723005661_1724351130",
    "wzrk_bi": "2",
    "wzrk_bc": "",
    "nt": "prueba 1",
    "wzrk_push_amp": "false",
    "wzrk_pivot": "wzrk_default",
    "wzrk_rnv": "false",
    "nm": "hola 1",
    "wzrk_ttl": "1724437539",
    "wzrk_cid": "",
    "wzrk_acct_id": "TEST-Z69-WWW-KX7Z"
  },
  "messageId": "0:1724351130238097%4a3cb8d3f9fd7gjd",
  "ttl": 86400,
  "from": "177534165311"
}

[Anush-Shand]

@rickmed Could you share the verbose Clevertap logs to further debug this issue. Also a screenshot of the actual rendered notification will help

[rickmed]

screenshot (the relevant notification is the one with "tiigre")

logs:

08-23 10:49:38.245 26864 30696 D CleverTap:PushProvider:  [PushType:FCM] Found Valid Notification Message
08-23 10:49:38.246 26864 30696 D CleverTap:PushProvider:  [PushType:FCM] received notification from CleverTap: Bundle[{wzrk_acct_id=TEST-Z69-WWW-KR1Z, nm=msg test 1, nt=title test 1,
omr_invoke_time_in_millis=1724424578245, wzrk_pivot=wzrk_default, wzrk_cid=, wzrk_rnv=false, wzrk_ttl=1724510980, wzrk_push_amp=false, wzrk_bc=, wzrk_bi=2, wzrk_ck=1723000961_1724424780,
wzrk_dt=FIREBASE, wzrk_id=0_0, wzrk_pn=true}]
08-23 10:49:38.246 26864 30696 D CleverTap:PushProvider:  [PushType:FCM]  not renderning since cleverTapAPI is null
08-23 10:49:38.255 26864 26864 D CleverTap:CTRM: received a message from Firebase
08-23 10:49:38.256 26864 26864 D CleverTap:PushProvider:  [PushType:FCM] Found Valid Notification Message
08-23 10:49:38.257 26864 26864 V CleverTap:CTRM: Notification payload does not have a fallback key.
08-23 10:49:38.257 26864 26864 V CleverTap:CTRM: got a signal to kill receiver and timer because isRenderFallback is false
08-23 10:49:38.257 26864 26864 V CleverTap:CTRM: informing OS to kill receiver...
08-23 10:49:38.257 26864 26864 V CleverTap:CTRM: informed OS to kill receiver...
08-23 10:49:38.257 26864 26864 V CleverTap:CTRM: receiver was alive for 0 seconds

MainApplication.kt:

package com.tiigre

// CleverTap imports
import com.clevertap.android.sdk.ActivityLifecycleCallback
import com.clevertap.react.CleverTapPackage
import com.clevertap.android.sdk.CleverTapAPI

import android.app.Application
import com.clevertap.react.CleverTapApplication
import android.content.res.Configuration
import androidx.annotation.NonNull

import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.ReactHost
import com.facebook.react.config.ReactFeatureFlags
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.react.flipper.ReactNativeFlipper
import com.facebook.soloader.SoLoader

import expo.modules.ApplicationLifecycleDispatcher
import expo.modules.ReactNativeHostWrapper

class MainApplication : com.clevertap.react.CleverTapApplication(), ReactApplication {

  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
        this,
        object : DefaultReactNativeHost(this) {
          override fun getPackages(): List<ReactPackage> {
            // Packages that cannot be autolinked yet can be added manually here, for example:
            // packages.add(new MyReactNativePackage());
            return PackageList(this).packages
          }

          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"

          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }
  )

  override val reactHost: ReactHost
    get() = getDefaultReactHost(this.applicationContext, reactNativeHost)


  override fun onCreate() {
    super.onCreate()

    // CleverTap initialization
    CleverTapAPI.setDebugLevel(CleverTapAPI.LogLevel.VERBOSE)
    CleverTapAPI.getDefaultInstance(applicationContext)
    ActivityLifecycleCallback.register(this)

    SoLoader.init(this, false)
    if (!BuildConfig.REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS) {
      ReactFeatureFlags.unstable_useRuntimeSchedulerAlways = false
    }
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
    if (BuildConfig.DEBUG) {
      ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
    }
    ApplicationLifecycleDispatcher.onApplicationCreate(this)
  }

  override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
  }
}

MainAcitivity.kt:

package com.tiigre

import android.os.Build
import android.os.Bundle
import android.content.Intent
import com.clevertap.android.sdk.CleverTapAPI

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate

import expo.modules.ReactActivityDelegateWrapper

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    // Set the theme to AppTheme BEFORE onCreate to support
    // coloring the background, status bar, and navigation bar.
    // This is required for expo-splash-screen.
    setTheme(R.style.AppTheme);
    super.onCreate(null)
  }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  override fun getMainComponentName(): String = "main"

  /**
   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
   */
  override fun createReactActivityDelegate(): ReactActivityDelegate {
    return ReactActivityDelegateWrapper(
          this,
          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
          object : DefaultReactActivityDelegate(
              this,
              mainComponentName,
              fabricEnabled
          ){})
  }

  /**
    * Align the back button behavior with Android S
    * where moving root activities to background instead of finishing activities.
    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
    */
  override fun invokeDefaultOnBackPressed() {
      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
          if (!moveTaskToBack(false)) {
              // For non-root activities, use the default implementation to finish them.
              super.invokeDefaultOnBackPressed()
          }
          return
      }

      // Use the default back button implementation on Android S
      // because it's doing more than [Activity.moveTaskToBack] in fact.
      super.invokeDefaultOnBackPressed()
  }

  override fun onNewIntent(intent: Intent?) {
      super.onNewIntent(intent)

      // On Android 12 and onwards, raise notification clicked event and get the click callback
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
          CleverTapAPI.getDefaultInstance(this)?.pushNotificationClickedEvent(intent?.extras)
      }
  }
}

in build.gradle:

    implementation 'com.clevertap.android:clevertap-android-sdk:5.0.0'
    implementation 'com.google.firebase:firebase-messaging:23.0.6'

[Anush-Shand]

@rickmed Thanks for the detailed reply. One log in particular catches my eye CleverTap:PushProvider: [PushType:FCM] not renderning since cleverTapAPI is null. This generally happens if there is an account-id missmatch in the notifcation payload and the AndroidManifest.xml file

Could you confirm, if this issue is reproducible every time with the same log? Another thing is that com.clevertap.android:clevertap-android-sdk:5.0.0 is used. This is outdated, can you try upgrading to v6.2.1 and try.

If the issue still exists, then a minimal reproducible sample will help immensely

[rickmed]

The issue was the account-id missmatch. Thanks! But the callback:

CleverTap.addListener(CleverTap.CleverTapPushNotificationClicked, (e)=>{/*consume the event*/})

is still not being called

[Anush-Shand]

@rickmed Can you please confirm that the steps from these developer docs have been followed. Also were you able to upgrade the version of clevertap-react-native and clevertap-android-sdk

[rickmed]

Also were you able to upgrade the version of clevertap-react-native and clevertap-android-sdk

I have.

Can you please confirm that the steps from these developer docs have been followed.

Yes. This is the contents of my MainAcitivity.kt (I changed the code slightly because the docs are not clear where does cleverTapDefaultInstance comes from. But should work the same).

package com.tiigre

import android.os.Build
import android.os.Bundle
import android.content.Intent
import com.clevertap.android.sdk.CleverTapAPI

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate

import expo.modules.ReactActivityDelegateWrapper

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    // Set the theme to AppTheme BEFORE onCreate to support
    // coloring the background, status bar, and navigation bar.
    // This is required for expo-splash-screen.
    setTheme(R.style.AppTheme);
    super.onCreate(null)
  }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  override fun getMainComponentName(): String = "main"

  /**
   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
   */
  override fun createReactActivityDelegate(): ReactActivityDelegate {
    return ReactActivityDelegateWrapper(
          this,
          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
          object : DefaultReactActivityDelegate(
              this,
              mainComponentName,
              fabricEnabled
          ){})
  }

  /**
    * Align the back button behavior with Android S
    * where moving root activities to background instead of finishing activities.
    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
    */
  override fun invokeDefaultOnBackPressed() {
      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
          if (!moveTaskToBack(false)) {
              // For non-root activities, use the default implementation to finish them.
              super.invokeDefaultOnBackPressed()
          }
          return
      }

      // Use the default back button implementation on Android S
      // because it's doing more than [Activity.moveTaskToBack] in fact.
      super.invokeDefaultOnBackPressed()
  }

  override fun onNewIntent(intent: Intent?) {
      super.onNewIntent(intent)

      // On Android 12 and onwards, raise notification clicked event and get the click callback
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
          CleverTapAPI.getDefaultInstance(this)?.pushNotificationClickedEvent(intent?.extras)
      }
  }
}

[Anush-Shand]

Thanks for the response It is important that
ActivityLifecycleCallback.register(this); is called before super.onCreate()

https://developer.clevertap.com/docs/android-quickstart-guide#option-a-custom-application-class Can you try the same? If the issue still persists could you share a minimum reproducible example app for the same? A support ticket can be raised with Clevertap if there are privacy concerns

[rickmed]

I already have ActivityLifecycleCallback.register(this); in my MainApplication.kt:

package com.tiigre

// CleverTap imports
import com.clevertap.android.sdk.ActivityLifecycleCallback
import com.clevertap.react.CleverTapPackage
import com.clevertap.android.sdk.CleverTapAPI

import android.app.Application
import com.clevertap.react.CleverTapApplication
import android.content.res.Configuration
import androidx.annotation.NonNull

import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.ReactHost
import com.facebook.react.config.ReactFeatureFlags
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.react.flipper.ReactNativeFlipper
import com.facebook.soloader.SoLoader

import expo.modules.ApplicationLifecycleDispatcher
import expo.modules.ReactNativeHostWrapper

class MainApplication : com.clevertap.react.CleverTapApplication(), ReactApplication {

  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
        this,
        object : DefaultReactNativeHost(this) {
          override fun getPackages(): List<ReactPackage> {
            // Packages that cannot be autolinked yet can be added manually here, for example:
            // packages.add(new MyReactNativePackage());
            return PackageList(this).packages
          }

          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"

          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }
  )

  override val reactHost: ReactHost
    get() = getDefaultReactHost(this.applicationContext, reactNativeHost)

  
  override fun onCreate() {

    // Clevertap
    ActivityLifecycleCallback.register(this)

    // Clevertap
    CleverTapAPI.setDebugLevel(CleverTapAPI.LogLevel.VERBOSE)
    CleverTapAPI.getDefaultInstance(applicationContext)

    super.onCreate()
    SoLoader.init(this, false)
    if (!BuildConfig.REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS) {
      ReactFeatureFlags.unstable_useRuntimeSchedulerAlways = false
    }
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
    if (BuildConfig.DEBUG) {
      ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
    }
    ApplicationLifecycleDispatcher.onApplicationCreate(this)
  }

  override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
  }
}

do I need to add it to my MainActivity.kt as well?

This is the releventa clevertap code in my app (minimum reproducible example app)

import messaging from '@react-native-firebase/messaging'
import * as CleverTap from 'clevertap-react-native'

export function initUserTracking() {
  if (process.env.EXPO_PUBLIC_DEBUG_CLEVERTAP === 'true') {
    messaging().onMessage((remoteMessage) => {
      console.log('Received FCM message:')
      console.log(JSON.stringify(remoteMessage, null, 2))
    })
  }
  if (process.env.EXPO_PUBLIC_USER_TRACKING !== 'true') {
    CleverTap.setOptOut(true)
  }

  if (process.env.EXPO_PUBLIC_DEBUG_CLEVERTAP === 'true') {
    CleverTap.setDebugLevel(3)
  }

  CleverTap.initializeInbox()

  CleverTap.registerForPush()

  CleverTap.createNotificationChannel(
    'offersmain',
    'Offers Main Channel',
    'Main Channel for Offers Push Notifications',
    3, // apppropiate level for push marketing
    true,
  )

  CleverTap.addListener(
    CleverTap.CleverTapPushNotificationClicked,
    (e: unknown) => {
      console.log('clevertap push listener:')
      console.log(JSON.stringify(e, null, 2))
    },
  )
}

[Anush-Shand]

@rickmed No you don't need it in the MainActivity.kt Could you confirm if you are using the old architecture?

Also is the callback not received on all 3 states, foreground, background and killed? Can you also a separate issue for clarity with all the details as the original issue mentioned in the title was resolved?

[satyam-capcons]

@rickmed are you using expo? if so, have you written a custom plugin for clevertap ?

[Anush-Shand]

@rickmed Closing this ticket due to inactivity. Feel free to reopen a new issue as mentioned in https://github.com/CleverTap/clevertap-react-native/issues/402#issuecomment-2320553945