react-native-customizable-chat v0.5.0

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

Customization props

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