react-native-gifted-chat - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

package.json

 {
   "name": "react-native-gifted-chat",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "The most complete chat UI for React Native",
@@ -5,0 +5,0 @@ "main": "index.js",

src/Avatar.js

@@ -12,3 +12,4 @@ import React from 'react';
     if (this.props.renderAvatar) {
-      return this.props.renderAvatar(this.props);
+      const {renderAvatar, ...avatarProps} = this.props;
+      return this.props.renderAvatar(avatarProps);
     }
@@ -15,0 +16,0 @@ return (

src/Bubble.js

@@ -35,6 +35,7 @@ import React from 'react';
     if (this.props.currentMessage.text) {
+      const {containerStyle, wrapperStyle, ...messageTextProps} = this.props;
       if (this.props.renderMessageText) {
-        return this.props.renderMessageText(this.props);
+        return this.props.renderMessageText(messageTextProps);
       }
-      return <MessageText {...this.props}/>;
+      return <MessageText {...messageTextProps}/>;
     }
@@ -46,6 +47,7 @@ return null;
     if (this.props.currentMessage.image) {
+      const {containerStyle, wrapperStyle, ...messageImageProps} = this.props;
       if (this.props.renderMessageImage) {
-        return this.props.renderMessageImage(this.props);
+        return this.props.renderMessageImage(messageImageProps);
       }
-      return <MessageImage {...this.props}/>;
+      return <MessageImage {...messageImageProps}/>;
     }
@@ -57,6 +59,7 @@ return null;
     if (this.props.currentMessage.createdAt) {
+      const {containerStyle, wrapperStyle, ...timeProps} = this.props;
       if (this.props.renderTime) {
-        return this.props.renderTime(this.props);
+        return this.props.renderTime(timeProps);
       }
-      return <Time {...this.props}/>;
+      return <Time {...timeProps}/>;
     }
@@ -63,0 +66,0 @@ return null;

src/Composer.js

@@ -14,3 +14,3 @@ import React from 'react';
         placeholderTextColor={this.props.placeholderTextColor}
-        multiline={true}
+        multiline={this.props.multiline}
         onChange={(e) => {
@@ -59,2 +59,3 @@ this.props.onChange(e);
   textInputProps: null,
+  multiline: true,
 };
@@ -70,2 +71,3 @@
   textInputProps: React.PropTypes.object,
+  multiline: React.PropTypes.bool,
 };

src/GiftedChat.js

@@ -45,2 +45,3 @@ import React from 'react';
     this._keyboardHeight = 0;
+    this._bottomOffset = 0;
     this._maxHeight = null;
@@ -160,2 +161,10 @@ this._touchStarted = false;
 
+  setBottomOffset(value) {
+    this._bottomOffset = value;
+  }
+
+  getBottomOffset() {
+    return this._bottomOffset;
+  }
+
   setIsFirstLayout(value) {
@@ -204,3 +213,4 @@ this._isFirstLayout = value;
     this.setKeyboardHeight(e.endCoordinates.height);
-    const newMessagesContainerHeight = (this.getMaxHeight() - (this.state.composerHeight + (this.getMinInputToolbarHeight() - MIN_COMPOSER_HEIGHT))) - this.getKeyboardHeight() + this.props.bottomOffset;
+    this.setBottomOffset(this.props.bottomOffset);
+    const newMessagesContainerHeight = (this.getMaxHeight() - (this.state.composerHeight + (this.getMinInputToolbarHeight() - MIN_COMPOSER_HEIGHT))) - this.getKeyboardHeight() + this.getBottomOffset();
     if (this.props.isAnimated === true) {
@@ -223,2 +233,3 @@ Animated.timing(this.state.messagesContainerHeight, {
     this.setKeyboardHeight(0);
+    this.setBottomOffset(0);
     const newMessagesContainerHeight = this.getMaxHeight() - (this.state.composerHeight + (this.getMinInputToolbarHeight() - MIN_COMPOSER_HEIGHT));
@@ -332,3 +343,3 @@ if (this.props.isAnimated === true) {
         composerHeight: MIN_COMPOSER_HEIGHT,
-        messagesContainerHeight: this.prepareMessagesContainerHeight(this.getMaxHeight() - this.getMinInputToolbarHeight() - this.getKeyboardHeight() + this.props.bottomOffset),
+        messagesContainerHeight: this.prepareMessagesContainerHeight(this.getMaxHeight() - this.getMinInputToolbarHeight() - this.getKeyboardHeight() + this.getBottomOffset()),
       };
@@ -346,4 +357,11 @@ });
     }
-    const newComposerHeight = Math.max(MIN_COMPOSER_HEIGHT, Math.min(MAX_COMPOSER_HEIGHT, e.nativeEvent.contentSize.height));
-    const newMessagesContainerHeight = this.getMaxHeight() - this.calculateInputToolbarHeight(newComposerHeight) - this.getKeyboardHeight() + this.props.bottomOffset;
+
+    let newComposerHeight = null;
+    if (e.nativeEvent && e.nativeEvent.contentSize) {
+      newComposerHeight = Math.max(MIN_COMPOSER_HEIGHT, Math.min(MAX_COMPOSER_HEIGHT, e.nativeEvent.contentSize.height));
+    } else {
+      newComposerHeight = MIN_COMPOSER_HEIGHT;
+    }
+
+    const newMessagesContainerHeight = this.getMaxHeight() - this.calculateInputToolbarHeight(newComposerHeight) - this.getKeyboardHeight() + this.getBottomOffset();
     const newText = e.nativeEvent.text;
@@ -350,0 +368,0 @@ this.setState((previousState) => {

src/Message.js

@@ -39,4 +39,5 @@ import React from 'react';
     if (this.props.currentMessage.createdAt) {
+      const {containerStyle, ...other} = this.props;
       const dayProps = {
-        ...this.props,
+        ...other,
         isSameUser: this.isSameUser,
@@ -54,4 +55,5 @@ isSameDay: this.isSameDay,
   renderBubble() {
+    const {containerStyle, ...other} = this.props;
     const bubbleProps = {
-      ...this.props,
+      ...other,
       isSameUser: this.isSameUser,
@@ -68,7 +70,9 @@ isSameDay: this.isSameDay,
     if (this.props.user._id !== this.props.currentMessage.user._id) {
+      const {containerStyle, ...other} = this.props;
       const avatarProps = {
-        ...this.props,
+        ...other,
         isSameUser: this.isSameUser,
         isSameDay: this.isSameDay,
       };
+
       return <Avatar {...avatarProps}/>;
@@ -75,0 +79,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

56691

1.62%

Lines of code

1842

1.26%

No dependency changes