---
id: message-input-customization
sidebar_position: 5
title: Customize Message Input
---
import nativeAttachmentPickerStep1 from '../assets/guides/message-input-customization/native_attachment_picker_step_1.png'
import nativeAttachmentPickerStep2 from '../assets/guides/message-input-customization/native_attachment_picker_step_2.png'
We provide the `MessageInput` container out of the box in a fixed configuration with many customizable features. Similar to other components it accesses most customizations via context, specially the `MessageInputContext` which is instantiated in `Channel`, using props available on `Channel` component.
To customize the entire Input UI part of MessageInput component, you can add a custom UI component as `Input` prop on Channel component.
## Changing layout of MessageInput
Let's take a look at a simple example with following requirements:
- Stretch input box to full width
- Button to send a message, open attachment picker and open commands picker - below input box
- Disable the send button, in case of empty input box.
Disabled Send Button
Attached Image
Enabled Send Button
```jsx
import { Channel, Chat, ImageUploadPreview, OverlayProvider, AutoCompleteInput, useMessageInputContext } from 'stream-chat-react-native';
const client = StreamChat.getInstance('api_key');
const CustomInput = (props) => {
const { sendMessage, text, toggleAttachmentPicker, openCommandsPicker } = useMessageInputContext();
return (
)
};
export const ChannelScreen = ({ channel }) => {
const [channel, setChannel] = useState();
return (
{channel ? (
{/** App components */}
) : (
)}
);
};
const styles = StyleSheet.create({
flex: { flex: 1 },
fullWidth: {
width: '100%',
},
row: {
flexDirection: 'row',
justifyContent: 'space-between'
},
inputContainer: {
height: 40,
},
});
```
:::tip
You can also pass the same props as the context providers directly to the `MessageInput` component to override the context values.
The code above would render the red `View` and not `null` as the props take precedence over the context value.
:::
```tsx
null}
keyboardVerticalOffset={headerHeight}
Message={CustomMessageComponent}
>
}
/>
```
You can modify `MessageInput` in a large variety of ways. The type definitions for the props give clear insight into all of the options.
You can replace the `Input` wholesale, as above, or create you own `MessageInput` component using the provided hooks to access context.
**NOTE:** The `additionalTextInputProps` prop of both `Channel` and `MessageInput` is passed the the internal [`TextInput`](https://reactnative.dev/docs/textinput) component from `react-native`. If you want to change the `TextInput` component props directly this can be done using this prop.
## Customizing nested components within MessageInput
If you would like to only replace some internal UI component of `MessageInput`, you can do so by providing your own UI component for the default component which you want to replace, as a prop to `Channel` component.
Following images show the prop names for replacing corresponding components. Within your own custom UI implementation, you can access all the stateful information via available contexts
### Custom Send Button
In following example, let's only replace a default `SendButton` with a custom implementation, without altering rest of layout of MessageInput
- Default send button should be replaced with Boat Icon
- This custom button should be disabled if user has not entered any text or attached any file
Send Button Disabled
Send Button Enabled
```tsx
import { TouchableOpacity } from 'react-native';
import { RootSvg, RootPath, Channel, useMessageInputContext } from 'stream-chat-react-native';
const StreamButton = () => {
const { sendMessage, text, imageUploads, fileUploads } = useMessageInputContext();
const isDisabled = !text &&
!imageUploads.length &&
!fileUploads.length;
return (
)
};
// In your App
```
## Storing image and file attachment to custom CDN
When you select an image or file from image picker or file picker, it gets uploaded to Stream's CDN by default.
But you can choose to upload attachments to your own CDN using following two props on Channel component:
- [`doImageUploadRequest`](../core-components/channel.mdx#doimageuploadrequest): For images picked from image picker
- [`doDocUploadRequest`](../core-components/channel.mdx#dodocuploadrequest): For files picked from file picker
```tsx
chatClient?.sendFile(
`${channel._channelURL()}/file`, // replace this with your own cdn url
file.uri,
'name_for_file',
)
}
doImageUploadRequest={(file, channel) =>
chatClient?.sendFile(
`https://customcdnurl.com`, // replace this with your own cdn url
file.uri,
'name_for_file',
)
}
/>
```
:::note
Usage of `chatClient?.sendFile` is optional in above examples. You may choose to use any HTTP client for uploading the file.
But make sure to return a promise that is resolved to an object with the key `file` that is the url of the uploaded file.
For example:
```tsx
{
file: 'https://us-east.stream-io-cdn.com/62344/images/a4f988f5-6a9c-47b0-aab9-7a27b74d7515.60D6041A-D012-4721-B794-19267B8F352B.jpg'
}
```
:::
## Disabling File Uploads or Image Uploads
There are three ways to disable file or image uploads from RN app:
### From Dashboard
This is recommended option, if you want to allow neigher image or file uploads in your chat application. You can find a toggle to disable Uploads in Chat Overview page
### On UI level
If you want to restrict uploads to either images or only files, you can do so by providing one of the following two props to Channel component:
- `hasFilePicker` (boolean)
- `hasImagePicker` (boolean)
## Disable autocomplete feature on input (mentions and commands)
The auto-complete trigger settings by default include `/`, `@`, and `:` for slash commands, mentions, and emojis respectively. These triggers are created by the exported function `ACITriggerSettings`, which takes `ACITriggerSettingsParams` and returns `TriggerSettings`. You can override this function to remove some or all of the trigger settings via the `autoCompleteTriggerSettings` prop on `Channel`. If you remove the slash commands it is suggested you also remove the commands button using the prop on `Channel` `hasCommands`. You can remove all of the commands by returning an empty object from the function given to `autoCompleteTriggerSettings`.
```tsx
({})}
channel={channel}
hasCommands={false}
keyboardVerticalOffset={headerHeight}
thread={thread}
>
```
## Setting Additional Props on Underlying `TextInput` component
You can provide `additionalTextInputProps` prop to `Channel` or `MessageInput` component for adding additional props to underlying React Native's [TextInput](https://reactnative.dev/docs/textinput) component.
:::caution
Please make sure to memoize or pass static reference for this object. Please read our [Performance Guide](../customization/custom_components.mdx/#performance) for details
:::
```jsx
const additionalTextInputProps = useMemo(() => {
selectionColor: 'pink'
});
// Render UI part
...
```
## Replacing AttachmentPicker With Native Image Picker
Attachment picker is rendered/displayed/opened inside of a bottom sheet by default.
The default behavior can be easily replaced with the device's native image picker (as shown in screenshots below).
Attachment Picker actionsheet
Photo library
Channel component receives a prop [AttachButton](../core-components/channel.mdx#attachbutton),
which can be used to override the default attach button next to input box as following. This prop can be used to
override the default `onPress` handler for the `AttachButton` component.
```tsx
import { AttachButton, Channel } from 'stream-chat-react-native';
const CustomAttachButton = () => {
const onPressHandler = () => {
// Custom handling of onPress action on AttachButton
};
return ;
}
```
In order to make the `onPressHandler` open the actionsheet and show the options to choose attachments from Photo Library, Camera or Files,
you can use [`@expo/react-native-action-sheet`](https://github.com/expo/react-native-action-sheet) package for the action sheet implemented in this example.
```sh
yarn add @expo/react-native-action-sheet
```
Please read through the documentation of [`@expo/react-native-action-sheet`](https://github.com/expo/react-native-action-sheet#a-basic-actionsheet-setup) for more details.
```tsx {2,5,8-27,33,35}
import { AttachButton, Channel } from 'stream-chat-react-native';
import { ActionSheetProvider, useActionSheet } from '@expo/react-native-action-sheet';
const CustomAttachButton = () => {
const { showActionSheetWithOptions } = useActionSheet();
const onPressHandler = () => {
// Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
showActionSheetWithOptions(
{
cancelButtonIndex: 3,
destructiveButtonIndex: 3,
options: ['Photo Library', 'Camera', 'Files', 'Cancel'],
},
(buttonIndex) => {
switch (buttonIndex) {
case 0:
break;
case 1:
break;
case 2:
break;
default:
break;
}
},
);
};
return ;
};
```
Now let's hook the relevant action handlers for buttons within actionsheet.
[`react-native-image-crop-picker`](https://github.com/ivpusic/react-native-image-crop-picker) provides an image picker functionality
with good support for configurable compression, multiple images and cropping. And selected images from image picker or camera can be wired in
with upload previews ([`ImageUploadPreview`](../ui-components/image_upload_preview.mdx)) within `MessageInput` component
by using a function `uploadNewImage` provided by [`MessageInputContext`](../contexts/message_input_context.mdx#uploadnewimage).
For file attachments, the SDK defaults to the native file picker. That can be reused by adding the `pickFile` function
provided by the [`MessageInputContext`](../contexts/message_input_context.mdx#pickfile) as action handler within actionsheet.
```tsx {4,10,12-21,23-30,43,46,49}
import {
AttachButton,
Channel,
useMessageInputContext
} from 'stream-chat-react-native';
import { ActionSheetProvider, useActionSheet } from '@expo/react-native-action-sheet';
import ImagePicker from 'react-native-image-crop-picker';
const CustomAttachButton = () => {
const { showActionSheetWithOptions } = useActionSheet();
const { pickFile, uploadNewImage } = useMessageInputContext();
const pickImageFromGallery = () =>
ImagePicker.openPicker({
multiple: true,
}).then((images) =>
images.forEach((image) =>
uploadNewImage({
uri: image.path,
}),
),
);
const pickImageFromCamera = () =>
ImagePicker.openCamera({
cropping: true,
}).then((image) =>
uploadNewImage({
uri: image.path,
}),
);
const onPress = () => {
// Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
showActionSheetWithOptions(
{
cancelButtonIndex: 3,
destructiveButtonIndex: 3,
options: ['Photo Library', 'Camera', 'Files', 'Cancel'],
},
(buttonIndex) => {
switch (buttonIndex) {
case 0:
pickImageFromGallery();
break;
case 1:
pickImageFromCamera();
break;
case 2:
pickFile();
break;
default:
break;
}
},
);
};
return ;
};
```
