React-native-flat-chat NPM

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: only need 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 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 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 key data.length to make a unique key. If you provide loaded messages inside state.data make sure they have progressive keys starting from 0.