# react-native-customizable-chat

> Lightweight and easy chat view for your react native chat apps

Latest version **0.7.5** (published 2026-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-customizable-chat
pnpm add react-native-customizable-chat
yarn add react-native-customizable-chat
bun add react-native-customizable-chat
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.5 |
| Published | 2026-07-30 |
| First published | 2023-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 18.0.0 |
| Dependencies | 4 |
| Unpacked size | 206.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | loresclement |
| Maintainers | clement_lores |
| Keywords | react-native, ios, android, messenger, chat, react-component, bubble chat |

## Links

- npm: https://www.npmjs.com/package/react-native-customizable-chat
- Repository: https://github.com/loresclement/react-native-customizable-chat.git
- Homepage: https://github.com/loresclement/react-native-customizable-chat.git#readme
- Issues: https://github.com/loresclement/react-native-customizable-chat.git/issues
- npm.io page: https://npm.io/package/react-native-customizable-chat

## Dependencies (4)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.10
- [expo-image](https://npm.io/package/expo-image.md) >=1.5.1
- [expo-modules-core](https://npm.io/package/expo-modules-core.md) ^1.5.12
- [react-native-parsed-text](https://npm.io/package/react-native-parsed-text.md) ^0.0.22

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.7.5 (latest) — 2026-07-30
- 0.7.3 — 2025-03-26
- 0.7.1 — 2024-11-22
- 0.7.0 — 2024-06-10
- 0.6.1 — 2024-05-21
- 0.6.0 — 2024-05-21
- 0.5.0 — 2024-05-08
- 0.4.2 — 2024-04-15
- 0.4.1 — 2024-04-10
- 0.4.0 — 2024-03-29
- 0.3.9 — 2024-03-27
- 0.3.8 — 2024-03-18
- 0.3.7 — 2024-03-18
- 0.3.62 — 2024-03-18
- 0.3.61 — 2024-03-13
- … 17 more at https://npm.io/package/react-native-customizable-chat/versions

## README

# react-native-customizable-chat

Lightweight and easy chat view for your react native chat apps

the package is still in development, it's possible that breaking changes appear often

## Features 

- 🖌 FULLY customizable. Each component is customizable and replaceable<br>
- ⚡ PERFORMANCES ⚡️ well optimized, only new messages will render<br>
- 🔗 Link in messages can be opened<br>
- 👆 Clicked messages or long pressed messages events that return the selected message<br>
- 📳 Automatic scale for images in bubble<br>
- 😃 User avatar <br>

## Installation

```sh
npm install react-native-customizable-chat
```
⚠️FOR NON EXPO USER⚠️<br>
⚠️If you want to support gif and webp for image preview then check this <a href="https://reactnative.dev/docs/image#gif-and-webp-support-on-android" target="_blank">link</a> ⚠️


## Basic usage

```js
import CustomizableChat from 'react-native-customizable-chat'
import { CustomizableChatMessage } from 'react-native-customizable-chat/lib/typescript/src/types/Message';

export default function App() {
  
  const messages : Array<CustomizableChatMessage> = [
    {id: 0, content: "Hey!", isUser: false, date: new Date()},
    {id: 1, content: "Hey how are you?", isUser: true, date: new Date()},
    {id: 2, content: "Fine and you?", isUser: false, date: new Date()},
    {id: 3, content: "I'm having great time!", isUser: false, date: new Date(), uri: "IMAGE_URL"}
  ]

  return (
      <CustomizableChat 
        messages={messages}
        onSend={(e) => console.log(e)}
        debug={false}
      />
  );
}
```
This will give you :
<p>
  <img src="https://github.com/loresclement/react-native-customizable-chat/blob/main/screenshots/fast-chat-usage-0.jpg" width="200" title="How it looks">
  <img src="https://github.com/loresclement/react-native-customizable-chat/blob/main/screenshots/fast-chat-usage-1.jpg" width="200" alt="How it looks">
  <img src="https://github.com/loresclement/react-native-customizable-chat/blob/main/screenshots/fast-chat-usage-gif-0.gif" width="200" alt="How it looks">
</p>

## Advanced usage

```js
  const bgColor = '#17120E'
  const textColor = "#FFE0C2"
  const otherUserBubbleColor = '#331E0B'
  const userBubbleColor = '#562800'
  const borderColor = '#66350C'
  const sendButtonColor = '#F76B15'

  return (
      <CustomizableChat 
        messages={messages}
        onSend={(e) => addMessage(e)}
        noDivider
        keepKeyboardOnSend
        hideBubbleDate
        containerStyle={{backgroundColor: bgColor}}
        backgroundColor={bgColor}
        userBubbleColor={userBubbleColor}
        inputStyle={{color: textColor, 
                    borderRadius: 20, 
                    borderWidth: 1.5,
                    borderColor: borderColor, 
                    padding: 10 }}
        bottomContainerStyle={{marginTop: 10}}
        otherUserBubbleColor={otherUserBubbleColor}
        bubbleTextStyle={{color: textColor}}
        inputPlaceholderColor={textColor}
        customSendButton={<Icon name='send' 
                                size={15} 
                                type='material-community' 
                                color={sendButtonColor} 
                                reverse
                          />}
        debug={false}
      />
  )
```

<p>
  <img src="https://github.com/loresclement/react-native-customizable-chat/blob/main/screenshots/fast-chat-usage-2.jpg" width="200" title="How it looks">
  <img src="https://github.com/loresclement/react-native-customizable-chat/blob/main/screenshots/fast-chat-usage-3.jpg" width="200" alt="How it looks">
  <img src="https://github.com/loresclement/react-native-customizable-chat/blob/main/screenshots/fast-chat-usage-gif-1.gif" width="200" alt="How it looks">
</p>

## Messages type
```js
interface CustomizableChatMessage 
{
    id: number,//It's recommended to implement it correctly. Ex: if you want to delete the message on long press. You can easily remove it thanks to his id returned in the event
    content: string,
    date?: Date,
    isUser: boolean,//If true the message will be aligned to the right and considered as user message
    uri?: string,//uri of your image, video, gif, file... (the library will auto detect the type of the uri and show the correct badge associated to his type. For example if it's a video it will show the badge video, gif => gif badge, file => specific view)
    seen?: boolean//the message is seen or not
    userAvatar?: string//uri of user avatar
}
```

## File type 
if a uri is specified, it will get the following metadata (you can retrieve it through filePreview prop)
```js

interface BubbleFileMetada
{
    size: number//in MB
    lastModified: string | Date
    contentType: string
}
```

## Required props

| Name | Type | Description |
| ----------------- | ----------------- | ----------------- |
| messages | Array<CustomizableChatMessage> | Your array of message formatted with the CustomizableChatMessage type |
| onSend | function | Triggered when user clicks on send, returns a CustomizableChatMessage |

## Customization props

| Name | Type | Description |
| ----------------- | ----------------- | ----------------- |
| onMsgPress | function | If user presses a bubble this function is triggered. Returns a CustomizableChatMessage |
| onLongMsgPress | function | If user long presses a bubble this function is triggered. Returns a CustomizableChatMessage |
| keepKeyboardOnSend | boolean | If true then the keyboard will not dimiss when the user presses sends |
| disableBubblePressOpacity | boolean | If true the opacity animation when a user touches a bubble is disabled |
| backgroundColor | string | Color of the chat background |
| containerStyle | ViewStyle | Customize the style of the whole chat container |
| bottomContainerStyle | ViewStyle | Customize the container of the input and send button |
| onAvatarPress | function | if user press an avatar, message datas are returned |
| hideOtherUserAvatar | boolean | Default : false, if false the avatar of the other user bubble won't display |
| hideUserAvatar | boolean | Default : false, if false the avatar of the user bubble won't display |
| hideSendButton | boolean | If true the send button won't display |
| alwaysShowSend | boolean | By default the send button will display only if input is not empty. Setting this to true will always display the send button |
| sendButtonContainerStyle | ViewStyle | Customize the container of the send button |
| dateFormat | string | dayjs format of the date, for example "DD/MM/YYYY" |
| hideBubbleDate | boolean | If true, the date of messages won't display |
| dateTextStyle | TextStyle | Text style of the date of user bubble |
| otherUserDateTextStyle | TextStyle | Text style of the date of other user bubble |
| bubbleTextStyle | TextStyle | Customize text in user chat bubble |
| otherUserBubbleTextStyle | TextStyle | Customize text in other user chat bubble |
| imageStyle | ImageStyle | Customize the style of an image in bubble |
| customSendButton | ReactNode | Replace the default button by your own button. The onSend event is still triggered |
| sendButtonProps | ButtonProps | Add props of the default send button |
| inputTopElement | ReactNode | Add any fragment between the chat and the input |
| hideTopElement | boolean | If true your fragment between the chat and the input won't display  |
| rightInputElement | ReactNode | Add any fragment on the right of the input |
| leftInputElement | ReactNode | Add any fragment on the left of the input |
| hideRightInputElement | boolean | Default: false, If true display your fragment on the right of the input |
| hideLeftInputElement | boolean | Default: false, If true display your fragment on the left of the input |
| otherUserBubbleColor | string | Change the background color of the other user's bubble |
| userBubbleColor | string | Change the background color of the user's bubble |
| bubbleContainerStyle | ViewStyle | Customize chat bubble container |
| sentMark | ReactNode | Custom node to display when the message is not seen |
| seenMark | ReactNode | Custom node to display when the message is seen |
| inputMaxLength | number | Max length of the input |
| inputStyle | TextStyle | Customize the style of the input |
| inputPlaceholderColor | string | Color of the placeholder of the input |
| inputPlaceholderValue | string | Value of the placeholder of the input |
| customVideoBadge | ReactNode | Add your own fragment to the video badge (video badge appears when the CustomizableChatMessage isVideo = true) <img src="https://github.com/loresclement/react-native-customizable-chat/blob/main/screenshots/fast-chat-video-badge.jpg" width="80" alt="Video badge"> |
| filePreview | function(msg: CustomizableChatMessage) => ReactNode | Customize the node of file preview |
| defaultInputValue | string | default value of the input, default : '' |
| debug | boolean | default value : true. If false no log and warning will be thrown by the package |

## Supports me

You want to support me ? 
<a href="https://www.buymeacoffee.com/loresclement" target="_blank">Buy me a coffee</a>

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

---
_Source: https://npm.io/package/react-native-customizable-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._