@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!