Fix image position, Add hideTextInput prop

Author: FaridSafi

GiftedMessenger.js

@@ -45,6 +45,7 @@ var GiftedMessenger = React.createClass({
       sendButtonText: 'Send',
       onImagePress: null,
       inverted: true,
+      hideTextInput: false,
     };
   },
 
@@ -69,13 +70,19 @@ var GiftedMessenger = React.createClass({
     sendButtonText: React.PropTypes.string,
     onImagePress: React.PropTypes.func,
     inverted: React.PropTypes.bool,
+    hideTextInput: React.PropTypes.bool,
   },
 
   getInitialState: function() {
     this._data = [];
     this._rowIds = [];
 
-    this.listViewMaxHeight = this.props.maxHeight - 44; // 44 is height of textInput
+    var textInputHeight = 0;
+    if (this.props.hideTextInput === false) {
+      textInputHeight = 44;
+    }
+    
+    this.listViewMaxHeight = this.props.maxHeight - textInputHeight;
 
     var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
       if (typeof r1.status !== 'undefined') {
@@ -173,18 +180,33 @@ var GiftedMessenger = React.createClass({
 
   renderImage(rowData = {}, rowID = null) {
     if (rowData.image !== null) {
-      if (typeof this.props.onImagePress === 'function') {
-        return (
-          <TouchableHighlight 
-            underlayColor='transparent'
-            onPress={() => this.props.onImagePress(rowData, rowID)}
-          >
-            <Image source={rowData.image} style={[this.styles.image, (rowData.position === 'left' ? this.styles.imageLeft : this.styles.imageRight)]}/>
-          </TouchableHighlight>
-        );        
+      
+      var diffMessage = null;
+      if (this.props.inverted === false) {
+        diffMessage = null; // force rendering
+      } else {
+        diffMessage = this.getNextMessage(rowID);
+      }
+      
+      if (diffMessage === null || (this._data[rowID].name !== diffMessage.name || this._data[rowID].id !== diffMessage.id)) {
+        if (typeof this.props.onImagePress === 'function') {
+          return (
+            <TouchableHighlight 
+              underlayColor='transparent'
+              onPress={() => this.props.onImagePress(rowData, rowID)}
+              style={this.styles.imagePosition}
+            >
+              <Image source={rowData.image} style={[this.styles.imagePosition, this.styles.image, (rowData.position === 'left' ? this.styles.imageLeft : this.styles.imageRight)]}/>
+            </TouchableHighlight>
+          );
+        } else {
+          return (
+            <Image source={rowData.image} style={[this.styles.imagePosition, this.styles.image, (rowData.position === 'left' ? this.styles.imageLeft : this.styles.imageRight)]}/>
+          );
+        }
       } else {
         return (
-          <Image source={rowData.image} style={[this.styles.image, (rowData.position === 'left' ? this.styles.imageLeft : this.styles.imageRight)]}/>
+          <View style={this.styles.imagePosition}/>
         );
       }
     }
@@ -516,25 +538,28 @@ var GiftedMessenger = React.createClass({
   },
 
   renderTextInput() {
-    return (
-      <View style={this.styles.textInputContainer}>
-        <TextInput
-          style={this.styles.textInput}
-          placeholder={this.props.placeholder}
-          ref='textInput'
-          onChangeText={this.onChangeText}
-          value={this.state.text}
-          autoFocus={this.props.autoFocus}
-        />
-        <Button
-          style={this.styles.sendButton}
-          onPress={this.onSend}
-          disabled={this.state.disabled}
-        >
-          {this.props.sendButtonText}
-        </Button>
-      </View>
-    );
+    if (this.props.hideTextInput === false) {
+      return (
+        <View style={this.styles.textInputContainer}>
+          <TextInput
+            style={this.styles.textInput}
+            placeholder={this.props.placeholder}
+            ref='textInput'
+            onChangeText={this.onChangeText}
+            value={this.state.text}
+            autoFocus={this.props.autoFocus}
+          />
+          <Button
+            style={this.styles.sendButton}
+            onPress={this.onSend}
+            disabled={this.state.disabled}
+          >
+            {this.props.sendButtonText}
+          </Button>
+        </View>
+      ); 
+    }
+    return null;
   },
 
   componentWillMount() {
@@ -585,13 +610,16 @@ var GiftedMessenger = React.createClass({
         flexDirection: 'row',
         marginBottom: 10,
       },
-      image: {
+      imagePosition: {
         height: 30,
         width: 30,
-        borderRadius: 15,
         alignSelf: 'flex-end',
         marginLeft: 8,
-        marginRight: 8,
+        marginRight: 8,        
+      },
+      image: {
+        alignSelf: 'center',
+        borderRadius: 15,
       },
       imageLeft: {
       },

README.md

@@ -4,6 +4,9 @@ Ready-to-use chat interface for iOS and Android React-Native apps
 ![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-messenger/master/screenshots/messenger-1.png)
 ![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-messenger/master/screenshots/messenger-2.png)
 
+### Changelog
+- 0.0.3 Fix image position, Add hideTextInput prop
+
 ### Example
 
 ```js
@@ -35,7 +38,7 @@ var GiftedMessengerExample = React.createClass({
         ref='GiftedMessenger'
         initialMessages={this.getInitialMessages()}
         handleSend={this.handleSend}
-        maxHeight={Dimensions.get('window').height - navBarHeight} // 64 for the navBar
+        maxHeight={Dimensions.get('window').height - 64} // 64 for the navBar
 
         styles={{
           bubbleLeft: {
@@ -88,8 +91,9 @@ See [GiftedMessengerExample/GiftedMessengerExample.js](https://raw.githubusercon
 | handlePhonePress              | Function | Called when a parsed phone number is pressed                               | iOS      | (phone) => {}                    |
 | handleEmailPress              | Function | Called when a parsed email is pressed                                      | iOS      | (email) => {}                    |
 | inverted                      | Boolean  | Invert vertically the orientation of the chat                              | Both     | true                             |
+| hideTextInput                 | Boolean  | Hide or not the text input                                                 | Both     | false                            |
 
-* In Android React-Native 0.14.2, I recommend to use inverted={false} until issue [#3557](https://github.com/facebook/react-native/issues/3557) is fixed 
+* In React-Native 0.14.2, I recommend to use inverted={false} only in Android until issue [#3557](https://github.com/facebook/react-native/issues/3557) is fixed 
 
 
 ### API

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-messenger",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "The chat of your next React-Native Apps",
   "main": "GiftedMessenger.js",
   "scripts": {