1.0.14 • Published 10 months ago

@codsod/react-native-chat v1.0.14

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

@codsod/react-native-chat

A simple and customizable React Native chat component for creating chat interfaces easily. This package provides flexibility and simplicity, with customizable themes and layouts, making it ideal for mobile applications.

Features

  • Easy-to-use API
  • Customizable themes and styles
  • Supports avatars, custom backgrounds, and placeholders
  • Optimized for mobile devices
  • Flexible message management

Installation

To install the package, use npm or yarn:

npm install @codsod/react-native-chat

Complete Example:

import React, { useEffect, useState } from "react";
import Chat from "@codsod/react-native-chat";

const Home = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: "Hey!",
        createdAt: new Date(),
        user: {
          _id: 2,
          name: "CodSod",
        },
      },
      {
        _id: 2,
        text: "Hello CodSod",
        createdAt: new Date(),
        user: {
          _id: 1,
          name: "Vishal Chaturvedi",
        },
      },
    ]);
  }, []);

  const onSendMessage = (text) => {
    setMessages((prevMessages: any) => [
      {
        _id: prevMessages.length + 1,
        text,
        createdAt: new Date(),
        user: {
          _id: 1,
          name: "Vishu Chaturvedi",
        },
      },
      ...prevMessages,
    ]);
  };

  return (
    <Chat
      messages={messages}
      setMessages={(val) => onSendMessage(val)}
      themeColor="orange"
      themeTextColor="white"
      showSenderAvatar={false}
      showReceiverAvatar={true}
      inputBorderColor="orange"
      user={{
        _id: 1,
        name: "Vishal Chaturvedi",
      }}
      backgroundColor="white"
      inputBackgroundColor="white"
      placeholder="Enter Your Message"
      placeholderColor="gray"
      backgroundImage={
        "https://fastly.picsum.photos/id/54/3264/2176.jpg?hmac=blh020fMeJ5Ru0p-fmXUaOAeYnxpOPHnhJojpzPLN3g"
      }
      showEmoji={true}
      onPressEmoji={() => console.log("Emoji Button Pressed..")}
      showAttachment={true}
      onPressAttachment={() => console.log("Attachment Button Pressed..")}
      timeContainerColor="red"
      timeContainerTextColor="white"
      onEndReached={() => alert("You have reached the end of the page")}
    />
  );
};

export default Home;

Props

PropTypeDescriptionDefault
messagesArrayAn array of message objects. Each message should include _id, text, createdAt, and user.[]
setMessagesFunctionA callback function for sending new messages. This function should update the messages state.-
themeColorstringThe primary color for the chat interface, including buttons, icons, and message bubbles."orange"
themeTextColorstringThe color of the text within the chat interface elements."white"
showSenderAvatarbooleanWhether to display the sender's avatar alongside their messages.false
showReceiverAvatarbooleanWhether to display the receiver's avatar alongside their messages.true
inputBorderColorstringThe border color of the input field where users type their messages."orange"
userObjectThe current user object, which should include _id and name.-
backgroundColorstringThe background color of the chat interface."white"
inputBackgroundColorstringThe background color of the input field where users type their messages."white"
placeholderstringThe placeholder text displayed in the input field when it is empty."Enter Your Message"
placeholderColorstringThe color of the placeholder text."gray"
backgroundImagestringThe URL of an image to be used as the background of the chat interface.undefined
showEmojibooleanWhether to show the emoji button.false
onPressEmojiFunctionA function that defines the action to perform when the emoji button is clicked.-
showAttachmentbooleanWhether to show the attachment button.false
onPressAttachmentFunctionA function that defines the action to perform when the attachment button is clicked.-
timeContainerColorstringTo set the background color of top time status color default color is theme color.themeColor
timeContainerTextColorstringTo set the text color of top time status, default color is theme text color.themeTextColor
onEndReachedFunctionThis function is used for using pagination function.-

This README.md file includes all the necessary details about the Chat component, including parameters and example code for usage. Feel free to modify it according to your needs or preferences!

1.0.14

10 months ago

1.0.13

10 months ago

1.0.12

11 months ago

1.0.11

11 months ago

1.0.10

11 months ago

1.0.9

11 months ago

1.0.8

11 months ago

1.0.7

11 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago