Message Input for PubNub Chat Components for React Native

Allows users to compose messages using text and emojis and automatically publish them on PubNub channels upon sending.


Check the preview of a sample Message Input component and its source code.

Try it out by sending a test message as Sue Flores (default user). Check also how your messages pile up on the message list.

Message Input


You can configure the component using these parameters:

ParameterTypeDefault valueDescription
placeholder?string"Send message"Option to set a placeholder message to display in the text window.
draftMessage?stringn/aOption to set a draft message to display in the text window.
senderInfo?booleanfalseOption to attach sender data directly to each message. Enable it for high-throughput environments. This is an alternative to providing a full list of users directly into the Chat provider.
typingIndicator?booleanfalseOption to enable/disable firing the typing events when a user is typing a message.
fileUpload?"image" | "all"n/aOption to enable/disable the internal file upload capability.
disabled?booleanfalseOption to disable the input from composing and sending messages.
hideSendButton?booleanfalseOption to hide the Send button.
sendButton?JSX.Element | string<AirplaneIcon />Custom UI component to override default display for the Send button.
onChange?(value: string) => voidn/aCallback to handle an event when the text value changes.
onBeforeSend?(value: MessagePayload) => MessagePayloadn/aCallback to modify message content before sending it. This only works for text messages, not files.
onSend?(value: MessagePayload | File) => voidn/aCallback for extra actions after sending a message.
extraActionsRenderer?() => Elementn/aOption to provide an extra actions renderer to add custom action buttons to the input.
style?MessageInputStylen/aOption to provide a custom StyleSheet for the component. It will be merged with the default styles.