React Native Chat Input

The rn-chat-input package is a simple and flexible chat input component for React Native apps. It lets users send text messages and upload media from the gallery or file picker. It also includes file previews, image viewer, and easy file removal before sending.

React Native Chat Input Example

Installation

Download the package with npm or yarn

npm install rn-chat-input

In order for rn-chat-input to work, you also need to install the following dependencies:

npm install react-native-image-picker react-native-document-picker

Usage

import ChatInput from 'rn-chat-input';

 <ChatInput showUploadOption={true} onSend={handleSend} sendText={sendText} placeHolderText={placeHolderText} images={images} defaultStyleValues={defaultStyles}/>

Props

All the ChatInput props can be passed.

| Prop | Type | Description
| -------------------------------- | -------------------------------- | -------------------------------- | showUploadOption | boolean | Determines whether the upload option is shown. Set to true to enable uploads|
| defaultStyleValues | DefaultStyleTypes | Custom styles for different parts of the component | images | ChatInputImages | Allows customization of icons (attach, close). | sendText | string | Text to display on the send button | placeHolderText | string | Placeholder text shown in the input field. | onSend | (messages: Message[]) => void | Callback fired when messages are sent.

DefaultStyle Props

| Key | Type | Description | -------------------------------- | -------------------------------- | -------------------------------- | containerStyle | ViewStyle | Style for the overall input container. | inputStyle | TextStyle | Style for the text input field. | buttonStyle | ViewStyle | Style for the send button container. | buttonTextStyle | TextStyle | Style for the send button text. | uploadButtonStyle | ViewStyle | Style for the upload button. | uploadIconStyle | ImageStyle | Style for the upload icon image. | previewContainerStyle | ViewStyle | Style for the preview items container. | previewImageStyle | ViewStyle | Style for previewed images. | previewFileStyle | ViewStyle | Style for previewed file blocks. | modalStyle | ViewStyle | Style for the modal container. | modalOptionStyle | TextStyle | Style for modal options text. | cancelOptionStyle | TextStyle | Style for cancel option text.