https://github.com/marcotrombino/react-native-flat-chat
An agnostic and fully customizable React Native chat
https://github.com/marcotrombino/react-native-flat-chat
chat flatlist keyboard keyboardavoidingview keyboardawarescrollview keyboardspacer listview messenger react-native scrollview
Last synced: 10 months ago
JSON representation
An agnostic and fully customizable React Native chat
- Host: GitHub
- URL: https://github.com/marcotrombino/react-native-flat-chat
- Owner: Marcotrombino
- License: gpl-3.0
- Created: 2017-09-20T12:20:35.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-23T15:24:35.000Z (almost 9 years ago)
- Last Synced: 2025-06-12T11:16:38.588Z (about 1 year ago)
- Topics: chat, flatlist, keyboard, keyboardavoidingview, keyboardawarescrollview, keyboardspacer, listview, messenger, react-native, scrollview
- Language: JavaScript
- Size: 38.1 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flat Chat [](https://badge.fury.io/gh/Marcotrombino%2Freact-native-flat-chat)
A powerfull React Native chat component without external dependencies.
###### N.B: FlatChat is still under development and it's not ready for production yet. Feel free to test it and contribute.
## Why choose FlatChat
- Easy to use: it only needs few lines to get started
- No dependencies: no third part component conflicts
- Rich documentation: no struggle trying to make it works
- Elegant, clean and modern design: no more old style chat, FlatChat uses a fresh design
- :iphone: Native animations: FlatChat mimics a real native chat using smooth animations
- :rocket: High performance: significant [performance improvement](https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html) with `FlatList` rather than `ScrollView` or `ListView`
- Fully customizable: easy customize FlatChat with your requirements
- [Use case examples](./example): useful examples to find the perfect configuration
#### Other features:
- Keyboard avoiding
- Avoid navigation bar height
- Multiline text input
- Messages filters: regex messages to avoid black-list words, spam, etc
## Installation
- Using [npm](https://www.npmjs.com): `npm i -S react-native-flat-chat`
## Usage
1. Import `FlatChat` component:
```js
import { FlatChat } from 'react-native-flat-chat';
```
2. Use it in your `render()` method providing properties.
To make it works you need to pass two basic properties:
- `data` (Array): chat messages data from your state.
You can simply pass an empty array to make it starts with no messages or provide loaded messages
- `onSend` (function): callback called every time user sends a new message.
## Basic example
Here's a simple example of how your app scene should look like:
```js
import React, { Component } from 'react';
import { FlatChat } from 'react-native-flat-chat';
export default class MyChatScene extends Component {
state = {
data: [] // chat messages data
};
// push new message into data
sendMessage(message) {
// enable the following line to test both bubbles
//message.owner = message.key % 2 === 0 ? 'me' : 'stranger';
this.setState({ data: [...this.state.data, message] });
}
render() {
// my awesome FlatChat component
this.sendMessage()}
/>
}
}
```
### Other examples
Need more customization? You can find other useful examples [here](./example).
## FlatList `data` Array
According to the [official documentation](https://facebook.github.io/react-native/docs/flatlist.html#renderitem) a `FlatList` (which is implemented inside FlatChat) takes items from a `data` array.
A `data` item is an Object with the following properties:
```js
{
key: (Number), // item UNIQUE key
// e.g 10
owner: (String) // the message owner
// e.g "me" or "stranger"
text: (String) // the message text
// e.g "Hey, what's up?"
}
```
N.B: FlatChat manages new messages with `data.length` as unique key (required by `FlatList`).
If you provide loaded messages inside `state.data` make sure they have progressive keys starting from `0`.
## API
Read the API documentation [here](./API.md)