Answered

Using intercom with Expo

  • 1 August 2023
  • 5 replies
  • 747 views

Badge

Hi Intercom

I installed @intercom/intercom-react-native with my expo sdk, working on iOS.

I used expo prebuild to be able to add intercom following the installation instruction provided for iOS, and it’s working correctly using iOS simulator or a dev environment.

But when we distributed the release using Testflight, the app crash while initializing Intercom. It is not happening when we deactivate intercom.

Please find below my settings : 

Package.json

{

"dependencies": {
"@expo/webpack-config": "^0.17.2",
"@gorhom/bottom-sheet": "^4",
"@hookform/resolvers": "^2.9.10",
"@intercom/intercom-react-native": "^5.1.0",
"@notifee/react-native": "^7.8.0",
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-native-community/datetimepicker": "6.5.2",
"@react-native-firebase/app": "18.0.0",
"@react-native-firebase/messaging": "18.0.0",
"@react-navigation/material-bottom-tabs": "^6.2.15",
"@react-navigation/native": "^6.1.1",
"@react-navigation/native-stack": "6.6.1",
"@reduxjs/toolkit": "^1.9.1",
"@shopify/flash-list": "1.3.1",
"@shopify/react-native-skia": "0.1.192",
"@types/react": "~18.0.24",
"@types/react-native": "~0.70.6",
"axios": "1.2.1",
"config-plugin-react-native-intercom": "^1.10.1",
"date-fns": "^2.29.3",
"expo": "~47.0.14",
"expo-build-properties": "~0.4.1",
"expo-camera": "~13.1.0",
"expo-dev-client": "~2.0.1",
"expo-image-picker": "~14.0.2",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "~1.4.2",
"expo-system-ui": "~2.0.1",
"expo-updates": "~0.15.6",
"i18n": "^0.15.1",
"i18next": "^21.9.2",
"intl": "^1.2.5",
"luxon": "^3.2.1",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-hook-form": "7.44.3",
"react-i18next": "^11.18.6",
"react-native": "0.70.8",
"react-native-animated-splash-screen": "^2.0.5",
"react-native-dotenv": "^3.4.7",
"react-native-gesture-handler": "~2.9.0",
"react-native-gifted-chat": "^2.0.1",
"react-native-otp-textinput": "^1.0.1",
"react-native-paper": "^5.8.0",
"react-native-reanimated": "~3.1.0",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "4.5.1",
"react-native-screens": "~3.20.0",
"react-native-signature-canvas": "^4.5.0",
"react-native-skia-gesture": "^0.1.7",
"react-native-svg": "13.4.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.9",
"react-native-webview": "11.23.1",
"react-native-wheely": "^0.6.0",
"react-redux": "^8.0.5",
"styled-components": "^5.3.6",
"thenby": "^1.3.4",
"typescript": "^4.6.3",
"yup": "^0.32.11"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@changesets/cli": "^2.26.0",
"@types/luxon": "^3.2.0",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
"eslint": "^7.20.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^2.4.0",
"eslint-plugin-i18next": "^6.0.0-2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react-i18n": "^1.0.3",
"eslint-plugin-unused-imports": "^1.1.5",
"i18next-scanner": "^4.0.0",
"prettier": "2.2.1",
"swagger-typescript-api": "^12.0.2"
},
"resolutions": {
"@react-native-firebase/messaging": "18.0.0",
"@types/react": "~18.0.24",
"@babel/core": "^7.20.2",
"babel-loader": "^8.3.0"
},
"private": true
}

podfile:

  - Intercom (15.0.1)
- intercom-react-native (5.1.1):
- Intercom (~> 15.0.0)
- React-Core

javascript

import { useEffect, useState } from 'react'
import Intercom, { UserAttributes } from '@intercom/intercom-react-native'
import AsyncStorage from '@react-native-async-storage/async-storage'

export const useIntercom = (intercomUser?: UserAttributes, enabled: boolean = true) => {

const connect = async () => {
try {
await Intercom.logout()

const response = await Intercom.loginUserWithUserAttributes(intercomUser)

console.log('call intercom', response)
setIsConnected(response)

Intercom.getUnreadConversationCount().then((value) => {
console.log('new message from intercom', value)
setUnreadMessages(value)
})
} catch (error) {
console.log('error', error)
}
}

useEffect(() => {
if (isConnected) {
console.log('intercom connected')

return
}
if (enabled) {
connect()
}
}, [intercomUser, isConnected, enabled])


}


And here is the log error
 


its only happening when intercom is activate, if not, the app works correctly.

Can you help us on this, thanks in advance for your help 


 

icon

Best answer by Racheal 8 August 2023, 03:05

View original

5 replies

Badge

Hello,

I would appreciate some help on this issue, or does someone had the same problem ?

Thanks a lot

Badge

Bump

Userlevel 4
Badge

Hey David Racheal from the support engineer team here👋 

 

Issues like these are best handled 1:1 so we can take a better look at your workspace settings. I’ve gone ahead and forwarded this into our support team to help you out!

Badge

thanks @Racheal 

Lets settle a meeting soon, your help will be very usefull !
Will you PM me ?

Thanks a lot
 

I was able to integrate intercom with my expo 50 app by writing my own custom plugin. Here is a minimal repo with the mod-plugin.

Reply