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.
- Easy-to-use API
- Customizable themes and styles
- Supports avatars, custom backgrounds, and placeholders
- Optimized for mobile devices
- Flexible message management
To install the package, use npm or yarn:
npm install @codsod/react-native-chat
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;
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!