1.0.14 • Published 10 months ago
@codsod/react-native-chat v1.0.14
@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!