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
• ⚡ PERFORMANCES ⚡️ well optimized, only new messages will render
• 🔗 Link in messages can be opened
• 👆 Clicked messages or long pressed messages events that return the selected message
• 📳 Automatic scale for images in bubble
• 😃 User avatar

Installation

npm install react-native-customizable-chat

⚠️FOR NON EXPO USER⚠️ ⚠️If you want to support gif and webp for image preview then check this link ⚠️

Basic usage

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 :

Advanced usage

  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}
      />
  )

Messages type

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)

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

Required props

| Name | Type | Description | | ----------------- | ----------------- | ----------------- | | messages | Array | 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) | | 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 ? Buy me a coffee

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT