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
📱 Native animations: FlatChat mimics a real native chat using smooth animations
🚀 High performance: significant performance improvement with FlatList rather than ScrollView or ListView
Fully customizable: easy customize FlatChat with your requirements
Use case examples: 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: npm i -S react-native-flat-chat

Usage

Import FlatChat component:

import { FlatChat } from 'react-native-flat-chat';

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:

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() {
    <View style={{ flex: 1 }}>

      // my awesome FlatChat component
      <FlatChat
        data={this.state.data}
        // assign a callback which will be called every time user sends a new message
        onSend={() => this.sendMessage()}   
      />

    </View>
  }
}

Other examples

Need more customization? You can find other useful examples here.

FlatList `data` Array

According to the official documentation a FlatList (which is implemented inside FlatChat) takes items from a data array.
A data item is an Object with the following properties:

{
  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

Marcotrombino/react-native-flat-chat