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

Comparing version 0.1.3 to 0.1.4

package.json

 {
   "name": "react-native-gifted-chat",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "The most complete chat UI for React Native",
@@ -39,3 +39,3 @@ "main": "index.js",
   "dependencies": {
-    "@exponent/react-native-action-sheet": "0.3.0",
+    "@expo/react-native-action-sheet": "0.3.0",
     "md5": "2.2.1",
@@ -42,0 +42,0 @@ "moment": "2.17.1",

README.md

@@ -109,2 +109,3 @@ # Gifted Chat
 - **`renderAvatar`** _(Function)_ - renders the message avatar
+- **`renderAvatarOnTop`** _(Bool)_ - render the message avatar, on top of consecutive messages. The default value is `false`.
 - **`renderBubble`** _(Function)_ - render the message bubble
@@ -127,2 +128,3 @@ - **`renderMessage`** _(Function)_ - render the message container
 - **`bottomOffset`** _(Integer)_ - distance of the chat from the bottom of the screen, useful if you display a tab bar
+- **`minInputToolbarHeight`** _(Integer)_ - minimum height of the input toolbar. The default value is `44`.
 - **`listViewProps`** _(Object)_ - extra props to be passed to the [`<ListView>`](https://facebook.github.io/react-native/docs/listview.html), some props can not be override, see the code in `render` method of `MessageContainer` for detail
@@ -129,0 +131,0 @@ - **`keyboardShouldPersistTaps`** _(Enum)_ - determines when the keyboard should stay visible after a tap [`<ScrollView>`](https://facebook.github.io/react-native/docs/scrollview.html)

src/Avatar.js

@@ -1,12 +0,6 @@
-import React from 'react';
-import {
-  Image,
-  StyleSheet,
-  View,
-} from 'react-native';
+import React from "react";
+import {Image, StyleSheet, View} from "react-native";
+import GiftedAvatar from "./GiftedAvatar";
+import {isSameUser, isSameDay, warnDeprecated} from "./utils";
 
-import GiftedAvatar from './GiftedAvatar';
-
-import { isSameUser, isSameDay, warnDeprecated } from './utils';
-
 export default class Avatar extends React.Component {
@@ -27,3 +21,7 @@ renderAvatar() {
   render() {
-    if (isSameUser(this.props.currentMessage, this.props.nextMessage) && isSameDay(this.props.currentMessage, this.props.nextMessage)) {
+    const renderAvatarOnTop = this.props.renderAvatarOnTop;
+    const messageToCompare = renderAvatarOnTop ? this.props.previousMessage : this.props.nextMessage;
+    const computedStyle = renderAvatarOnTop ? "onTop" : "onBottom"
+
+    if (isSameUser(this.props.currentMessage, messageToCompare) && isSameDay(this.props.currentMessage, messageToCompare)) {
       return (
@@ -38,3 +36,4 @@ <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
     return (
-      <View style={[styles[this.props.position].container, this.props.containerStyle[this.props.position]]}>
+      <View
+        style={[styles[this.props.position].container, styles[this.props.position][computedStyle], this.props.containerStyle[this.props.position]]}>
         {this.renderAvatar()}
@@ -49,4 +48,8 @@ </View>
     container: {
-      marginRight: 8,
+      marginRight: 8
     },
+    onTop: {
+      alignSelf: "flex-start"
+    },
+    onBottom: {},
     image: {
@@ -62,2 +65,6 @@ height: 36,
     },
+    onTop: {
+      alignSelf: "flex-start"
+    },
+    onBottom: {},
     image: {
@@ -72,2 +79,3 @@ height: 36,
 Avatar.defaultProps = {
+  renderAvatarOnTop: false,
   position: 'left',
@@ -86,2 +94,3 @@ currentMessage: {
 Avatar.propTypes = {
+  renderAvatarOnTop: React.PropTypes.bool,
   position: React.PropTypes.oneOf(['left', 'right']),
@@ -88,0 +97,0 @@ currentMessage: React.PropTypes.object,

src/Bubble.js

@@ -132,3 +132,3 @@ import React from 'react';
               {this.renderMessageText()}
-              <View style={styles.bottom}>
+              <View style={[styles.bottom, this.props.bottomContainerStyle[this.props.position]]}>
                 {this.renderTime()}
@@ -220,2 +220,3 @@ {this.renderTicks()}
   wrapperStyle: {},
+  bottomContainerStyle: {},
   tickStyle: {},
@@ -248,2 +249,6 @@ containerToNextStyle: {},
   }),
+  bottomContainerStyle: React.PropTypes.shape({
+    left: View.propTypes.style,
+    right: View.propTypes.style,
+  }),
   tickStyle: Text.propTypes.style,
@@ -250,0 +255,0 @@ containerToNextStyle: React.PropTypes.shape({

src/GiftedChat.js

@@ -10,3 +10,3 @@ import React from 'react';
 
-import ActionSheet from '@exponent/react-native-action-sheet';
+import ActionSheet from '@expo/react-native-action-sheet';
 import moment from 'moment/min/moment-with-locales.min';
@@ -30,2 +30,3 @@ import uuid from 'uuid';
 import GiftedAvatar from './GiftedAvatar';
+import GiftedChatInteractionManager from './GiftedChatInteractionManager';
 
@@ -40,3 +41,2 @@ // Min and max heights of ToolbarInput and Composer
 const MAX_COMPOSER_HEIGHT = 100;
-const MIN_INPUT_TOOLBAR_HEIGHT = 44;
 
@@ -201,6 +201,3 @@ class GiftedChat extends React.Component {
   getMinInputToolbarHeight() {
-    if (this.props.renderAccessory) {
-      return MIN_INPUT_TOOLBAR_HEIGHT * 2;
-    }
-    return MIN_INPUT_TOOLBAR_HEIGHT;
+    return this.props.renderAccessory ? this.props.minInputToolbarHeight * 2 : this.props.minInputToolbarHeight;
   }
@@ -264,2 +261,3 @@
   scrollToBottom(animated = true) {
+    if (this._messageContainerRef === null) { return }
     this._messageContainerRef.scrollTo({
@@ -329,3 +327,3 @@ y: 0,
       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()),
     });
@@ -363,3 +361,3 @@ }
     this.setMaxHeight(layout.height);
-    InteractionManager.runAfterInteractions(() => {
+    GiftedChatInteractionManager.runAfterInteractions(() => {
       this.setState({
@@ -499,2 +497,3 @@ isInitialized: true,
   bottomOffset: 0,
+  minInputToolbarHeight: 44,
   isLoadingEarlier: false,
@@ -531,2 +530,3 @@ messageIdGenerator: () => uuid.v4()
   bottomOffset: React.PropTypes.number,
+  minInputToolbarHeight: React.PropTypes.number,
   isLoadingEarlier: React.PropTypes.bool,
@@ -549,2 +549,3 @@ messageIdGenerator: React.PropTypes.func,
   Message,
+  MessageContainer,
   Send,
@@ -551,0 +552,0 @@ Time,

src/MessageContainer.js

@@ -149,3 +149,2 @@ import React from 'react';
 
-          enableEmptySections={true}
           dataSource={this.state.dataSource}
@@ -152,0 +151,0 @@

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

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

164750

increased by2.32%

Number of package files

37

increased by2.78%

Lines of code

2016

increased by1.51%

Number of lines in readme file

148

increased by1.37%

Dependency changes

• + Added@expo/react-native-action-sheet@0.3.0

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

• + Addedhoist-non-react-statics@1.2.0(transitive)

• - Removed@exponent/react-native-action-sheet@0.3.0

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