Merge branch 'master' of https://github.com/FaridSafi/react-native-gifted-chat

README.md

@@ -108,6 +108,8 @@ See [example/App.js](example/App.js)
 - **`renderMessage`** _(Function)_ - render the message container
 - **`renderMessageText`** _(Function)_ - render the message text
 - **`renderMessageImage`** _(Function)_ - render the message image
+- **`imageProps`** _(Object)_ - extra props to be passed to the [`<Image>`](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`
+- **`lightboxProps`** _(Object)_ - extra props to be passed to the MessageImage's [Lightbox](https://github.com/oblador/react-native-lightbox)
 - **`renderCustomView`** _(Function)_ - render a custom view inside the bubble
 - **`renderDay`** _(Function)_ - render the day above a message
 - **`renderTime`** _(Function)_ - render the message time
@@ -117,6 +119,7 @@ See [example/App.js](example/App.js)
 - **`renderComposer`** _(Function)_ - render the text input message composer
 - **`renderSend`** _(Function)_ - render the send button
 - **`renderAccessory`** _(Function)_ - renders a second line of actions below the message composer
+- **`onPressActionButton`** _(Function)_ - callback to perform custom logic when the Action button is pressed (the default `actionSheet` will not be used)
 - **`bottomOffset`** _(Integer)_ - distance of the chat from the bottom of the screen, useful if you display a tab bar
 
 

example/data/messages.js

@@ -7,6 +7,8 @@ module.exports = [
       _id: 1,
       name: 'Developer',
     },
+    sent: true,
+    received: true,
     // location: {
     //   latitude: 48.864601,
     //   longitude: 2.398704

package.json

@@ -41,6 +41,7 @@
     "moment": "^2.13.0",
     "react-native-communications": "^2.1.0",
     "react-native-invertible-scroll-view": "^1.0.0",
+    "react-native-lightbox": "oblador/react-native-lightbox#c84a8543d4511fe6a44c3d7820747c9c1bddd875",
     "react-native-parsed-text": "^0.0.15",
     "shallowequal": "^0.2.2"
   }

src/Actions.js

@@ -55,7 +55,7 @@ export default class Actions extends React.Component {
     return (
       <TouchableOpacity
         style={[styles.container, this.props.containerStyle]}
-        onPress={this.onActionsPress}
+        onPress={this.props.onPressActionButton || this.onActionsPress}
       >
         {this.renderIcon()}
       </TouchableOpacity>
@@ -103,6 +103,7 @@ Actions.propTypes = {
   options: React.PropTypes.object,
   optionTintColor: React.PropTypes.string,
   icon: React.PropTypes.func,
+  onPressActionButton: React.PropTypes.func,
   containerStyle: View.propTypes.style,
   iconTextStyle: Text.propTypes.style,
 };

src/Avatar.js

@@ -81,8 +81,14 @@ Avatar.propTypes = {
   position: React.PropTypes.oneOf(['left', 'right']),
   currentMessage: React.PropTypes.object,
   nextMessage: React.PropTypes.object,
-  containerStyle: View.propTypes.style,
-  imageStyle: React.PropTypes.oneOfType([View.propTypes.style, Image.propTypes.style]),
+  containerStyle: React.PropTypes.shape({
+    left: View.propTypes.style,
+    right: View.propTypes.style,
+  }),
+  imageStyle: React.PropTypes.shape({
+    left: View.propTypes.style,
+    right: View.propTypes.style,
+  }),
   //TODO: remove in next major release
   isSameDay: React.PropTypes.func,
   isSameUser: React.PropTypes.func

src/Bubble.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  Text,
   Clipboard,
   StyleSheet,
   TouchableWithoutFeedback,
@@ -54,6 +55,24 @@ export default class Bubble extends React.Component {
     return null;
   }
 
+  renderTicks() {
+    const {currentMessage} = this.props;
+    if (this.props.renderTicks) {
+        return this.props.renderTicks(currentMessage);
+    }
+    if (currentMessage.user._id !== this.props.user._id) {
+        return;
+    }
+    if (currentMessage.sent || currentMessage.received) {
+      return (
+        <View style={styles.tickView}>
+          {currentMessage.sent && <Text style={[styles.tick, this.props.tickStyle]}>✓</Text>}
+          {currentMessage.received && <Text style={[styles.tick, this.props.tickStyle]}>✓</Text>}
+        </View>
+      )
+    }
+  }
+
   renderTime() {
     if (this.props.currentMessage.createdAt) {
       const {containerStyle, wrapperStyle, ...timeProps} = this.props;
@@ -110,7 +129,10 @@ export default class Bubble extends React.Component {
               {this.renderCustomView()}
               {this.renderMessageImage()}
               {this.renderMessageText()}
-              {this.renderTime()}
+              <View style={styles.bottom}>
+                {this.renderTime()}
+                {this.renderTicks()}
+              </View>
             </View>
           </TouchableWithoutFeedback>
         </View>
@@ -158,6 +180,19 @@ const styles = {
       borderTopRightRadius: 3,
     },
   }),
+  bottom: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  tick: {
+    fontSize: 10,
+    backgroundColor: 'transparent',
+    color: 'white',
+  },
+  tickView: {
+    flexDirection: 'row',
+    marginRight: 10,
+  }
 };
 
 Bubble.contextTypes = {
@@ -181,6 +216,7 @@ Bubble.defaultProps = {
   previousMessage: {},
   containerStyle: {},
   wrapperStyle: {},
+  tickStyle: {},
   containerToNextStyle: {},
   containerToPreviousStyle: {},
   //TODO: remove in next major release
@@ -207,6 +243,7 @@ Bubble.propTypes = {
     left: View.propTypes.style,
     right: View.propTypes.style,
   }),
+  tickStyle: Text.propTypes.style,
   containerToNextStyle: React.PropTypes.shape({
     left: View.propTypes.style,
     right: View.propTypes.style,

src/GiftedChat.js

@@ -64,6 +64,7 @@ class GiftedChat extends React.Component {
 
     this.invertibleScrollViewProps = {
       inverted: true,
+      keyboardShouldPersistTaps: this.props.keyboardShouldPersistTaps,
       onKeyboardWillShow: this.onKeyboardWillShow,
       onKeyboardWillHide: this.onKeyboardWillHide,
       onKeyboardDidShow: this.onKeyboardDidShow,
@@ -454,6 +455,10 @@ GiftedChat.defaultProps = {
     ios: true,
     android: false,
   }),
+  keyboardShouldPersistTaps: Platform.select({
+    ios: 'never',
+    android: 'always',
+  }),
   renderAccessory: null,
   renderActions: null,
   renderAvatar: null,
@@ -503,6 +508,7 @@ GiftedChat.propTypes = {
   user: React.PropTypes.object,
   bottomOffset: React.PropTypes.number,
   isLoadingEarlier: React.PropTypes.bool,
+  keyboardShouldPersistTaps: React.PropTypes.string,
 };
 
 export {

src/InputToolbar.js

@@ -6,11 +6,14 @@ import {
 
 import Composer from './Composer';
 import Send from './Send';
+import Actions from './Actions';
 
 export default class InputToolbar extends React.Component {
   renderActions() {
     if (this.props.renderActions) {
       return this.props.renderActions(this.props);
+    } else if (this.props.onPressActionButton) {
+      return <Actions {...this.props} />;
     }
     return null;
   }
@@ -89,6 +92,7 @@ InputToolbar.propTypes = {
   renderActions: React.PropTypes.func,
   renderSend: React.PropTypes.func,
   renderComposer: React.PropTypes.func,
+  onPressActionButton: React.PropTypes.func,
   containerStyle: View.propTypes.style,
   primaryStyle: View.propTypes.style,
   accessoryStyle: View.propTypes.style,

src/MessageImage.js

@@ -3,16 +3,28 @@ import {
   Image,
   StyleSheet,
   View,
+  Dimensions,
 } from 'react-native';
+import Lightbox from 'react-native-lightbox';
 
 export default class MessageImage extends React.Component {
   render() {
+    const { width, height } = Dimensions.get('window');
+
     return (
       <View style={[styles.container, this.props.containerStyle]}>
-        <Image
-          style={[styles.image, this.props.imageStyle]}
-          source={{uri: this.props.currentMessage.image}}
-        />
+        <Lightbox
+          activeProps={{
+            style: [styles.imageActive, { width, height }],
+          }}
+          {...this.props.lightboxProps}
+        >
+          <Image
+            {...this.props.imageProps}
+            style={[styles.image, this.props.imageStyle]}
+            source={{uri: this.props.currentMessage.image}}
+          />
+        </Lightbox>
       </View>
     );
   }
@@ -28,6 +40,9 @@ const styles = StyleSheet.create({
     margin: 3,
     resizeMode: 'cover',
   },
+  imageActive: {
+    resizeMode: 'contain',
+  },
 });
 
 MessageImage.defaultProps = {
@@ -36,10 +51,14 @@ MessageImage.defaultProps = {
   },
   containerStyle: {},
   imageStyle: {},
+  imageProps: {},
+  lightboxProps: {},
 };
 
 MessageImage.propTypes = {
   currentMessage: React.PropTypes.object,
   containerStyle: View.propTypes.style,
   imageStyle: Image.propTypes.style,
+  imageProps: React.PropTypes.object,
+  lightboxProps: React.PropTypes.object,
 };