{"id":4790,"url":"https://github.com/tinycreative/react-native-intercom","last_synced_at":"2025-08-04T02:31:51.554Z","repository":{"id":38008868,"uuid":"38837128","full_name":"tinycreative/react-native-intercom","owner":"tinycreative","description":"React Native wrapper for Intercom.io","archived":false,"fork":false,"pushed_at":"2021-12-09T23:52:04.000Z","size":310,"stargazers_count":405,"open_issues_count":8,"forks_count":279,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-27T22:05:11.645Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinycreative.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-09T18:11:31.000Z","updated_at":"2024-10-16T18:27:47.000Z","dependencies_parsed_at":"2022-09-09T16:22:22.291Z","dependency_job_id":null,"html_url":"https://github.com/tinycreative/react-native-intercom","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinycreative%2Freact-native-intercom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinycreative%2Freact-native-intercom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinycreative%2Freact-native-intercom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinycreative%2Freact-native-intercom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinycreative","download_url":"https://codeload.github.com/tinycreative/react-native-intercom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228587347,"owners_count":17941442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:23.753Z","updated_at":"2024-12-07T09:31:03.616Z","avatar_url":"https://github.com/tinycreative.png","language":"Java","readme":"# Official Package\n\nIntercom has released an official package for React Native. Please use it.\n\n[https://github.com/intercom/intercom-react-native](https://github.com/intercom/intercom-react-native)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n# react-native-intercom [DEPRECATED]\nReact Native wrapper for Intercom.io. Based off of [intercom-cordova](https://github.com/intercom/intercom-cordova)\n\n# Installation Guide\n\n1. [Install Intercom for iOS](https://developers.intercom.com/installing-intercom/docs/ios-installation) via whichever method you prefer.\n\n    More recently others have had more success [Installing Intercom Manually](https://developers.intercom.com/installing-intercom/docs/ios-installation#section-option-3-install-intercom-manually).\n\n    In the past, [installing via CocoaPods](https://developers.intercom.com/installing-intercom/docs/ios-installation#section-option-1-cocoapods) was recommended.\n\n\n1. Install `react-native-intercom`:\n\n    ```bash\n    yarn add react-native-intercom  # or npm install react-native-intercom\n    ```\n\n1. Link native dependencies\n\n    ```bash\n    react-native link react-native-intercom\n    ```\n\n1. Manually Link the library in Xcode ([Linking librarys on iOS](https://facebook.github.io/react-native/docs/linking-libraries-ios.html))\n\n    1. Open Xcode -\u003e Right click \"[Your Project Name]/Libraries\" folder and select \"Add File to [Your Project Name]\" -\u003e Select `RNIntercom.xcodeproj` located in `node_modules/react-native-intercom/iOS`.\n    1. Open \"General Settings\" -\u003e \"Build Phases\" -\u003e \"Link Binary with Libraries\" and add `libRNIntercom.a`\n\n1. Config for iOS ([intercom-ios](https://github.com/intercom/intercom-ios))\n\n    1. Add `#import \"Intercom/intercom.h\"` with the other imports at the top of `ios/YOUR_PROJECT/AppDelegate.m`.\n    1. Initialize Intercom in `ios/YOUR_PROJECT/AppDelegate.m` with your Intercom iOS API Key and your Intercom App ID:\n\n        ```obj-c\n        - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\n\n            // Intercom\n            [Intercom setApiKey:@\"YOUR_IOS_API_KEY_HERE\" forAppId:@\"YOUR_APP_ID_HERE\"];\n\n        }\n        ```\n\n    1. Optional, [Intercom's documentation](https://github.com/intercom/intercom-ios/blob/1fe2e92c4913e4ffef290b5b62dac5ecef74ea1d/Intercom.framework/Versions/A/Headers/Intercom.h#L65) suggests adding the following call in order to receive push notifications for new messages:\n\n        ```obj-c\n        - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {\n\n            // Intercom\n            [Intercom setDeviceToken:deviceToken];\n\n        }\n        ```\n\n    1. Optional, [allow access to photos on iOS](https://developers.intercom.com/docs/ios-installation#section-step-2-update-infoplist). Open `Info.plist` in Xcode and add a new key \"Privacy - Photo Library Usage Description\". Or alternately, open `ios/YOUR_PROJECT/Info.plist` and add:\n\n        ```xml\n        \u003cdict\u003e\n\n          ...other configuration here...\n\n          \u003ckey\u003eNSPhotoLibraryUsageDescription\u003c/key\u003e\n          \u003cstring\u003eSend photos to help resolve app issues\u003c/string\u003e\n\n          ...other configuration here...\n\n        \u003c/dict\u003e\n        ```\n\n1. Config for Android ([intercom-android](https://github.com/intercom/intercom-android))\n\n    1. In `android/app/src/main/java/com/YOUR_APP/app/MainApplication.java`, add the following code in the respective sections of the file using your Intercom Android API Key and Intercom App ID:\n\n        ```java\n\n        // ...other configuration here...\n\n        import com.robinpowered.react.Intercom.IntercomPackage;\n        import io.intercom.android.sdk.Intercom;\n\n        public class MainApplication extends Application {\n\n          @Override\n          public void onCreate() {\n            super.onCreate();\n            Intercom.initialize(this, \"YOUR_ANDROID_API_KEY_HERE\", \"YOUR_APP_ID_HERE\");\n\n            // ...other configuration here...\n\n          }\n\n          public List\u003cReactPackage\u003e getPackages() {\n              // ...other configuration here...\n\n              packages.add(new IntercomPackage());\n\n              // ...other configuration here...\n          }\n        }\n        ```\n\n    1. In `android/build.gradle` add `maven { url \"https://maven.google.com\" }` ([h/t](https://github.com/tinycreative/react-native-intercom/issues/153#issuecomment-348602868)):\n\n        ```gradle\n        allprojects {\n          repositories {\n\n            //...other configuration here...\n\n            maven { url \"https://maven.google.com\" }\n          }\n        }\n        ```\n\n    1. Decide which type of push messaging you want to install, and add choosen method to `android/app/build.gradle`.\n\n        1. If you'd rather not have push notifications in your app, you can use this dependency:\n\n            ```gradle\n            dependencies {\n                implementation 'io.intercom.android:intercom-sdk-base:5.+'\n            }\n            ```\n\n        1. If \"Firebase Cloud Messaging(FCM)\", then:\n            ```gradle\n            dependencies {\n\n              //...other configuration here...\n\n              implementation 'io.intercom.android:intercom-sdk-base:9.+'\n              implementation 'io.intercom.android:intercom-sdk:9.+'\n            }\n            ```\n\n            If you're already using FCM in your application you'll need to extend `FirebaseMessagingService` to handle Intercom's push notifications (refer to [Using Intercom with other FCM setups](https://developers.intercom.com/installing-intercom/docs/android-fcm-push-notifications#section-step-7-using-intercom-with-other-fcm-setups-optional))\n\n            ### Here's an example if you're using [react-native-firebase](https://github.com/invertase/react-native-firebase) as your existing FCM setup:\n\n            I. Add a new file if you don't have one (`android/app/src/main/java/com/YOUR_APP/MainMessagingService.java`)\n\n            ```java\n            package com.YOUR_APP;\n            import io.invertase.firebase.messaging.*;\n            import android.content.Intent;\n            import android.content.Context;\n            import io.intercom.android.sdk.push.IntercomPushClient;\n            import io.invertase.firebase.messaging.ReactNativeFirebaseMessagingService;\n            import com.google.firebase.messaging.RemoteMessage;\n            import android.util.Log;\n            import java.util.Map;\n\n            public class MainMessagingService extends ReactNativeFirebaseMessagingService {\n                private static final String TAG = \"MainMessagingService\";\n                private final IntercomPushClient intercomPushClient = new IntercomPushClient();\n\n                @Override\n                public void onMessageReceived(RemoteMessage remoteMessage) {\n                    Map message = remoteMessage.getData();\n\n                    if (intercomPushClient.isIntercomPush(message)) {\n                        Log.d(TAG, \"Intercom message received\");\n                        intercomPushClient.handlePush(getApplication(), message);\n                    } else {\n                        super.onMessageReceived(remoteMessage);\n                    }\n                }\n            }\n            ```\n\n            II. Then add the following code to `android/app/src/main/AndroidManifest.xml`:\n            \n            ```xml\n            \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n            \u003cmanifest package=\"com.YOUR_APP\"\n\n              ...other configuration here...\n\n            \u003e\n              \u003capplication\n\n                ...other configuration here...\n\n                xmlns:tools=\"http://schemas.android.com/tools\"\n              \u003e\n\n                \u003c!-- ...other configuration here... --\u003e\n                \u003c!-- ...ADD THE SERVICE BELOW... --\u003e\n                \u003cservice\n                  android:name=\".MainMessagingService\"\n                  android:enabled=\"true\"\n                  android:exported=\"true\"\u003e\n                    \u003cintent-filter\u003e\n                      \u003caction android:name=\"com.google.firebase.MESSAGING_EVENT\" /\u003e\n                    \u003c/intent-filter\u003e\n                \u003c/service\u003e\n              \u003c/application\u003e\n            \u003c/manifest\u003e\n            ```\n            \n            * make sure you have only one service intent with action com.google.firebase.MESSAGING_EVENT\n\n1. Import Intercom and use methods\n\n    ```javascript\n    import Intercom from 'react-native-intercom';\n    // or…\n    // var Intercom = require('react-native-intercom');\n    Intercom.registerIdentifiedUser({ userId: 'Bob' });\n    Intercom.logEvent('viewed_screen', { extra: 'metadata' });\n\n    //...rest of your file...\n\n    ```\n\n    Note that calling `Intercom.registerIdentifiedUser({ userId: 'Bob' })` (or `Intercom.registerUnidentifiedUser()`) is required before using methods which require that Intercom know the current user… such as `Intercom.displayMessageComposer()`, etc.\n\n# Usage\n\n### Import or Require the module\n\n```javascript\nimport Intercom from 'react-native-intercom';\n```\n\nor\n\n```javascript\nvar Intercom = require('react-native-intercom');\n```\n\n### Log an event\n```javascript\nIntercom.logEvent('viewed_screen', { extra: 'metadata' });\n```\n\n### Register a Logged In user\n```javascript\nIntercom.registerIdentifiedUser({ userId: 'bob' });\n```\n\n### Register Unidentified user\n```javascript\nIntercom.registerUnidentifiedUser();\n```\n\n### Register a Logged In user and post extra metadata\n```javascript\nIntercom.registerIdentifiedUser({ userId: 'bob' })\nIntercom.updateUser({\n    // Pre-defined user attributes\n    email: 'mimi@intercom.com',\n    user_id: 'user_id',\n    name: 'your name',\n    phone: '010-1234-5678',\n    language_override: 'language_override',\n    signed_up_at: 1004,\n    unsubscribed_from_emails: true,\n    companies: [{\n        company_id: 'your company id',\n        name: 'your company name'\n    }],\n    custom_attributes: {\n        my_custom_attribute: 123\n    },\n});\n```\n\n### Set User Hash for Identity Validation (optional)\n```javascript\nIntercom.setUserHash(hash_received_from_backend)\n```\n\n### Sign Out\n```javascript\nIntercom.logout()\n```\n\n### Show Message Composer\n```javascript\nIntercom.displayMessageComposer();\n```\n\n### Show Message Composer with an Initial Message\n```javascript\nIntercom.displayMessageComposerWithInitialMessage('Initial Message');\n```\n\n### Display Latest Conversation \n```javascript\nIntercom.displayMessenger();\n```\n\n### Display Conversations List\n```javascript\nIntercom.displayConversationsList();\n```\n\n### Display Help Center\n```javascript\nIntercom.displayHelpCenter();\n```\n\n### Set Bottom Padding\n```javascript\nIntercom.setBottomPadding(64);\n```\n\n### Display Help Center\n```javascript\nIntercom.displayHelpCenter();\n```\nNote that before calling `Intercom.displayHelpCenter()` it is required to enable Help Center in your Intercom settings.\n\n### Present a Carousel\n```javascript\nIntercom.presentCarousel(carouselID);\n```\nNote that before calling `Intercom.presentCarousel(carouselID)` it is required to enable carousels and create a carousel in your Intercom settings.\n\n### Listen for Unread Conversation Notifications\n```javascript\ncomponentDidMount() {\n  Intercom.addEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange)\n}\n\ncomponentWillUnmount() {\n  Intercom.removeEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);\n}\n\n_onUnreadChange = ({ count }) =\u003e {\n  //...\n}\n```\n### Other Notifications\n```javascript\n    // The window was hidden\n    Intercom.Notifications.WINDOW_DID_HIDE\n\n    // The window was shown\n    Intercom.Notifications.WINDOW_DID_SHOW\n```\n\n### Send FCM token directly to Intercom for push notifications (Android only)\n```\nFirebase.messaging().getToken()\n  .then((token) =\u003e {\n    console.log('Device FCM Token: ', token);\n    Intercom.sendTokenToIntercom(token);\n});\n```\n","funding_links":[],"categories":["Components"],"sub_categories":["Integrations"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinycreative%2Freact-native-intercom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinycreative%2Freact-native-intercom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinycreative%2Freact-native-intercom/lists"}