Skip to content

Malaa-tech/react-native-intercom-expo-config-plugin

Repository files navigation

This repo is a continuation on the work of https://github.com/expo/config-plugins since it is not updated frequently

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

Versions < 1.10

Versions < 1.3

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

With expo install

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

Without expo install

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

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

Open your app.json and update your plugins section:

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

Configuration

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

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

Other configuration options

Add a custom photo usage description
{
  "plugins": [
    [
      "react-native-intercom-expo-config-plugin",
      {
        //...
        "iosPhotoUsageDescription": "Upload to support center"
      }
    ]
  ]
}
Add EU Region support

On iOS Add to app.json

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

On Android

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

On iOS

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

On Android

{
  "plugins": [
    [
      "react-native-intercom-expo-config-plugin",
      {
        //...
        "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

License

MIT