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

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "react-native-gifted-chat",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "The most complete chat UI for React Native",
@@ -42,2 +42,3 @@ "main": "index.js",
     "moment": "2.18.1",
+    "prop-types": "15.5.10",
     "react-native-communications": "2.2.1",
@@ -44,0 +45,0 @@ "react-native-invertible-scroll-view": "1.0.0",

README.md

@@ -110,2 +110,4 @@ # Gifted Chat
 - **`locale`** _(String)_ - Locale to localize the dates
+- **`timeFormat`** _(String)_ - Format to use for rendering times; default is 'LT'
+- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is 'll'
 - **`isAnimated`** _(Bool)_ - Animates the view when the keyboard appears
@@ -146,2 +148,4 @@ - **`loadEarlier`** _(Bool)_ - Enables the "Load earlier messages" button
 
+If you are using Create React Native App / Expo, no Android specific installation steps are required -- you can skip this seciton. Otherwise we recommend modifying your project configuration as follows.
+
 - Make sure you have `android:windowSoftInputMode="adjustResize"` in your `AndroidManifest.xml`:
@@ -159,2 +163,16 @@
 
+## Notes for local development
+
+You can use [`wml`](https://github.com/wix/wml) to keep the example app in sync
+with any changes you make to the library during development. Steps:
+
+1. Install it: `npm install -g wml`
+2. Configure it: `wml add . example/node_modules/react-native-gifted-chat` from the root directory
+3. `cd example`
+4. `npm start`
+5. `wml start` in another terminal window (doesn't matter where)
+
+Note that it's important for `wml start` to come **after** `npm start`, or you'll get `Can't find entry file index.js` errors.
+If you have any issues, you can clear your watches using `watchman watch-del-all` and try again.
+
 ## License
@@ -161,0 +179,0 @@

src/Actions.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -90,3 +91,3 @@ import {
 Actions.contextTypes = {
-  actionSheet: React.PropTypes.func,
+  actionSheet: PropTypes.func,
 };
@@ -104,9 +105,9 @@
 Actions.propTypes = {
-  onSend: React.PropTypes.func,
-  options: React.PropTypes.object,
-  optionTintColor: React.PropTypes.string,
-  icon: React.PropTypes.func,
-  onPressActionButton: React.PropTypes.func,
+  onSend: PropTypes.func,
+  options: PropTypes.object,
+  optionTintColor: PropTypes.string,
+  icon: PropTypes.func,
+  onPressActionButton: PropTypes.func,
   containerStyle: ViewPropTypes.style,
   iconTextStyle: Text.propTypes.style,
 };

src/Avatar.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from "react";
@@ -39,3 +40,3 @@ import {Image, StyleSheet, View, ViewPropTypes} from "react-native";
     }
-    
+
     return (
@@ -96,12 +97,12 @@ <View
 Avatar.propTypes = {
-  renderAvatarOnTop: React.PropTypes.bool,
-  position: React.PropTypes.oneOf(['left', 'right']),
-  currentMessage: React.PropTypes.object,
-  nextMessage: React.PropTypes.object,
-  onPressAvatar: React.PropTypes.func,
-  containerStyle: React.PropTypes.shape({
+  renderAvatarOnTop: PropTypes.bool,
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  onPressAvatar: PropTypes.func,
+  containerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  imageStyle: React.PropTypes.shape({
+  imageStyle: PropTypes.shape({
     left: ViewPropTypes.style,
@@ -111,4 +112,4 @@ right: ViewPropTypes.style,
   //TODO: remove in next major release
-  isSameDay: React.PropTypes.func,
-  isSameUser: React.PropTypes.func
+  isSameDay: PropTypes.func,
+  isSameUser: PropTypes.func
 };

src/Bubble.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -200,3 +201,3 @@ import {
 Bubble.contextTypes = {
-  actionSheet: React.PropTypes.func,
+  actionSheet: PropTypes.func,
 };
@@ -231,21 +232,21 @@
 Bubble.propTypes = {
-  touchableProps: React.PropTypes.object,
-  onLongPress: React.PropTypes.func,
-  renderMessageImage: React.PropTypes.func,
-  renderMessageText: React.PropTypes.func,
-  renderCustomView: React.PropTypes.func,
-  renderTime: React.PropTypes.func,
-  position: React.PropTypes.oneOf(['left', 'right']),
-  currentMessage: React.PropTypes.object,
-  nextMessage: React.PropTypes.object,
-  previousMessage: React.PropTypes.object,
-  containerStyle: React.PropTypes.shape({
+  touchableProps: PropTypes.object,
+  onLongPress: PropTypes.func,
+  renderMessageImage: PropTypes.func,
+  renderMessageText: PropTypes.func,
+  renderCustomView: PropTypes.func,
+  renderTime: PropTypes.func,
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
+  containerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  wrapperStyle: React.PropTypes.shape({
+  wrapperStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  bottomContainerStyle: React.PropTypes.shape({
+  bottomContainerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
@@ -255,7 +256,7 @@ right: ViewPropTypes.style,
   tickStyle: Text.propTypes.style,
-  containerToNextStyle: React.PropTypes.shape({
+  containerToNextStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  containerToPreviousStyle: React.PropTypes.shape({
+  containerToPreviousStyle: PropTypes.shape({
     left: ViewPropTypes.style,
@@ -265,4 +266,4 @@ right: ViewPropTypes.style,
   //TODO: remove in next major release
-  isSameDay: React.PropTypes.func,
-  isSameUser: React.PropTypes.func,
+  isSameDay: PropTypes.func,
+  isSameUser: PropTypes.func,
 };

src/Composer.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -31,3 +32,3 @@ import {
 
-        onChange={(e) => this.onChange(e)}
+        onContentSizeChange={(e) => this.onChange(e)}
         onChangeText={text => this.onChangeText(text)}
@@ -84,12 +85,12 @@
 Composer.propTypes = {
-  onChange: React.PropTypes.func,
-  composerHeight: React.PropTypes.number,
-  text: React.PropTypes.string,
-  placeholder: React.PropTypes.string,
-  placeholderTextColor: React.PropTypes.string,
-  textInputProps: React.PropTypes.object,
-  onTextChanged: React.PropTypes.func,
-  onInputSizeChanged: React.PropTypes.func,
-  multiline: React.PropTypes.bool,
+  onChange: PropTypes.func,
+  composerHeight: PropTypes.number,
+  text: PropTypes.string,
+  placeholder: PropTypes.string,
+  placeholderTextColor: PropTypes.string,
+  textInputProps: PropTypes.object,
+  onTextChanged: PropTypes.func,
+  onInputSizeChanged: PropTypes.func,
+  multiline: PropTypes.bool,
   textInputStyle: TextInput.propTypes.style,
 };

src/Day.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -15,2 +16,4 @@ import {
   render() {
+    const { dateFormat } = this.props;
+
     if (!isSameDay(this.props.currentMessage, this.props.previousMessage)) {
@@ -21,3 +24,3 @@ return (
             <Text style={[styles.text, this.props.textStyle]}>
-              {moment(this.props.currentMessage.createdAt).locale(this.context.getLocale()).format('ll').toUpperCase()}
+              {moment(this.props.currentMessage.createdAt).locale(this.context.getLocale()).format(dateFormat).toUpperCase()}
             </Text>
@@ -56,3 +59,3 @@ </View>
 Day.contextTypes = {
-  getLocale: React.PropTypes.func,
+  getLocale: PropTypes.func,
 };
@@ -72,7 +75,8 @@
   isSameUser: warnDeprecated(isSameUser),
+  dateFormat: 'll'
 };
 
 Day.propTypes = {
-  currentMessage: React.PropTypes.object,
-  previousMessage: React.PropTypes.object,
+  currentMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
   containerStyle: ViewPropTypes.style,
@@ -82,4 +86,5 @@ wrapperStyle: ViewPropTypes.style,
   //TODO: remove in next major release
-  isSameDay: React.PropTypes.func,
-  isSameUser: React.PropTypes.func,
+  isSameDay: PropTypes.func,
+  isSameUser: PropTypes.func,
+  dateFormat: PropTypes.string,
 };

src/GiftedAvatar.js

 /*
 **  This component will be published in a separate package
 */
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -157,6 +158,6 @@ import {
 GiftedAvatar.propTypes = {
-  user: React.PropTypes.object,
-  onPress: React.PropTypes.func,
+  user: PropTypes.object,
+  onPress: PropTypes.func,
   avatarStyle: Image.propTypes.style,
   textStyle: Text.propTypes.style,
 };

src/GiftedChat.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -471,4 +472,4 @@ import {
 GiftedChat.childContextTypes = {
-  actionSheet: React.PropTypes.func,
-  getLocale: React.PropTypes.func,
+  actionSheet: PropTypes.func,
+  getLocale: PropTypes.func,
 };
@@ -518,32 +519,32 @@
 GiftedChat.propTypes = {
-  messages: React.PropTypes.array,
-  onSend: React.PropTypes.func,
-  onInputTextChanged: React.PropTypes.func,
-  loadEarlier: React.PropTypes.bool,
-  onLoadEarlier: React.PropTypes.func,
-  locale: React.PropTypes.string,
-  isAnimated: React.PropTypes.bool,
-  renderAccessory: React.PropTypes.func,
-  renderActions: React.PropTypes.func,
-  renderAvatar: React.PropTypes.func,
-  renderBubble: React.PropTypes.func,
-  renderFooter: React.PropTypes.func,
-  renderChatFooter: React.PropTypes.func,
-  renderMessageText: React.PropTypes.func,
-  renderMessageImage: React.PropTypes.func,
-  renderComposer: React.PropTypes.func,
-  renderCustomView: React.PropTypes.func,
-  renderDay: React.PropTypes.func,
-  renderInputToolbar: React.PropTypes.func,
-  renderLoadEarlier: React.PropTypes.func,
-  renderLoading: React.PropTypes.func,
-  renderMessage: React.PropTypes.func,
-  renderSend: React.PropTypes.func,
-  renderTime: React.PropTypes.func,
-  user: React.PropTypes.object,
-  bottomOffset: React.PropTypes.number,
-  minInputToolbarHeight: React.PropTypes.number,
-  isLoadingEarlier: React.PropTypes.bool,
-  messageIdGenerator: React.PropTypes.func,
-  keyboardShouldPersistTaps: React.PropTypes.oneOf(['always', 'never', 'handled']),
+  messages: PropTypes.array,
+  onSend: PropTypes.func,
+  onInputTextChanged: PropTypes.func,
+  loadEarlier: PropTypes.bool,
+  onLoadEarlier: PropTypes.func,
+  locale: PropTypes.string,
+  isAnimated: PropTypes.bool,
+  renderAccessory: PropTypes.func,
+  renderActions: PropTypes.func,
+  renderAvatar: PropTypes.func,
+  renderBubble: PropTypes.func,
+  renderFooter: PropTypes.func,
+  renderChatFooter: PropTypes.func,
+  renderMessageText: PropTypes.func,
+  renderMessageImage: PropTypes.func,
+  renderComposer: PropTypes.func,
+  renderCustomView: PropTypes.func,
+  renderDay: PropTypes.func,
+  renderInputToolbar: PropTypes.func,
+  renderLoadEarlier: PropTypes.func,
+  renderLoading: PropTypes.func,
+  renderMessage: PropTypes.func,
+  renderSend: PropTypes.func,
+  renderTime: PropTypes.func,
+  user: PropTypes.object,
+  bottomOffset: PropTypes.number,
+  minInputToolbarHeight: PropTypes.number,
+  isLoadingEarlier: PropTypes.bool,
+  messageIdGenerator: PropTypes.func,
+  keyboardShouldPersistTaps: PropTypes.oneOf(['always', 'never', 'handled']),
 };
@@ -550,0 +551,0 @@

src/InputToolbar.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -92,7 +93,7 @@ import {
 InputToolbar.propTypes = {
-  renderAccessory: React.PropTypes.func,
-  renderActions: React.PropTypes.func,
-  renderSend: React.PropTypes.func,
-  renderComposer: React.PropTypes.func,
-  onPressActionButton: React.PropTypes.func,
+  renderAccessory: PropTypes.func,
+  renderActions: PropTypes.func,
+  renderSend: PropTypes.func,
+  renderComposer: PropTypes.func,
+  onPressActionButton: PropTypes.func,
   containerStyle: ViewPropTypes.style,
@@ -99,0 +100,0 @@ primaryStyle: ViewPropTypes.style,

src/LoadEarlier.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -95,5 +96,5 @@ import {
 LoadEarlier.propTypes = {
-  onLoadEarlier: React.PropTypes.func,
-  isLoadingEarlier: React.PropTypes.bool,
-  label: React.PropTypes.string,
+  onLoadEarlier: PropTypes.func,
+  isLoadingEarlier: PropTypes.bool,
+  label: PropTypes.string,
   containerStyle: ViewPropTypes.style,
@@ -100,0 +101,0 @@ wrapperStyle: ViewPropTypes.style,

src/Message.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -102,11 +103,11 @@ import {
 Message.propTypes = {
-  renderAvatar: React.PropTypes.func,
-  renderBubble: React.PropTypes.func,
-  renderDay: React.PropTypes.func,
-  position: React.PropTypes.oneOf(['left', 'right']),
-  currentMessage: React.PropTypes.object,
-  nextMessage: React.PropTypes.object,
-  previousMessage: React.PropTypes.object,
-  user: React.PropTypes.object,
-  containerStyle: React.PropTypes.shape({
+  renderAvatar: PropTypes.func,
+  renderBubble: PropTypes.func,
+  renderDay: PropTypes.func,
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
+  user: PropTypes.object,
+  containerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
@@ -113,0 +114,0 @@ right: ViewPropTypes.style,

src/MessageContainer.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -172,8 +173,8 @@
 MessageContainer.propTypes = {
-  messages: React.PropTypes.array,
-  user: React.PropTypes.object,
-  renderFooter: React.PropTypes.func,
-  renderMessage: React.PropTypes.func,
-  onLoadEarlier: React.PropTypes.func,
-  listViewProps: React.PropTypes.object,
+  messages: PropTypes.array,
+  user: PropTypes.object,
+  renderFooter: PropTypes.func,
+  renderMessage: PropTypes.func,
+  onLoadEarlier: PropTypes.func,
+  listViewProps: PropTypes.object,
 };

src/MessageImage.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -19,3 +20,3 @@ import {
           activeProps={{
-            style: [styles.imageActive, { width, height }],
+            style: styles.imageActive,
           }}
@@ -46,2 +47,3 @@ {...this.props.lightboxProps}
   imageActive: {
+    flex: 1,
     resizeMode: 'contain',
@@ -62,7 +64,7 @@ },
 MessageImage.propTypes = {
-  currentMessage: React.PropTypes.object,
+  currentMessage: PropTypes.object,
   containerStyle: ViewPropTypes.style,
   imageStyle: Image.propTypes.style,
-  imageProps: React.PropTypes.object,
-  lightboxProps: React.PropTypes.object,
+  imageProps: PropTypes.object,
+  lightboxProps: PropTypes.object,
 };

src/MessageText.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -13,2 +14,4 @@ import {
 
+const WWW_URL_PATTERN = /^www\./i;
+
 export default class MessageText extends React.Component {
@@ -23,3 +26,11 @@ constructor(props) {
   onUrlPress(url) {
-    Linking.openURL(url);
+    // When someone sends a message that includes a website address beginning with "www." (omitting the scheme),
+    // react-native-parsed-text recognizes it as a valid url, but Linking fails to open due to the missing scheme.
+    if (WWW_URL_PATTERN.test(url)) {
+      this.onUrlPress(`http://${url}`);
+    } else if (Linking.canOpenURL(url)) {
+      Linking.openURL(url);
+    } else {
+      console.error('No handler for URL:', url);
+    }
   }
@@ -109,3 +120,3 @@
 MessageText.contextTypes = {
-  actionSheet: React.PropTypes.func,
+  actionSheet: PropTypes.func,
 };
@@ -124,13 +135,13 @@
 MessageText.propTypes = {
-  position: React.PropTypes.oneOf(['left', 'right']),
-  currentMessage: React.PropTypes.object,
-  containerStyle: React.PropTypes.shape({
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  containerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  textStyle: React.PropTypes.shape({
+  textStyle: PropTypes.shape({
     left: Text.propTypes.style,
     right: Text.propTypes.style,
   }),
-  linkStyle: React.PropTypes.shape({
+  linkStyle: PropTypes.shape({
     left: Text.propTypes.style,
@@ -137,0 +148,0 @@ right: Text.propTypes.style,

src/Send.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -60,7 +61,7 @@ import {
 Send.propTypes = {
-  text: React.PropTypes.string,
-  onSend: React.PropTypes.func,
-  label: React.PropTypes.string,
+  text: PropTypes.string,
+  onSend: PropTypes.func,
+  label: PropTypes.string,
   containerStyle: ViewPropTypes.style,
   textStyle: Text.propTypes.style,
 };

src/Time.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -16,3 +17,3 @@ import {
         <Text style={[styles[this.props.position].text, this.props.textStyle[this.props.position]]}>
-          {moment(this.props.currentMessage.createdAt).locale(this.context.getLocale()).format('LT')}
+          {moment(this.props.currentMessage.createdAt).locale(this.context.getLocale()).format(this.props.timeFormat)}
         </Text>
@@ -58,3 +59,3 @@ </View>
 Time.contextTypes = {
-  getLocale: React.PropTypes.func,
+  getLocale: PropTypes.func,
 };
@@ -69,15 +70,17 @@
   textStyle: {},
+  timeFormat: 'LT'
 };
 
 Time.propTypes = {
-  position: React.PropTypes.oneOf(['left', 'right']),
-  currentMessage: React.PropTypes.object,
-  containerStyle: React.PropTypes.shape({
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  containerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  textStyle: React.PropTypes.shape({
+  textStyle: PropTypes.shape({
     left: Text.propTypes.style,
     right: Text.propTypes.style,
   }),
+  timeFormat: PropTypes.string,
 };

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

Number of package files

33

increased by3.13%

Lines of code

2090

increased by1.46%

Number of lines in readme file

182

increased by10.98%

Worsened metrics

Total package byte prevSize

170686

decreased by-9.46%

Dependency count

10

increased by11.11%

Dependency changes

• + Addedprop-types@15.5.10

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.5.10(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)