React Native widget has major UI issues (keyboard overlap, input positioning) – need demo or clearer integration guide

Hi,

I’ve been trying to integrate the Chatwoot React Native widget into an Expo-based React Native app, but I’m running into multiple usability issues that make it very difficult to use in a real application.

### Main issues

* **Keyboard overlap issues**

* When the keyboard opens, it overlaps the message input field.
* The layout does not adjust properly, making it hard or impossible to see what the user is typing.

* **Input field positioning**

* The message input (type widget) at the bottom is not anchored correctly.
* It either gets pushed out of view or overlaps with messages when the keyboard is active.

* **Message layout problems**

* Messages do not resize or reposition correctly when the keyboard is open.
* In some cases, content becomes partially hidden.

### Environment

* React Native (Expo)
* Latest version of the widget (from this repo)

### What would help

At the moment, it’s unclear what the recommended integration approach is. It would be very helpful if you could provide:

* A **minimal working demo app** (preferably Expo-based)
* Clear guidance on:

* Handling keyboard behavior (`KeyboardAvoidingView`, safe areas, etc.)
* Recommended layout structure when embedding the widget
* Any required wrappers or configuration for proper rendering

Right now, it’s difficult to determine whether the issues are due to incorrect integration or limitations in the widget itself.

Thanks in advance!

Start by reproducing the widget in an Expo-based React Native app, focusing on keyboard opening, input positioning, and message visibility. Compare behavior with the suggested KeyboardAvoidingView and safe-area integration patterns. Done means the input remains visible and anchored, messages reflow without being hidden, and the recommended embedding setup is documented with a minimal demo.

Written by the indexing model from the issue text.