@servisbot/react-native-messenger v1.0.4

React Native Messenger

A standalone library for including the ServisBot messenger in a React Native app. Available from our private npm registry as '@servisbot/react-native-messenger'. It can be installed with npm install @servisbot/react-native-messenger --save (assuming you have access to the private npm regsitry)

How to use the component

Import the component in your app:

import Messenger from '@servisbot/react-native-messenger';

It accepts a config prop:

<Messenger config={config} />

The config prop expects an object which contains the configuration for Servisbot.

Some config options are:

• organization:string:required
• correlationId:string
• context:object
• displayHeader:boolean

Your containing element should have a set height or a style property of flex: 1. The Messenger will expand to fill whatever space it can. As a result if its container has no height set, it will collapse.

How to publish updates to NPM

• You'll need to have an .npmrc file in the root directory with authtoken for the ServisBot npm registry.
• Run npm publish. @servisbot/ in the package name ensures that it will be published to our private registry.

Running the sample app

In the sample-app directory you can see how you would include this in a project.

• After cloning the repo locally, run cd sample-app, npm install and then npm start.
• If you see the following react native error

Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288

Run

sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288

A few things to note:

• As part of the start command, we're copying the lib directory from the root of react-native-messenger into the root of sample-app. In a real-world app this won't be necessary as react-native-messenger will be coming from the private npm registry, this is just for the purposes of developing locally.

Running it on an emulator

• For iOS you'll need to install Xcode. Then run npm start in the sample-app directory and press i.
• For android you'll need to install Android Studio and follow the instructions here. Then run npm start in the sample-app directory and press a.

Running on an actual device

• You'll need to install the expo app on the device.
• After running npm start you'll see instructions in the terminal on how to run in an actual device. For android devices you can open the expo app and scan the QR code that is rendered in the command line. For iOS devices follow the instructions to get the expo link texted/emailed to your device.

Debugging

• On the iOS emulator hit cmd + d to show the dev menu, you can launch a debugger from there.
• On the android emulator hit cmd + m to show the dev menu.
• On an actual device, shake the device to show the dev menu.

If you want to actually inspect inside a webview you can do this on the iOS emulator.

• In Safari, go to preferences -> advanced and check 'show develop menu in menu bar'
• Then go to develop in your top bar, select the simulator from the dropdown and then select servisBot Web Messenger

Gotchas/Issues

• We weren't able to inspect the webview on the android emulator. According to this the webview needs to be configured to allow for debugging, but I think we would have to eject from expo/create react native app to be able to do this.
• Neither were we able to inspect the webview on an actual iOS device, which was a problem as the behaviour differed significantly between the iOS emulator and the device.
• We didn't figure out how to have the messenger library point to our local version of the lightning project. Which meant that in order to test changes in lightning on native, we had to deploy to lower.
• The bundler for react native (Metro) is a bit temperamental, we saw this vague error quite a few times Metro bundler has encountered an internal error. If you see this I would suggest
  • Running killall node -9
  • Then running npm start -- --reset-cache
  • If that doesn't work, try removing your node modules (rm -rf ./node_modules/) and then running npm install again.
• There's a narrow range of compatability between react native versions and expo versions (see here), so it's best to lock to specific version numbers in the package.json rather than using carets(matches patch and minor updates) or tildes(matches patch updates)

ServisBot, Copyright 2018