Message Input for PubNub Chat Components for React Native

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

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

Component

Check the source code of the Message Input component and its preview on the right.

Configurable parameters

The component source code contains additional parameters that are commented out. These parameters are optional and you can use them to configure the component layout to your liking. Refer to the Parameters section for details on their usage.

Try it out

Test the component as Sue Flores (default user):

1. Choose one of the Preview tabs and click Tap to Play for the Android and iOS emulators to have the sample component up and running.

2. Type in a message in the input field and send it.

3. Modify the source code of the component to your liking and see the changes live on the preview. For example, you can change the theme to dark or uncomment one of the configurable parameters to see how you can modify the component's default behavior.

Parameters

You can configure the component using these parameters:

Parameter	Default value	Description
placeholder? Type: string	"Send message"	Option to set a placeholder message to display in the text window.
draftMessage? Type: string	n/a	Option to set a draft message to display in the text window.
senderInfo? Type: boolean	false	Option 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? Type: boolean	false	Option to enable/disable firing the typing events when a user is typing a message.
fileUpload? Type: "image" | "all"	n/a	Option to enable/disable the internal file upload capability. It lets you send both text and file in one message.
fileModalRenderer? Type: JSX.Element | string	n/a	Option to override the default modal allowing to upload images and files.
filePreviewRenderer? Type: (file: File | UriFileInput) => JSX.Element | null	n/a	Callback to render the preview of the attached file.
disabled? Type: boolean	false	Option to disable the input from composing and sending messages.
sendButton? Type: JSX.Element | string	<AirplaneIcon />	Custom UI component to override default display for the Send button.
actionsAfterInput? Type: boolean	false	Option to move action buttons (eg. file upload icon) to the right of the text input.
onChange? Type: (value: string) => void	n/a	Callback to handle an event when the text value changes.
onBeforeSend? Type: (value: MessagePayload) => MessagePayload	n/a	Callback to modify message content before sending it. This only works for text messages, not files.
onSend? Type: (value: MessagePayload | File | UriFileInput) => void	n/a	Callback for extra actions after sending a message.
extraActionsRenderer? Type: () => JSX.Element	n/a	Option to provide an extra actions renderer to add custom action buttons to the input.
style? Type: MessageInputStyle	n/a	Option to provide a custom StyleSheet for the component. It will be merged with the default styles.
sendMessageOnSubmitEditing? Type: boolean	n/a	If you set the sendMessageOnSubmitEditing parameter to true, a message is sent whenever users hit the Return or Enter key on a keyboard.
Selected TextInput props Type: various	n/a	Chat Components for React Native let you configure all the default TextInput props from React Native except for testID, autoComplete, multiline, onChangeText, placeholder, style, placeholderTextColor, editable, and value. For example, you can set a limit to the maximum number of characters that can be entered in the input field using the maxLength parameter, like <MessageInput maxLength={120} />.

Offline message behavior

When you send a message and the network connection is lost, the message will still be visible in the message input upon tapping the Send button, and other chat users won’t see it on the message list. The message won't reach the server (the publish method from the JavaScript SDK will fail), returning the PubNub call failed, check status for details error.

You can handle these incoming errors using the onError property of the Chat Provider component and pass it to a custom callback function.

import PubNub from "pubnub";
import { PubNubProvider } from "pubnub-react";
import { Chat, MessageList, MessageInput } from "@pubnub/react-native-chat-components";

const pubnub = new PubNub({
publishKey: "demo",
subscribeKey: "demo",
userId: "test-user"
});

export default function App() {
function handleError(e) {
    console.log("Error handler: ", e);
}

show all 24 lines