Can Rocket.Chat LiveChat be integrated into React Native project?

Development
1

(Moving here from Can this be integrated into React Native project? · Issue #81 · RocketChat/Rocket.Chat.Livechat · GitHub)

Hi, I’m sorry for the stupid question. I am new to React Native and I would like to add the rocket.chat liveChat into the existing RN project. Will this work with React Native?

@douglas.gubert:
Hi. I’m assuming it would be possible if you integrated it in a WebView, in which case you will probably have to host your LiveChat somewhere out there in the interwebs.

2

Hi @douglas.gubert, do you think adding “@rocket.chat/sdk” dependency into the react native project will work?

3

I guess it will work. We use it in our own React Native project, if I’m not mistaken. Although it’s not gonna help you with the LiveChat Integration

4

because it is not supported? can you share why its not going to work with liveChat integration?

5

As per the documentation here, to install LiveChat you have to copy the code generated by your Rocket.Chat instance and paste it into your website. It is supposed to work on the web, that’s why I thought it would work with the WebView, but looking into it a little more now, I see a WebView wouldn’t really help that much.

@tasso.evangelista do you know if there’s any LiveChat integration with React Native right now?

6

It can work through a WebView doing some tweaks around CORS or embedding https://<your.instance>/livechat directly.
You can use @rocket.chat/sdk too, but it is kind of too low level for a quick and easy integration, specially for managing things like triggers and custom fields. It’s totally possible, but you will have to implement the handling of these things using the SDK.
We are trying to keep the web APIs and the core of the new Livechat client as isolated as possible, therefore, if the community really wants it, an isomorphic version can come into our plans.

1 Like
7

Hi @tasso.evangelista, I managed to install the @rocket.chat/sdk as dependency to RN project however I’m stuck with this error: Unable to resolve module 'paho-mqtt/src/paho-mqtt' from 'node_modules/@rockt.chat/sdk/lib/drivers/mqtt.js': Module 'paho-mqtt/src/paho-mqtt' does not exist in the Haste module app.

8

I’m using this version btw "@rocket.chat/sdk": "^1.0.0-alpha.14"

9

@jmagdada Which npm/yarn version are using? The most recent ones should resolve this dependency as a git repository on GitHub.

10

I’m using npm version 5.6.0

11

I’m using Node 10, so my npm version is 6.4.1. Use something like nvm or n to run an updated version, it should resolve this dependency correctly.

12

Thanks @tasso.evangelista. I’ll try update mine and will get back if it works or not :slight_smile:

13

Hi @tasso.evangelista, I have updated my node to the most latest one and my npm version now is 6.5.0 but i still got the error. Maybe I’m doing wrong. Hope you can help me investigate.

this is my package.json:

{
  "name": "rocketChatRN",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@rocket.chat/sdk": "^1.0.0-alpha.14",
    "react": "16.6.3",
    "react-native": "0.57.8"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

and I am following how it is implemented in Rocket.Chat.Livechat so I created api.js too:

import Livechat from '@rocket.chat/sdk/lib/clients/Livechat'
const livechat = new Livechat({ host:'[my-host]', protocol: 'ddp' })

export default livechat;
14

Looks like I have to ask @guilherme.gazzo to review and merge this. :man_facepalming:
Maybe a work around for is to include the following dependency in package.json: "paho-mqtt": "eclipse/paho.mqtt.javascript#master".

15

I have added "paho-mqtt": "eclipse/paho.mqtt.javascript#master" but still no luck.

maybe I’ll just wait for the merge. :slight_smile:

16

Hi @tasso.evangelista, happy new year!.. just want to check if the fix is merged already? :slight_smile:

1 Like
17

@jmagdada @rocket.chat/sdk@1.0.0-alpha.15 is out!

1 Like
18

cool… I’ll try that out! thanks :slight_smile:

19

hi @tasso.evangelista I still got the error. :frowning:

20

That’s odd. Look how it worked for me: https://www.youtube.com/watch?v=a7qUt9ejS7A. And look at the versions I’m using, simply Node 8. Maybe you have a corrupted yarn/npm cache?