Permalink
Browse files

screenshots

  • Loading branch information...
FaridSafi committed Jul 30, 2016
1 parent 04f4ea7 commit da1f78216616608ee0b4632d06f27c8836b731b2
View
@@ -1,2 +1,3 @@
example/
TODO.md
screenshots/
View
@@ -1,11 +1,15 @@
# Gifted Chat
The most complete chat UI for React Native (formerly known as Gifted Messenger)
![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/screenshots/gifted-chat-1.png)
![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/screenshots/gifted-chat-2.png)
## Installation
- `npm install react-native-gifted-chat --save`
`npm install react-native-gifted-chat --save`
## Android installation
- Add `windowSoftInputMode` in your Android Manifest `android/app/src/main/AndroidManifest.xml`
Add `windowSoftInputMode` in your Android Manifest `android/app/src/main/AndroidManifest.xml`
```
<!-- ... -->
android:label="@string/app_name"
@@ -14,7 +18,7 @@ The most complete chat UI for React Native (formerly known as Gifted Messenger)
<!-- ... -->
```
## Minimal example
## Example
```jsx
import React, { Component } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
@@ -63,7 +67,34 @@ class Example extends Component {
```
## Advanced example
See [example project](example/App.js)
See [example/App.js](example/App.js)
## Message object
```javascript
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// custom params
}
```
## Features
- Custom styles
- Custom actions
- Multiline TextInput
- Load earlier messages
- Avatar as initials
- Touchable links using [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text)
- Localized dates
- Copy text message to clipboard
## Props documentation
- Work in progress
View
@@ -72,7 +72,7 @@ export default class Example extends Component {
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
// avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
}),
};
View
@@ -2,7 +2,7 @@ module.exports = [
{
_id: Math.round(Math.random() * 1000000),
text: 'Yes, and I use Gifted Chat!',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
@@ -15,11 +15,10 @@ module.exports = [
{
_id: Math.round(Math.random() * 1000000),
text: 'Are you building a chat app?',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
];
@@ -2,7 +2,7 @@ module.exports = [
{
_id: Math.round(Math.random() * 1000000),
text: 'React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components https://facebook.github.io/react-native/',
createdAt: new Date(Date.UTC(2016, 5, 10, 17, 20, 0)),
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 1,
name: 'Developer',
Binary file not shown.
Binary file not shown.
View
@@ -33,10 +33,10 @@ class GiftedAvatar extends Component {
// inspired by https://github.com/wbinnssmith/react-user-avatar
// colors from https://flatuicolors.com/
const colors = [
'#e67e22', // carrot
'#2ecc71', // emerald
'#3498db', // peter river
'#8e44ad', // wisteria
'#e67e22', // carrot
'#e74c3c', // alizarin
'#1abc9c', // turquoise
'#2c3e50', // midnight blue
@@ -79,9 +79,9 @@ class GiftedAvatar extends Component {
)
}
if (this.props.user.avatar) {
// disabled={this.props.onPress ? false : true}
return (
<TouchableOpacity
disabled={this.props.onPress ? false : true}
onPress={() => {
const {onPress, ...other} = this.props;
this.props.onPress && this.props.onPress(other);
@@ -96,9 +96,9 @@ class GiftedAvatar extends Component {
this.setAvatarColor();
}
// disabled={this.props.onPress ? false : true}
return (
<TouchableOpacity
disabled={this.props.onPress ? false : true}
onPress={() => {
const {onPress, ...other} = this.props;
this.props.onPress && this.props.onPress(other);

0 comments on commit da1f782

Please sign in to comment.