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
hideAvatar	boolean	Default : false, if false the avatar of the 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

---