Expo Config Plugin @intercom/intercom-react-native

An unofficial Expo config plugin for easily setting up React Native Intercom with expo dev clients

Installation

Prerequisites

Versions >= 1.10

• App project using Expo SDK 48.
• Installed [email protected] or later.
• Installed @intercom/[email protected]
• For Android it Intercom requires compileSdkVersion and targetSdkVersion to be set on 33 or higher. expo-build-properties is used to set it

Versions < 1.10

• App project using Expo SDK 45.
• Installed [email protected] or later.
• Installed @intercom/[email protected]
• For Android it Intercom requires compileSdkVersion and targetSdkVersion to be set on 33 or higher. expo-build-properties is used to set it

Versions < 1.3

• App project using Expo SDK 44.
• Installed [email protected] or later.
• Installed @intercom/intercom-react-native

With expo install

expo install config-plugin-react-native-intercom expo-build-properties

Without expo install

# using yarn
yarn add config-plugin-react-native-intercom expo-build-properties

# using npm
npm install config-plugin-react-native-intercom expo-build-properties

Open your app.json and update your plugins section:

{
  "plugins": [
    [
      "expo-build-properties",
      { "android": { "compileSdkVersion": 33, "targetSdkVersion": 33 } }
    ],
    "config-plugin-react-native-intercom"
  ]
}

Configuration

The plugin needs your intercom api key so that it can communicate with the intercom application.

{
  "plugins": [
    [
      "config-plugin-react-native-intercom",
      {
        "iosApiKey": "<your-api-key>",
        "androidApiKey": "<your-api-key>",
        "appId": "<your-app-id>"
      }
    ]
  ]
}

Other configuration options

Add a custom photo usage description

{
  "plugins": [
    [
      "config-plugin-react-native-intercom",
      {
        //...
        "iosPhotoUsageDescription": "Upload to support center"
      }
    ]
  ]
}

Add EU Region support

On iOS Add to app.json

{
  "ios": {
    "infoPlist:":{
        "IntercomRegion": "EU"
      }
  }
}

On Android

{
  "plugins": [
    [
      "config-plugin-react-native-intercom",
      {
        //...
        "intercomEURegion": "true"
      }
    ]
  ]
}

Enable push notifications

On iOS

{
  "plugins": [
    [
      "config-plugin-react-native-intercom",
      {
        //...
        "isPushNotificationsEnabledIOS": true
      }
    ]
  ]
}

On Android

{
  "plugins": [
    [
      "config-plugin-react-native-intercom",
      {
        //...
        "isPushNotificationsEnabledAndroid": true,
        "androidIcon": "<string>" //Customize the icon for intercom push notifications from the intercom default
      }
    ]
  ]
}

Android push notifications

If you want push notifications to fire when new messages are sent in a conversation, it is necesssary to create a push notification channel for these. Push notifications for new conversations require no additoonal setup.

useEffect(() => {
  if (Platform.OS === 'android') {
    Notifications.setNotificationChannelAsync('intercom_chat_replies_channel', {
      name: 'Intercom Replies Channel',
      description: 'Channel for intercom replies',
      importance: Notifications.AndroidImportance.MAX,
    })
  }
}, [])

Building and running

You can either:

• use expo prebuild or expo run:android/expo run:ios to update your native projects,
• use EAS Build to build your development client.
  • Keep in mind that if you are using environment variables for androidApiKey, iosApiKey and appId in your app.config.js, you need to configure these secrets with eas secret:create or at Expo.

Contributing

Contributions are very welcome! The package uses expo-module-scripts for most tasks. You can find detailed information at this link.

Please make sure to run yarn build/yarn rebuild to update the build directory before pushing. The CI will fail otherwise.

Credits

• the Expo team

• https://github.com/expo/config-plugins

License

MIT