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

Comparing version 0.1.4 to 0.1.5

package.json

 {
   "name": "react-native-gifted-chat",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "The most complete chat UI for React Native",
@@ -39,6 +39,6 @@ "main": "index.js",
   "dependencies": {
-    "@expo/react-native-action-sheet": "0.3.0",
+    "@expo/react-native-action-sheet": "0.3.1",
     "md5": "2.2.1",
     "moment": "2.17.1",
-    "react-native-communications": "2.1.1",
+    "react-native-communications": "2.2.1",
     "react-native-invertible-scroll-view": "1.0.0",
@@ -45,0 +45,0 @@ "react-native-lightbox": "oblador/react-native-lightbox#c84a8543d4511fe6a44c3d7820747c9c1bddd875",

README.md

@@ -108,5 +108,7 @@ # Gifted Chat
 - **`renderLoadEarlier`** _(Function)_ - render the load earlier button
-- **`renderAvatar`** _(Function)_ - renders the message avatar
+- **`renderAvatar`** _(Function)_ - renders the message avatar. Set to `null` to not render any avatar for the message
+- **`onPressAvatar`** _(Function(`user`))_ - callback when a message avatar is tapped
 - **`renderAvatarOnTop`** _(Bool)_ - render the message avatar, on top of consecutive messages. The default value is `false`.
 - **`renderBubble`** _(Function)_ - render the message bubble
+- **`onLongPress`** _(Function(`context`, `message`))_ - callback when a message bubble is long-pressed (default is to show action sheet with "Copy Text"). See code for example using `context.actionSheet().showActionSheetWithOptions()`.
 - **`renderMessage`** _(Function)_ - render the message container
@@ -132,2 +134,3 @@ - **`renderMessageText`** _(Function)_ - render the message text
 - **`onInputTextChanged`** _(Function)_ - function that will be called when input text changes
+- **`maxInputLength`** _(Integer)_ - max Composer TextInput length
 
@@ -134,0 +137,0 @@ ## Features

src/Avatar.js

@@ -16,2 +16,3 @@ import React from "react";
         user={this.props.currentMessage.user}
+        onPress={() => this.props.onPressAvatar && this.props.onPressAvatar(this.props.currentMessage.user)}
       />
@@ -26,2 +27,6 @@ );
 
+    if (this.props.renderAvatar === null) {
+      return null
+    }
+
     if (isSameUser(this.props.currentMessage, messageToCompare) && isSameDay(this.props.currentMessage, messageToCompare)) {
@@ -36,2 +41,3 @@ return (
     }
+    
     return (
@@ -96,2 +102,3 @@ <View
   nextMessage: React.PropTypes.object,
+  onPressAvatar: React.PropTypes.func,
   containerStyle: React.PropTypes.shape({
@@ -98,0 +105,0 @@ left: View.propTypes.style,

src/Bubble.js

@@ -96,3 +96,3 @@ import React from 'react';
     if (this.props.onLongPress) {
-      this.props.onLongPress(this.context);
+      this.props.onLongPress(this.context, this.props.currentMessage);
     } else {
@@ -99,0 +99,0 @@ if (this.props.currentMessage.text) {

src/GiftedAvatar.js

@@ -58,2 +58,9 @@ /*
       );
+    } else if (typeof this.props.user.avatar === 'number') {
+      return (
+        <Image
+          source={this.props.user.avatar}
+          style={[defaultStyles.avatarStyle, this.props.avatarStyle]}
+        />
+      );
     }
@@ -60,0 +67,0 @@ return null;

src/GiftedChat.js

 import React from 'react';
 import {
   Animated,
-  InteractionManager,
   Platform,
@@ -158,3 +157,10 @@ StyleSheet,
   getKeyboardHeight() {
-    return this._keyboardHeight;
+    if (Platform.OS === 'android') {
+      // For android: on-screen keyboard resized main container and has own height.
+      // @see https://developer.android.com/training/keyboard-input/visibility.html
+      // So for calculate the messages container height ignore keyboard height.
+      return 0;
+    } else {
+      return this._keyboardHeight;
+    }
   }
@@ -202,2 +208,20 @@
 
+  calculateInputToolbarHeight(composerHeight) {
+    return composerHeight + (this.getMinInputToolbarHeight() - MIN_COMPOSER_HEIGHT);
+  }
+
+  /**
+   * Returns the height, based on current window size, without taking the keyboard into account.
+   */
+  getBasicMessagesContainerHeight(composerHeight = this.state.composerHeight) {
+    return this.getMaxHeight() - this.calculateInputToolbarHeight(composerHeight);
+  }
+
+  /**
+   * Returns the height, based on current window size, taking the keyboard into account.
+   */
+  getMessagesContainerHeightWithKeyboard(composerHeight = this.state.composerHeight) {
+    return this.getBasicMessagesContainerHeight(composerHeight) - this.getKeyboardHeight() + this.getBottomOffset();
+  }
+
   prepareMessagesContainerHeight(value) {
@@ -214,3 +238,3 @@ if (this.props.isAnimated === true) {
     this.setBottomOffset(this.props.bottomOffset);
-    const newMessagesContainerHeight = (this.getMaxHeight() - (this.state.composerHeight + (this.getMinInputToolbarHeight() - MIN_COMPOSER_HEIGHT))) - this.getKeyboardHeight() + this.getBottomOffset();
+    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard();
     if (this.props.isAnimated === true) {
@@ -232,3 +256,3 @@ Animated.timing(this.state.messagesContainerHeight, {
     this.setBottomOffset(0);
-    const newMessagesContainerHeight = this.getMaxHeight() - (this.state.composerHeight + (this.getMinInputToolbarHeight() - MIN_COMPOSER_HEIGHT));
+    const newMessagesContainerHeight = this.getBasicMessagesContainerHeight();
     if (this.props.isAnimated === true) {
@@ -323,16 +347,14 @@ Animated.timing(this.state.messagesContainerHeight, {
     }
+    const newComposerHeight = MIN_COMPOSER_HEIGHT;
+    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
     this.setState({
       text: '',
-      composerHeight: MIN_COMPOSER_HEIGHT,
-      messagesContainerHeight: this.prepareMessagesContainerHeight(this.getMaxHeight() - this.getMinInputToolbarHeight() - this.getKeyboardHeight() + this.getBottomOffset()),
+      composerHeight: newComposerHeight,
+      messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
     });
   }
 
-  calculateInputToolbarHeight(newComposerHeight) {
-    return newComposerHeight + (this.getMinInputToolbarHeight() - MIN_COMPOSER_HEIGHT);
-  }
-
   onInputSizeChanged(size) {
     const newComposerHeight = Math.max(MIN_COMPOSER_HEIGHT, Math.min(MAX_COMPOSER_HEIGHT, size.height));
-    const newMessagesContainerHeight = this.getMaxHeight() - this.calculateInputToolbarHeight(newComposerHeight) - this.getKeyboardHeight() + this.getBottomOffset();
+    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
     this.setState({
@@ -360,9 +382,9 @@ composerHeight: newComposerHeight,
     this.setMaxHeight(layout.height);
-    GiftedChatInteractionManager.runAfterInteractions(() => {
-      this.setState({
-        isInitialized: true,
-        text: '',
-        composerHeight: MIN_COMPOSER_HEIGHT,
-        messagesContainerHeight: this.prepareMessagesContainerHeight(this.getMaxHeight() - this.getMinInputToolbarHeight()),
-      });
+    const newComposerHeight = MIN_COMPOSER_HEIGHT;
+    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
+    this.setState({
+      isInitialized: true,
+      text: '',
+      composerHeight: newComposerHeight,
+      messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
     });
@@ -372,11 +394,9 @@ }
   onMainViewLayout(e) {
-    if (Platform.OS === 'android') {
-      // fix an issue when keyboard is dismissing during the initialization
-      const layout = e.nativeEvent.layout;
-      if (this.getMaxHeight() !== layout.height && this.getIsFirstLayout() === true) {
-        this.setMaxHeight(layout.height);
-        this.setState({
-          messagesContainerHeight: this.prepareMessagesContainerHeight(this.getMaxHeight() - this.getMinInputToolbarHeight()),
-        });
-      }
+    // fix an issue when keyboard is dismissing during the initialization
+    const layout = e.nativeEvent.layout;
+    if (this.getMaxHeight() !== layout.height || this.getIsFirstLayout() === true) {
+      this.setMaxHeight(layout.height);
+      this.setState({
+        messagesContainerHeight: this.prepareMessagesContainerHeight(this.getBasicMessagesContainerHeight()),
+      });
     }
@@ -399,3 +419,3 @@ if (this.getIsFirstLayout() === true) {
         ref: textInput => this.textInput = textInput,
-        maxLength: this.getIsTypingDisabled() ? 0 : null
+        maxLength: this.getIsTypingDisabled() ? 0 : this.props.maxInputLength
       }
@@ -481,3 +501,3 @@ };
   renderActions: null,
-  renderAvatar: null,
+  renderAvatar: undefined,
   renderBubble: null,
@@ -501,3 +521,4 @@ renderFooter: null,
   isLoadingEarlier: false,
-  messageIdGenerator: () => uuid.v4()
+  messageIdGenerator: () => uuid.v4(),
+  maxInputLength: null
 };
@@ -504,0 +525,0 @@

src/Message.js

@@ -89,3 +89,3 @@ import React from 'react';
 Message.defaultProps = {
-  renderAvatar: null,
+  renderAvatar: undefined,
   renderBubble: null,
@@ -92,0 +92,0 @@ renderDay: null,

src/utils.js

@@ -7,2 +7,6 @@ import moment from 'moment';
 
+  if (!diffMessage.createdAt) {
+    return false
+  }
+
   let currentCreatedAt = moment(currentMessage.createdAt);
@@ -9,0 +13,0 @@ let diffCreatedAt = moment(diffMessage.createdAt);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

183662

increased by11.48%

Lines of code

2050

increased by1.69%

Number of lines in readme file

151

increased by2.03%

Worsened metrics

Number of package files

32

decreased by-13.51%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@expo/react-native-action-sheet@0.3.1(transitive)

• + Addedreact-native-communications@2.2.1(transitive)

• - Removed@expo/react-native-action-sheet@0.3.0(transitive)

• - Removedreact-native-communications@2.1.1(transitive)

• Updated@expo/react-native-action-sheet@0.3.1

• Updatedreact-native-communications@2.2.1