react-native-flat-chat

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
• 📱 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';

1. 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.

API

Read the API documentation here