/config-plugin-react-native-intercom

Expo plugin for adding @intercom/react-native-intercom using expo config plugins

Primary LanguageJavaScript

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.3

  • App project using Expo SDK 45.
  • Installed expo-cli@4.4.4 or later.
  • Installed @intercom/intercom-react-native@4.0.1
  • 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 expo-cli@4.4.4 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.

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

License

MIT