{"id":20171718,"url":"https://github.com/marcotrombino/react-native-flat-chat","last_synced_at":"2025-09-06T18:39:40.406Z","repository":{"id":57337029,"uuid":"104211801","full_name":"Marcotrombino/react-native-flat-chat","owner":"Marcotrombino","description":"An agnostic and fully customizable React Native chat","archived":false,"fork":false,"pushed_at":"2017-09-23T15:24:35.000Z","size":39,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-12T11:16:38.588Z","etag":null,"topics":["chat","flatlist","keyboard","keyboardavoidingview","keyboardawarescrollview","keyboardspacer","listview","messenger","react-native","scrollview"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Marcotrombino.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-20T12:20:35.000Z","updated_at":"2019-11-02T17:06:26.000Z","dependencies_parsed_at":"2022-09-12T09:51:54.711Z","dependency_job_id":null,"html_url":"https://github.com/Marcotrombino/react-native-flat-chat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Marcotrombino/react-native-flat-chat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcotrombino%2Freact-native-flat-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcotrombino%2Freact-native-flat-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcotrombino%2Freact-native-flat-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcotrombino%2Freact-native-flat-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marcotrombino","download_url":"https://codeload.github.com/Marcotrombino/react-native-flat-chat/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcotrombino%2Freact-native-flat-chat/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260475859,"owners_count":23014929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","flatlist","keyboard","keyboardavoidingview","keyboardawarescrollview","keyboardspacer","listview","messenger","react-native","scrollview"],"created_at":"2024-11-14T01:27:34.444Z","updated_at":"2025-06-18T02:36:43.869Z","avatar_url":"https://github.com/Marcotrombino.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  Flat Chat [![GitHub version](https://badge.fury.io/gh/Marcotrombino%2Freact-native-flat-chat.svg)](https://badge.fury.io/gh/Marcotrombino%2Freact-native-flat-chat)\nA powerfull React Native chat component without external dependencies.\n###### \u003ci\u003eN.B: FlatChat is still under development and it's not ready for production yet. Feel free to test it and contribute.\n## Why choose FlatChat\u003c/i\u003e\n\n- \u003cb\u003eEasy to use\u003c/b\u003e: it only needs few lines to get started\n- \u003cb\u003eNo dependencies\u003c/b\u003e: no third part component conflicts\n- \u003cb\u003eRich documentation\u003c/b\u003e: no struggle trying to make it works\n- \u003cb\u003eElegant, clean and modern design\u003c/b\u003e: no more old style chat, FlatChat uses a fresh design\n- \u003cb\u003e:iphone: Native animations\u003c/b\u003e: FlatChat mimics a \u003cb\u003ereal native chat\u003c/b\u003e using smooth animations\n- \u003cb\u003e:rocket: High performance\u003c/b\u003e: significant [performance improvement](https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html) with \u003cb\u003e`FlatList`\u003c/b\u003e rather than `ScrollView` or `ListView`\n- \u003cb\u003eFully customizable\u003c/b\u003e: easy customize FlatChat with your requirements\n- \u003cb\u003e[Use case examples](./example)\u003c/b\u003e: useful examples to find the perfect configuration\n#### Other features:\n- \u003cb\u003eKeyboard avoiding\u003c/b\u003e\n- \u003cb\u003eAvoid navigation bar height\u003c/b\u003e\n- \u003cb\u003eMultiline text input\u003c/b\u003e\n- \u003cb\u003eMessages filters\u003c/b\u003e: regex messages to avoid black-list words, spam, etc\n\n## Installation\n- Using [npm](https://www.npmjs.com): `npm i -S react-native-flat-chat`\n\n## Usage\n1. Import \u003cb\u003e`FlatChat`\u003c/b\u003e component:\n```js\nimport { FlatChat } from 'react-native-flat-chat';\n```\n2. Use it in your `render()` method providing properties.\nTo make it works you need to pass two basic properties:\n- `data` (Array): chat messages data from your state.\n   \u003cbr\u003eYou can simply pass an empty array to make it starts with no messages or provide loaded messages\n- `onSend` (function): callback called every time user sends a new message.\n\n## Basic example\nHere's a simple example of how your app scene should look like:\n```js\nimport React, { Component } from 'react';\nimport { FlatChat } from 'react-native-flat-chat';\n\nexport default class MyChatScene extends Component {\n  state = {\n    data: [] // chat messages data\n  };\n\n  // push new message into data\n  sendMessage(message) {\n    // enable the following line to test both bubbles\n    //message.owner = message.key % 2 === 0 ? 'me' : 'stranger';\n\n    this.setState({ data: [...this.state.data, message] });\n  }\n\n  render() {\n    \u003cView style={{ flex: 1 }}\u003e\n\n      // my awesome FlatChat component\n      \u003cFlatChat\n        data={this.state.data}\n        // assign a callback which will be called every time user sends a new message\n        onSend={() =\u003e this.sendMessage()}   \n      /\u003e\n\n    \u003c/View\u003e\n  }\n}\n```\n### Other examples\nNeed more customization? You can find other useful examples [here](./example).\n\n## FlatList `data` Array\nAccording to the [official documentation](https://facebook.github.io/react-native/docs/flatlist.html#renderitem) a `FlatList` (which is implemented inside FlatChat) takes \u003ci\u003eitems\u003c/i\u003e from a `data` \u003cb\u003earray\u003c/b\u003e.\n\u003cbr\u003eA `data` \u003ci\u003eitem\u003c/i\u003e is an \u003cb\u003eObject\u003c/b\u003e with the following properties:\n\n```js\n{\n  key: (Number),    // item UNIQUE key\n                    // e.g 10\n\n  owner: (String)   // the message owner\n                    // e.g \"me\" or \"stranger\"\n\n  text: (String)    // the message text\n                    // e.g \"Hey, what's up?\"\n}\n```\n\n\u003cb\u003eN.B\u003c/b\u003e: FlatChat manages new messages with `data.length` as \u003cb\u003eunique key\u003c/b\u003e (required by `FlatList`).\n\u003cbr\u003eIf you provide loaded messages inside \u003cb\u003e`state.data`\u003c/b\u003e make sure they have progressive keys starting from `0`.\n\n## API\nRead the API documentation [here](./API.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcotrombino%2Freact-native-flat-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcotrombino%2Freact-native-flat-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcotrombino%2Freact-native-flat-chat/lists"}