@codsod/react-native-chat

@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

Prop	Type	Description	Default
messages	Array	An array of message objects. Each message should include _id, text, createdAt, and user.	[]
setMessages	Function	A callback function for sending new messages. This function should update the messages state.	-
themeColor	string	The primary color for the chat interface, including buttons, icons, and message bubbles.	"orange"
themeTextColor	string	The color of the text within the chat interface elements.	"white"
showSenderAvatar	boolean	Whether to display the sender's avatar alongside their messages.	false
showReceiverAvatar	boolean	Whether to display the receiver's avatar alongside their messages.	true
inputBorderColor	string	The border color of the input field where users type their messages.	"orange"
user	Object	The current user object, which should include _id and name.	-
backgroundColor	string	The background color of the chat interface.	"white"
inputBackgroundColor	string	The background color of the input field where users type their messages.	"white"
placeholder	string	The placeholder text displayed in the input field when it is empty.	"Enter Your Message"
placeholderColor	string	The color of the placeholder text.	"gray"
backgroundImage	string	The URL of an image to be used as the background of the chat interface.	undefined
showEmoji	boolean	Whether to show the emoji button.	false
onPressEmoji	Function	A function that defines the action to perform when the emoji button is clicked.	-
showAttachment	boolean	Whether to show the attachment button.	false
onPressAttachment	Function	A function that defines the action to perform when the attachment button is clicked.	-
timeContainerColor	string	To set the background color of top time status color default color is theme color.	themeColor
timeContainerTextColor	string	To set the text color of top time status, default color is theme text color.	themeTextColor
onEndReached	Function	This 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!