How to install React Native Intercom for 0.63+

I ran into many issues with this library. Here is the some of them:

• Build input file cannot be found
• React/RCTDefines.h file not found
• Intercom/Intercom.h not found
• Library not found for -lCocoaAsyncSocket
• Use of undeclared identifier ‘intercom’ or ‘Intercom’
• Or this monster:

If you are running into any of these issues, you are in right place!

First you need to disable autolinking for this package on iOS. For doing this, create “react-native.config.js” file at the root of your project. Then, add these lines:

module.exports = {
  dependencies: {
    'react-native-intercom': {
      platforms: {
        ios: null,
      },
    },
  },
};

Then, use one of these comments to install the package:

yarn add react-native-intercom

or

npm i react-native-intercom

For iOS:

Next is manually installing the library. Here are the steps:

• Open xcworkspace file on Xcode > right click on “Libraries” folder >Add Files to “<your project>”
• Find react-native-intercom/iOS folder in node-modules folder, add RNIntercom.xcodeproject

Make sure you RNIntercom’s and project’s deployment target set to 10.0

Open Libraries > RNIntercom.xcodeproj > Select RNIntercom as target > Select Build Settings > Find Framework Search Paths and make sure you have these:

Find the Header Search Paths and make sure you have these:

My project was missing the last one:

${SRCROOT}/../../../ios/Pods/Headers

Select your project’s target > Link Binary with Libraries > Find and select “libRNIntercom.a”

Open Pods > Podfile > add this line

pod 'Intercom'

Now, you can run this command:

npx pod-install

Make sure only package installed is Intercom. If react-native-intercom is in the list, it means library is auto linked and you need to start from first step.

Next step is adding Intercom iOS keys to your AppDelegate.m file:

#import “Intercom/intercom.h”
// add this line to "didFinishLaunchingWithOptions" function
[Intercom setApiKey:@"<iosApiKey>" forAppId:@"<appId>"];

Note: Add #import line before #ifdef FB_SONARKIT_ENABLED, otherwise you will have issues while archiving the project.

iOS setup is done!!

For Android:

Add these line to app build.gradle dependencies:

dependencies {
   
    implementation 'io.intercom.android:intercom-sdk:5.+'
}

Change your project’s minSdkVersion in project build.gradle:

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

After syncing your project, add Intercom android keys to MainApplication.java

import io.intercom.android.sdk.Intercom;
// add this line to "onCreate" function
Intercom.initialize(this, "<androidApiKey>", "<appId>");

You can easily test by using these lines on your js file

import Intercom from 'react-native-intercom';
//add these wherever you want to trigger intercom
Intercom.registerIdentifiedUser({userId: 'id_' + Math.random()});
Intercom.displayMessageComposer();

You can use this project for reference.

That’s all folks!! Happy coding 🙂