papercups-io/chat-widget-native

Papercups chat widget for React Native/Expo

chat-widget-native's Issues

Unable to display in react-bottom-sheet

https://github.com/ahmdigital/react-native-sheets-bottom

Nothing is displayed when embedded.

Dark mode support

I expect most apps now to support dark mode, as it's pretty easy to do.
Would be great for Papercups chat widget to support this too - I imagine we could configure via the iframe query string, and either just set darkMode=true and you set the dark colour scheme, or we pass in options like backgroundColor, textColor, etc.

I'd fork the repo and implement myself if it wasn't implemented via an iframe.

Papercups not loading in device via Expo managed (works in Expo mode or simulator)

I'm going to document this as it took me some time to figure this out.

Root cause

Due to this error:
requireNativeComponent: "RNCWebView" was not found in the UIManager.

Solution

Install react-native-webview via expo install react-native-webview

UI elements slide up when keyboard opens?

Encountered this somewhat puzzling UI behaviour: when you start typing and the keyboard slides up, the header and previous messages slide up out of view too?
Would be great to keep as much context as possible for the user - is there a way to do this?

Note this is in React Native on iOS with Expo.

Before:

After:

Support callbacks

We currently support some callbacks (like onMessageReceived) in the web widget -- need to add these to the RN version as well.

(May need to leverage window.ReactNativeWebView.postMessage(data);)

Customer metadata not showing in web portal

I'm trying to have the customer's custom metadata show in the web portal. When a message is sent, the customer's external_id, email, and name are visible in the web portal, but not other metadata. However, when I log out and log back in my app, and I refresh the web portal's page, then the metadata appears.

I also notice that I'm getting the following TypeScript error when I try to add custom metadata:

Type '{ external_id: string; email: string; name: string; metadata: { email: string; isPaid: boolean; surgery: string; surgeryType: string; }; }' is not assignable to type 'CustomerMetadata'.
Object literal may only specify known properties, and 'metadata' does not exist in type 'CustomerMetadata'.ts(2322)

Tried to register two views with the same name RNCWebView

I have React Native WebView install on my expo project. I never used to get this error until I updated to React Native Webview 11.2.3. Is there a way to solve this problem?

Add prop for `scrollEnabled`

From Slack:

for the react native implementation of the chat, something that was a little annoying was the fact that a user could scroll the WebView so that it didn't feel 'native'. for my setup, I've added scrollEnabled={false} to the WebView and it behaves, imo, much better - maybe this can be added as a prop?

Replace accountId with token to match web API

The React widget has been updated to use token instead of accountId; would be great to have the native package following the same API.

Fix how we load library in `/example` directory

Not sure what's going on here, but the /example directory seems to be loading the wrong version of the library sometimes 🤔

Invariant Violation: Tried to register two views with the same name RNCWebView

I already have react-native-webview in my package.json and use it in my app, I believe this is why the error shows up. It disappears the moment I don't render the ChatWidget.

A solution that crosses my mind is not to add react-native-webview widgets package.json, but additionally just add to root package json as proprietary package so that this conflict doesn't happen.

The app works when I remove the react-native-webview from the inside of node_modules. 💪

ERROR Invariant Violation: Tried to register two views with the same name RNCWebView
(node:96746) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 change listeners added. Use emitter.setMaxListeners() to increase limit