@devpranavsharma/react-native-chat-box

react-native-chat-box

a fully customisable chat component

Installation

npm i @devpranavsharma/react-native-chat-box

Usage

import { ChatBox } from 'react-native-chat-box';

// ...

 const [messages, setMessages] = React.useState([
    { text: 'Hey', user: false, id: '123' },
    { text: 'Hey! How are you', user: true, id: '124' },
  ]);
  return (
    <SafeAreaView>
      <ChatBox
        name={'Pranav Sharma'}
        messages={messages}
        onSend={(message) => setMessages([...messages, message])}
      />
    </SafeAreaView>
  );

Props

• name (String) - Name of the person to show in the header
• messages (TMessage[]) - Messages to display e.g [{ text: 'Hey', user: false, id: '123' }]
• onSend (Function) - Callback when sending a message
• headerColor (ColorValue) - value for header background color
• headerTextColor (ColorValue) - value for header text color
• headerTextStyles (Object) - styles for header text
• headerStyles (Object) - styles for header text
• chatBubbleColor (ColorValue) - chat bubble color
• chatBubbleTextColor (Object) - color for bubble text
• chatBubbleStyle (Object) - styles for chat bubble view
• chatBubbleTextStyle (Object) - styles for chat bubble text
• listScrollProps (Object) - props for the FlatList
• listScrollStyle (Object) - styles for the FlatList
• textInputProps (Object) - props for the text input
• textInputStyle (Object) - styles for the text input
• sendBtnStyle (Object) - styles for the send Button Container
• CustomSend (Component) - Custom component to replace Send button

Contributing

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

License

MIT