react-native-converse
A customizable, fast and easy react native chat module.
Installing
yarn add react-native-converse
or npm, i --save react-native-converse
.
Usage
Here's an extended example of how you could use the module. Extended documentation will follow in the near future.
Note: generally you'd get the messages from a a redux store for example. The following snippet is just to illustrate usage.
import React Component from 'react'; { const props = user : 1 // Active user animated : true // Animate new messages this inputPlaceholder : 'Type a message...' this this participants : id: 1 displayName: 'RWOverdijk' avatar: 'https://placekitten.com/g/300/300' id: 2 displayName: 'Somebody' avatar: 'https://placekitten.com/g/300/300' messages : id: 1 author: 1 createdAt: content: `Hey! What's up!?` id: 2 author: 2 createdAt: content: `Your face is up` return <Chat = />; } /** * Dispatch an event or something here. */ { // ... } /** * Use this method to return the message object-structure as desired by the module. * This method makes it easier to use your own data format. */ { return id : uuid participant: authorid createdAt : created content : text ; } /** * Use this method to return the participant object-structure as desired by the module. * This method makes it easier to use your own data format. */ { return id: uuid displayName: username avatar: profileavatar; } // Note: These are the defaults.const theme = chat: backgroundColor: '#d4e2e3' messageInput: sendIcon: imagespaperPlane sendIconActive: imagespaperPlaneActive addIcon: imagesadd bubble: fontSize: 14 outgoing: backgroundColor: '#6585E8' textColor : '#fff' incoming: backgroundColor: '#fff' textColor : '#222222' timestamp: fontSize: 10 ;
State of the module
This module is currently usable, ish, if your intentions are to just implement a chat with your own styling. If your intentions are to implement a lot of custom features, this module isn't for you. Yet. This module is actively being developed and will offer a lot more flexibility and features.
Soon. For realsies.
Values
While working on this module, the following values have been and will be kept in mind.
- Performance. Some components are limited in customization purely for the sake of performance.
- Performance again. Seriously, the chat should be as slick as possible.
- Cater to the majority. The components are designed around most common use.
- Extensible. Add what you need in a uniform way.
Roadmap
- Document bubble types.
- Document custom renderers.
- Add more bubble types.
- Allow for more customization.
- Custom animations.
- Implement attachment features.
- Implement toggle for feature button.
- Avatars.
- Plugins and message types.
- Add more default message types.
- Documentation besides example.
- Add play-mode, adding messages with a customizable interval.
License
MIT