react-native-chat-component

Installation

npm install --save react-native-chat-component

yarn add react-native-chat-component

Example

import React, {useEffect, useState} from 'react';
import {ChatComponent, ChatAppend} from 'react-native-chat-component';

const Example = () => {
  const firstData = [
    {
      id: 1,
      text: 'Hi!',
      tick: '1',
      transmitted: true,
      annoucement: true,
      favorite: true,
      createdAt: '20:15',
      user: {_id: 1},
    },
    {
      id: 1,
      text: 'Hi!',
      tick: '1',
      createdAt: '20:14',
      user: {_id: 2},
      quickReplies: [
        {text: 'Google', url: 'www.google.com'},
        {text: 'Facebook', url: 'www.facebook.com'},
      ],
    },
    {
      id: 1,
      text: '...',
      tick: '1',
      images: [
        {
          id: 1,
          image:
            'https://images.unsplash.com/photo-1466112928291-0903b80a9466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
        },
        {
          id: 1,
          image:
            'https://images.unsplash.com/photo-1441441247730-d09529166668?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
        },
        {
          id: 1,
          image:
            'https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
        },
        {
          id: 1,
          image:
            'https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
        },
      ],
      createdAt: '20:13',
      user: {_id: 2},
      quickReplies: [
        {text: 'Google', url: 'www.google.com'},
        {text: 'Facebook', url: 'www.facebook.com'},
      ],
    },
    {
      id: 1,
      text: '...',
      tick: '4',
      image:
        'https://images.unsplash.com/photo-1462027076063-1ceabb252dbd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
      favorite: true,
      createdAt: '20:13',
      user: {_id: 1},
    },
  ];
  const [data, setData] = useState([]);
  useEffect(() => {
    setData(firstData);
  }, []);

  const onSend = (message) => {
    const newdata = {id: 2, text: message, tick: '1', user: {_id: 2}};
    setData(ChatAppend(data, newdata));
  };
  return (
    <ChatComponent
      PostButtonView={true}
      onSend={(Value) => onSend(Value[0].text)}
      tickViewShow={true}
      chatColor={'#1cafff'}
      user={{id: 1}}
      quickRepliesRightColor={'white'}
      quickRepliesLeftColor={'#1cafff'}
      onQuickReplies={(value) => console.log(value)}
      backgroundImage={{
        uri:
          'https://images.unsplash.com/photo-1569173112611-52a7cd38bea9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
      }}
      data={data}
      textInputShow={true}
      textInputPlaceholder={'send message...'}
    />
  );
};

export default Example;

Props

| Name | Type | Description | | :--------------------- | :--------------------------------: | --------------------------: | | data | Array | message data | | textInputShow | Bool | Text input visible | | onSend | (message)=>onSend(message[0].text) | Text input value | | tickViewShow | Bool | message state visible | | user | Array | user={{id:1}} | | backgroundImage | Source | Background Image | | PostButtonView | Bool | Post Button Visible | | quickRepliesRightColor | Color | quickReplies Right Color | | quickRepliesLeftColor | Color | quickReplies Left Color | | onClickDocument | ------ | Document Click | | onClickVideo | ------ | Video Click | | onPostClick | ------ | Post Button Click | | onDeleteMessage | ------ | Message delete button Click | | onSystemMessage | ------ | System message button Click | | onSystemMessage | ------ | System message button Click | | onQuickReplies | ------ | onQuickReplies button Click | | writing | Bool | writing |

License

MIT