🔔 react-native-bell-chat
A library of React components for building chat UIs.
DEMO
Features
- Chat like scroll behavior (eg. automatic scroll to bottom)
- Load more messages on scrolling to the top (with custom threshold)
- SUPER easy to use
- Customize anything
- Author avatars
- Last seen messages for each author
- Show if authors are typing or not
- Automatic date rows (when the following message is from a different date than the preceding one)
Keep in mind that this project is still in the early stages of development. If you encounter a bug or have a feature request, please create an issue.
Installation
npm install react-native-bell-chat --save
OR
yarn add react-native-bell-chat
Basic Usage
// Your code stuff... render
The bare minimum is to provide a list of messages and authors, check this out for an example:
//...this.state =;//...
Complete props for author:
typescript
export interface Author {
id: number;
name: string;
avatarName?: string;
lastSeenAvatarName?: string;
isTyping?: boolean;
lastSeenMessageId?: number;
bgImageUrl?: number;
}
Complete props for message:
typescript
export interface Message {
id?: number;
authorId?: number; // If undefined, message is considered to be "System message"
message: string;
createdOn?: Date;
isSend?: boolean;
}
API
Api is obtained as ref of the ChatFeed component. It's divided in 2 parts, feedApi and scrollApi. Ref gives you and object like this:
Where scroll api is
Whole list of properties
Custom components
Most of the UI is customizable via injecting custom components. These are pure components, the library injects props to them so that you can customize pretty much anything.
FAQ
Q: My chat is scrolling up/down automatically every time I use setState on parent component.
A: Make sure to provide const expressions for custom components. Not inline functions.
Contributing 🔧
Contributions are always welcomed and encouraged.
Development
npm run start
Acknowledgments
This lib started as a fork from https://github.com/brandonmowat/react-chat-ui