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

1. Import FlatChat component:

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:

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