feat: Add push notification support for expo

[TheNerdGuyLulu]

Why?

Towards https://github.com/intercom/intercom/issues/328801

[uddish]

Nice one!

[josh-]

we're eagerly awaiting this feature! if it would be possible to release a new version with this included in the next few days that would be super appreciated 🙏

[yonitou]

This is Christmas :D
Just one question though : why are you asking to add this snippet to infoPlist ?

      "infoPlist": {
        "NSCameraUsageDescription": "This is just a sample text to access the Camera",
        "NSPhotoLibraryUsageDescription": "This is just a sample text to access the Photo Library"
      }

For me, we don't need it to use push notifications

[Br1an-Boyle]

@yonitou 👋🏻
On iOS, we now have the ability to select your camera in the message composer. It uses the camera API, therefore you will need to provide the NSCameraUsageDescription in your info.plist otherwise your app will get rejected from the AppStore.
You can ignore the NSPhotoLibraryUsageDescription.

[yonitou]

Okay didn't know about that ! Maybe you could add it to the readme so people know why they're adding these new permissions ? (it's not always obvious :D)
Thanks

[yonitou]

I also notice that in this PR, you're saying that there's no "deep links support". What does that mean exactly ?

• Can I still handle deep links contained in push notifications manually (by looking at the uri property in the push notification) ?
• Can I still use Intercom.handlePushMessage() to open a push notification message ?
• Can I still use IntercomAutoIntegratePushNotifications to disable automatic integration of push notifications ?

[Br1an-Boyle]

@yonitou I'll need to get clarification on that.

[yonitou]

Alright :) keep me/us in touch. We'll need these infos to update to the last intercom version (we are currently stuck to v4 with the old config plugin 😅)

[TheNerdGuyLulu]

Hi @yonitou,
deep link is supported with expo, though it's not yet documented how to configure it.
Using app.json / app.config.js, we need to add the necessary configurations. You can take a look here on how to configure app links for android as an example.

Also the following example creates a custom uri.

"ios": {
      "infoPlist": {
        "CFBundleURLTypes": [
          {
            "CFBundleURLSchemes": ["myapp"]
          }
        ]
      }
}

[yonitou]

Hi
Thanks for your answer.
My app is already configured for deep linking with expo. :)
My question was about the fact you put "Deep links are not supported yet" in your PR.
Does that mean that intercom push notifications that contain deep links won't work as excepted ? If so, how can we handle push messages for example (when having a chat between a client and an Intercom agent) ?

[nekode-dev]

Thanks for this feature, the timing on this was perfect for us and our use case! 🙌🏻

Tested on iOS and it works fantastically. However, testing on Android has proved to not be working. Taking a look at this PR, it looks like you have only implemented the config-plugin for iOS and not Android unless I am mistaken?

I have run npx expo prebuild --clean and can see the code mods have been applied for iOS but not Android to confirm the above.

Am I possibly missing something, or is Android support still to come?

Thanks!

[josh-]

Similar to @nekode-dev, can confirm that iOS is working great here but so far we've been unable to get push notifications working on Android.

@TheNerdGuyLulu is there anything extra we need to do in order to get Android working?

[Br1an-Boyle]

Hi @josh- @nekode-dev 👋🏻
Thanks for your feedback about Android push. Just to let you know that we'll be picking this up next week and we will look into the problem.
Thanks for your patience.

[nekode-dev]

Hey @Br1an-Boyle,

Appreciate the update on this, thanks for taking a look into it! 🙌🏻

[TheNerdGuyLulu]

Hello,
For Android, the Google-services.json is needed from firebase (make sure it’s correctly linked inside app.json). The package ID needs to match on firebase, and intercom backend dashboard.
The associated json file that authenticates the push notifications request needs also to be uploaded into intercom dashboard.

It’s described in more details inside intercom documentation- steps 1 and 3.
https://developers.intercom.com/installing-intercom/react-native/push-notifications/

[TheNerdGuyLulu]

@nekode-dev

have run npx expo prebuild --clean and can see the code mods have been applied for iOS but not Android to confirm the above.

Can you confirm that inside MainApplication.kt, the API key isn’t being added?

It should add the initialization method inside onCreate correctly filled with the data you gave on app.json.
IntercomModule.initialize(this, "apiKey", "appId");

[nekode-dev]

Can you confirm that inside MainApplication.kt, the API key isn’t being added?

It should add the initialization method inside onCreate correctly filled with the data you gave on app.json. IntercomModule.initialize(this, "apiKey", "appId");

@TheNerdGuyLulu yeah that has been added, but this is specifically about the config needed to be added to allow for push notifications as outlined in step 2 of the docs - none of the code around calling IntercomModule.sendTokenToIntercom etc is being set

[TheNerdGuyLulu]

@nekode-dev
That part shouldn't be necessary. Internally, the native sdk library should add that.

If you check the Android documentation, that is marked as optional. Necessary if you don't use firebase, or if you need custom logic attached to that action. RN doc is being revised and should be updated to include that information as well.

[josh-]

Just chiming in here to say that in our app I can see the IntercomModule.initialize call correctly being made in MainApplication with the app ID and api key.

I've also ensured that the app name + bundle ID in the intercom settings match the app, and that the associated service account private key has been added to intercom.

However we're still not receiving push notifications on android (while iOS is working fine). Any thoughts about what might be happening here? Happy to jump on a call or DM about this if that would be helpful too!

[TheNerdGuyLulu]

@josh-
Just to rule out… did you request push notifications permission? Using e.g. react-native-permissions.

[josh-]

Confirmed - here's a screenshot from the app info:

We use expo-notifications to request notifications - here's what I see in response to getPermissionsAsync:

{"expires":"never","granted":true,"canAskAgain":true,"status":"granted","android":{"interruptionFilter":1,"importance":3}}

[yonitou]

I have Intercom on my Android app with the old expo config plugin so the SDK version is v4 but here's what I needed to do to make push notifications work on Android :

Notifications.setNotificationChannelAsync("intercom_chat_replies_channel", {
	description: "Channel for intercom replies",
	importance: Notifications.AndroidImportance.MAX,
	name: "Intercom Replies Channel"
});

[josh-]

thanks @yonitou - think that's only related to this other expo plugin? tried using that locally with this expo plugin and doesn't appear to make a difference.

---

here's a screenshot of App Info > Notifications showing that it seems this offical intercom plugin is correctly creating the three intercom notification channels ("Actions", "Chat replies" and "New chats"):

(note that "Miscellaneous" above is for other non-intercom notifications in our app which are successfully being delivered)

[josh-]

@TheNerdGuyLulu if I implement the following code:

// note that we already use `@react-native-firebase/messaging` elsewhere in the app
import messaging from '@react-native-firebase/messaging';

messaging().setBackgroundMessageHandler((remoteMessage) => {
  console.log(remoteMessage);

  return Promise.resolve();
});

and then send an intercom message to my user while the app is in the background I see this function being invoked with this data:

{
  "data": {
    "app_id": "<APP_ID_HERE>",
    "app_name": "<APP_NAME_HERE> [TEST]",
    "author_name": "Josh",
    "avatar_color": "#333333",
    "body": "Josh: Message test here",
    "conversation_id": "26",
    "conversation_part_id": "178",
    "conversation_part_type": "comment",
    "image_url": "",
    "intercom_push_type": "notification",
    "message": "Josh: Message test here",
    "message_data": "{\"type\":\"text\",\"message\":\"Message test here\"}",
    "receiver": "intercom_sdk"
  },
  "from": "814827852768",
  "messageId": "0:1715816411767321%57dabaccf9fd7ecd",
  "sentTime": 1715816411740,
  "ttl": 2419200
}

so it does appear that the underlying push notification code is working and the message is being received - however the user is not being notified with a notification message in their lock screen/notifications (as is correctly working in the ios app build)

do you know why this might be the case?

I created another internal distribution build that didn't contain @react-native-firebase/messaging to determine whether that was causing a conflict and the same issue persisted (no push notification shown to user).

(I also note that this intercom notification doesn't have a notification key in the object like our other FCM notifications - I assume the Intercom SDK is supposed to handle displaying a user-visible notification for incoming messages - eg like here?)

[yonitou]

Hi !

@Br1an-Boyle : except the discussion happening about the Android part (which is quite important for us to use your expo plugin), did you get some clarifications about the do and don't regarding push notfications setup and deep linking (especially for people who come from the old plugin with intercom v4) ? That would be really helpful to get ready and understand what works or not !

[TheNerdGuyLulu]

Hi @josh- @yonitou,

I created a new expo project from scratch. The push notifications works fine for me. For this test I enabled the notifications permission directly from the android settings, but while developing the plugin I used the react-native-permissions and also fine.

I'm happy to jump on a call to try to sort it out.

[yonitou]

Thanks !
I think it will be easier for @josh- to test it to confirm since he already upgraded Intercom SDK (it's not our case yet since a lot of things rely on the old version). @josh- Can you confirm that it's working?

[josh-]

Thanks very much for verifying and the offer to jump on a call @TheNerdGuyLulu, however since we need to support badging the app icon when receiving a notification (and this isn't supported by intercom) we've instead moved to listening to Intercom webhooks and sending our own notifications.

[yonitou]

So looks like that this thread can be closed if everything works as expected ? @TheNerdGuyLulu, what about deep links setup in push notifications ?

[yonitou]

Hi

I'm updating this thread because I still have questions about push notifications and deep link support and especially, the differences between the old plugin and the new one.
In the old plugin, I needed to setup everything I'm listing below and I need to know what should I keep, remove or update by installing the new one :

• I needed a specific Android channel for notifications

Notifications.setNotificationChannelAsync("intercom_chat_replies_channel", {
					description: "Channel for intercom replies",
					importance: Notifications.AndroidImportance.MAX,
					name: "Intercom Replies Channel"
				});

• I needed to add to my infoPlist this key to manually handle push notifications for iOS :

IntercomAutoIntegratePushNotifications: "NO"

• I needed to manually intercept intercom notifications to handle deep links and messages manually

const payload = (lastNotificationResponse?.notification?.request?.trigger as any)?.payload;
		if (payload?.icm_cid) {
			setCurrentIntercomNotification({ data: payload?.icm_cid, type: "message" });
		}
		if (payload?.uri) {
			setCurrentIntercomNotification({ data: payload?.uri, type: "deeplink" });
		}

• The function Intercom.handlePushMessage() was only working on Android. Not in iOS

Can I have some help/explanations about that ? I carefully read the repository documentation but I don't know if it's exhaustive or not

Thanks !

[uddish]

Hey @yonitou 👋
Did you face any issues with push notifications following what was there in our readme?
I don't think you need to take any extra steps for it to work.

[yonitou]

I was waiting for your answer before updating my plugin. I can try with your readme but I still don't understand how should I handle deep links ? Is it going to be managed by the handlePushMessage function ? Or is it going to be automatically handled ? (In my app, I need to wait for the authentication to finish to handle custom deep links, this is why I'm asking)

[uddish]

Hey @yonitou
You should be able to use deeplinks as described in the documentation here.
Can you please try adding the configuration as described above and let us know if you are facing any issue?

As for waiting for the authentication to finish, I don't think we have an interceptor method in our plugin yet but I would have to get back to you on this.

Thanks for being patient 😄

[yonitou]

Thx
Do you think that my previous setup could still work ?

const payload = (lastNotificationResponse?.notification?.request?.trigger as any)?.payload;
		if (payload?.icm_cid) {
			setCurrentIntercomNotification({ data: payload?.icm_cid, type: "message" });
		}
		if (payload?.uri) {
			setCurrentIntercomNotification({ data: payload?.uri, type: "deeplink" });
		}

I didn't use any interceptor but I blocked the notification with expo-notifications package, read the data inside and navigated manually instead. It was quite hacky but worked :D

[uddish]

Yes, I think it could but it would be best to test it out first 😄

[yonitou]

I just tried to install the new plugin following the readme :

• The builds are working and the app is launching.
• The Intercom.handlePushMessage doesn't work at all on Android.
• On iOS, it's opening the message right away even if I'm not using "Intercom.handlePushMessage". This is the reason I used before IntercomAutoIntegratePushNotifications: "NO"
• Deeplinks are correctly received on iOS & Android
• However, they are working on iOS (even if the app is killed) but on Android, they are not working at all
• I didn't test universal links yet

Any idea ?

PS : FYI, I have a working setup for deep links and universal links for Android & iOS with Expo & React Navigation for one year now so I don't think it's related to it.

[yonitou]

Here's what I need to do to handle push notifications & deep links the same way for Android & iOS with "@intercom/intercom-react-native": "^7.2.1":

• Add IntercomAutoIntegratePushNotifications: "NO" in my iOS infoPlist
• Delete all Intercom.handlePushMessage() occurrences
• Add the snippet below in my navigation container

import { useLastNotificationResponse } from "expo-notifications";

const lastNotificationResponse = useLastNotificationResponse();

	useEffect(() => {
		if (
			status === Auth.LOGGED_IN &&
			appState === ApplicationState.ACTIVE &&
			currentIntercomNotification
		) {
			currentIntercomNotification?.type === "message"
				? Intercom.presentContent(
					IntercomContent.conversationWithConversationId(currentIntercomNotification?.data?.toString())
					)
				: setDeepLink(currentIntercomNotification.uri);
			setCurrentIntercomNotification(null);
		}
	}, [ status, appState, currentIntercomNotification]);

	useEffect(() => {
		const data =
			Platform.OS === "ios"
					lastNotificationResponse?.notification?.request?.trigger?.payload
				: lastNotificationResponse?.notification?.request?.content?.data;
		if (
			(Platform.OS === "ios" && !!data?.intercom_push_type) ||
			(Platform.OS === "android" && data?.receiver === "intercom_sdk")
		) {
			setCurrentIntercomNotification({
				type: data?.uri ? "deeplink" : "message",
				data: data?.uri || data?.icm_cid || data?.conversation_id
			});
		}
	}, [lastNotificationResponse]);

I tried on a real iOS device and on an Android simulator.
I'm quite disappointed tbh regarding this big update after 1 year of using the old plugin. Do you have better ideas @uddish ?

[yonitou]

Up :)

[raffiot]

Hello!
I'm having the same issues, everything works well on iOS but on Android my push notifications are not working.
Here is my project configuration:

// app.config.ts

{
  expo: {
    android: {
      googleServicesFile: './google-services.json',
      ...
    },
    plugins: [
      [
        '@intercom/intercom-react-native',
        {
          iosApiKey: process.env.EXPO_PUBLIC_INTERCOM_IOS_API_KEY,
          androidApiKey: process.env.EXPO_PUBLIC_INTERCOM_ANDROID_API_KEY,
          appId: process.env.EXPO_PUBLIC_INTERCOM_APP_ID,
          intercomRegion: 'US',
        },
      ],
    ]
  }
}

// package.json
{
  "dependencies": {
    "@intercom/intercom-react-native": "^7.2.1",
    "expo": "^51.0.0",
    "react-native": "0.74.5",
    ...
  }
}

Configuration in Intercom settings

Our setup was working previously with our own custom plugin.