React Native - Android - Notification - bad icon, no title, no body

Sendbird Chat API/SDK JavaScript
,
1

Hi,
my application integrates notifications. APN for iOS, firebase for android. Unfortunately, android notifications are displaying wrong. This issue is only sendbird related, because when I send test (or other) message from firebase or my backend, it displays correctly. This issue has only android, iOS displays it correctly. Device displays wrong notification regardless on message type (user message, admin message…everything looks the same). See the pictures.

Wrong:

Expected:

2

Hi @Vladislav_Vodicka,

Welcome to the Sendbird Community. Could you share with us how you’ve implemented notifications within your Android application? It would help us better understand the problem.

3

Actually everything needed for notifications to appear happens in this method:

export const registerForPushNotificationsAsync = async (sb: SendBird.SendBirdInstance): Promise<string> => {
  // Prevent trying to register for notifications on iOS simulator
  if (!Constants.isDevice && Platform.OS === 'ios') return ''

  const APNSToken = await messaging().getAPNSToken()
  const FCMToken = await messaging().getToken()

  if (Platform.OS === 'ios') {
    try {
      const status = await sb.registerAPNSPushTokenForCurrentUser(APNSToken || '')
      // eslint-disable-next-line no-console
      console.log('registerAPNSPushTokenForCurrentUser status:', status)
    } catch (error) {
      // Handle error.
    }
  } else {
    try {
      const status = await sb.registerGCMPushTokenForCurrentUser(FCMToken)
      // Do something in response to a successful registration.
      // eslint-disable-next-line no-console
      console.log('registerGCMPushTokenForCurrentUser status:', status)
    } catch (error) {
      // Handle error.
    }
  }

  return FCMToken
}

That is called after login.

4

Hi @Vladislav_Vodicka,

How about when you receive the notification? In our documentation we talk about how to handle a Payload from FCM: Push notifications | Chat Android SDK | Sendbird Docs

Could you share with us how you’ve implemented this?

5

Thanks for a reply. React native handles it, but it looks like my problem is independent to how I handle the notification. But to be sure, here is effect in my App.tsx which handles it:

useEffect(() => {
    Notifications.registerRemoteNotifications()

    const notificationOpenedSubscription = Notifications.events().registerNotificationOpened(handleNotificationOpen)

    const notificationReceivedForegroundSubscription = Notifications.events().registerNotificationReceivedForeground(
      (notification: Notification, completion: (response: NotificationCompletion) => void) => {
        const currentRoute = navigationRef.current?.getCurrentRoute()

        if (
          _.get(currentRoute, 'params.report.sendbirdChannelUrl') ===
          _.get(notification, 'payload.sendbird.channel.channel_url')
        ) {
          completion({})
          return
        }

        // Calling completion on iOS with `alert: true` will present the native iOS inApp notification.
        completion({alert: true, sound: true, badge: true})
      },
    )

    if (Platform.OS === 'ios') {
      const handleInitialNotification = async () => {
        const notification = await Notifications.getInitialNotification()
        if (notification) await handleNotificationOpen(notification)
      }
      handleInitialNotification()
    }

    messaging().onNotificationOpenedApp(handleNotificationOpen)

    const onMessageUnsubscribe = messaging().onMessage(({data}) => {
      if (!data || !data.sendbird) return

      const sendbird = JSON.parse(data.sendbird)
      const currentRoute = navigationRef.current?.getCurrentRoute()

      if (
        Platform.OS === 'ios' ||
        _.get(currentRoute, 'params.report.sendbirdChannelUrl') === _.get(sendbird, 'channel.channel_url')
      ) {
        return
      }

      // @ts-expect-error Type marks all fields as required which is incorrect
      Notifications.postLocalNotification({
        title: sendbird.push_title,
        body: `${sendbird.sender.name}: ${sendbird.message}`,
        badge: sendbird.unread_message_count,
        payload: {sendbird},
      })
    })

    messaging().setBackgroundMessageHandler(async () => {
      // Intentionally empty, these are handled by react-native-notifications
      // This is set as empty to avoid the following warning:
      // > No background message handler has been set. Set a handler via the "setBackgroundMessageHandler" method.
      // TODO: Investigate the warning "No task registered for key ReactNativeFirebaseMessagingHeadlessTask"
    })

    return () => {
      notificationOpenedSubscription.remove()
      notificationReceivedForegroundSubscription.remove()
      onMessageUnsubscribe()
    }
  }, [])

interesting places here are messaging().onMessage and messaging().setBackgroundMessageHandler. The first mentioned is handling notifications received when the app is in the foreground. That “almost” works. I catch the notification and create local notification from its payload using react-native-notifications. Only issue is app logo, which is blank as on the screenshot. messaging().setBackgroundMessageHandler is intentionally left blank. If I duplicate my code from onMessage and recreate localNotification, works similar as in onMessage, but it also duplicates the notification. So device shows 2 notifications instead of one.

I use sendbird v 3.0.153

7

Moved to support case.