{"id":21401431,"url":"https://github.com/spoonx/react-native-converse","last_synced_at":"2026-01-03T11:45:26.855Z","repository":{"id":57336253,"uuid":"123258512","full_name":"SpoonX/react-native-converse","owner":"SpoonX","description":"A chat library for react native.","archived":false,"fork":false,"pushed_at":"2018-03-11T11:56:11.000Z","size":22,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-23T06:17:06.723Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SpoonX.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-28T09:02:39.000Z","updated_at":"2021-06-08T11:41:32.000Z","dependencies_parsed_at":"2022-09-11T12:20:55.049Z","dependency_job_id":null,"html_url":"https://github.com/SpoonX/react-native-converse","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpoonX%2Freact-native-converse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpoonX%2Freact-native-converse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpoonX%2Freact-native-converse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SpoonX%2Freact-native-converse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SpoonX","download_url":"https://codeload.github.com/SpoonX/react-native-converse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243893897,"owners_count":20364919,"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":[],"created_at":"2024-11-22T15:27:44.143Z","updated_at":"2026-01-03T11:45:26.827Z","avatar_url":"https://github.com/SpoonX.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-converse\n\nA customizable, fast and easy react native chat module.\n\n[![Gitter chat](https://badges.gitter.im/SpoonX/Dev.svg)](https://gitter.im/SpoonX/Dev)\n\n## Installing\n\n`yarn add react-native-converse` or `npm, i --save react-native-converse`.\n\n## Usage\n\nHere's an extended example of how you could use the module. Extended documentation will follow in the near future.\n\n_**Note:** generally you'd get the messages from a a redux store for example. The following snippet is just to illustrate usage._\n\n```jsx\nimport React, { Component } from 'react';\n\nclass ChatScreen extends Component {\n  render() {\n    const props = {\n      user               : 1,    // Active user\n      animated           : true, // Animate new messages\n      onSubmit           : text =\u003e this.onSubmit(text),\n      inputPlaceholder   : 'Type a message...',\n      messageHydrator    : message =\u003e this.hydrateMessage(message),\n      participantHydrator: participant =\u003e this.hydrateParticipant(participant),\n      participants       : [\n        {id: 1, displayName: 'RWOverdijk', avatar: 'https://placekitten.com/g/300/300'},\n        {id: 2, displayName: 'Somebody', avatar: 'https://placekitten.com/g/300/300'},\n      ],\n      messages           : [\n        {id: 1, author: 1, createdAt: new Date, content: `Hey! What's up!?`},\n        {id: 2, author: 2, createdAt: new Date, content: `Your face is up`}\n      ]\n    }\n\n    return \u003cChat {...props} theme={theme} /\u003e;\n  }\n\n  /**\n   * Dispatch an event or something here.\n   */\n  onSubmit(text) {\n    // ...\n  }\n\n  /**\n   * Use this method to return the message object-structure as desired by the module.\n   * This method makes it easier to use your own data format.\n   */\n  hydrateMessage({uuid, author, created, text}) {\n    return {\n      id         : uuid,\n      participant: author.id,\n      createdAt  : created,\n      content    : text\n    };\n  }\n\n  /**\n   * Use this method to return the participant object-structure as desired by the module.\n   * This method makes it easier to use your own data format.\n   */\n  hydrateParticipant({uuid, username, profile}) {\n    return {id: uuid, displayName: username, avatar: profile.avatar};\n  }\n}\n\n// Note: These are the defaults.\nconst theme = {\n  chat: {\n    backgroundColor: '#d4e2e3'\n  },\n  messageInput: {\n    sendIcon: images.paperPlane,\n    sendIconActive: images.paperPlaneActive,\n    addIcon: images.add,\n  },\n  bubble: {\n    fontSize: 14,\n\n    outgoing: {\n      backgroundColor: '#6585E8',\n      textColor      : '#fff'\n    },\n\n    incoming: {\n      backgroundColor: '#fff',\n      textColor      : '#222222'\n    },\n\n    timestamp: {\n      fontSize: 10\n    }\n  }\n};\n```\n\n## State of the module\n\nThis module is currently usable, ish, if your intentions are to just implement a chat with your own styling.\nIf your intentions are to implement a lot of custom features, this module isn't for you. Yet.\nThis module is actively being developed and will offer a lot more flexibility and features.\n\nSoon. For realsies.\n\n## Values\n\nWhile working on this module, the following values have been and will be kept in mind.\n\n- **Performance.** Some components are limited in customization purely for the sake of performance.\n- **Performance again.** Seriously, the chat should be as slick as possible.\n- **Cater to the majority.** The components are designed around most common use.\n- **Extensible.** Add what you need in a uniform way.\n\n## Roadmap\n\n- Document bubble types.\n- Document custom renderers.\n- Add more bubble types.\n- Allow for more customization.\n- Custom animations.\n- Implement attachment features.\n- Implement toggle for feature button.\n- Avatars.\n- Plugins and message types.\n- Add more default message types.\n- Documentation besides example.\n- Add play-mode, adding messages with a customizable interval.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspoonx%2Freact-native-converse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspoonx%2Freact-native-converse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspoonx%2Freact-native-converse/lists"}