feat improve log and bump

README.md

@@ -69,7 +69,7 @@
 
 ## Features
 
-- _`react-native-web`able_
+- _`react-native-web`able_ (since 0.10.0)
 - Write with **TypeScript** (since 0.8.0)
 - Fully customizable components
 - Composer actions (to attach photos, etc.)
@@ -84,6 +84,10 @@
 - System message
 - Quick Reply messages (bot)
 
+## Versions notes
+
+- Since v0.10.0 removed `react-native-video` dependency.
+
 ## Dependency
 
 - Use version `0.2.x` for RN `>= 0.44.0`
@@ -299,7 +303,7 @@ interface QuickReplies {
 - **`renderMessageImage`** _(Function)_ - Custom message image
 - **`renderMessageVideo`** _(Function)_ - Custom message video
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`
-- **`videoProps`** _(Object)_ - Extra props to be passed to the [`<Video>`](https://github.com/react-native-community/react-native-video) component created by the default `renderMessageVideo`
+- **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
 - **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)
 - **`isCustomViewBottom`** _(Bool)_ - Determine wether renderCustomView is displayed before or after the text, image and video views; default is `false`
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "0.10.0-beta.web.4",
+  "version": "0.10.0-beta.web.5",
   "description": "The most complete chat UI for React Native",
   "main": "node_modules/expo/AppEntry.js",
   "types": "lib/index.d.ts",
@@ -55,7 +55,6 @@
       "**/*.test.ts?(x)"
     ],
     "modulePathIgnorePatterns": [
-      "<rootDir>/example",
       "<rootDir>/example-expo",
       "<rootDir>/example-slack-message"
     ]

src/Bubble.tsx

@@ -16,13 +16,19 @@ import QuickReplies from './QuickReplies'
 
 import MessageText from './MessageText'
 import MessageImage from './MessageImage'
-import MessageVideo from './MessageVideo'
 
 import Time from './Time'
 import Color from './Color'
 
-import { isSameUser, isSameDay } from './utils'
-import { User, IMessage, LeftRightStyle, Reply, Omit } from './types'
+import { isSameUser, isSameDay, error } from './utils'
+import {
+  User,
+  IMessage,
+  LeftRightStyle,
+  Reply,
+  Omit,
+  MessageVideoProps,
+} from './types'
 
 const styles = {
   left: StyleSheet.create({
@@ -107,7 +113,7 @@ export type RenderMessageVideoProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
   'containerStyle' | 'wrapperStyle'
 > &
-  MessageVideo['props']
+  MessageVideoProps<TMessage>
 
 export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
@@ -356,12 +362,33 @@ export default class Bubble<
   }
 
   renderMessageVideo() {
-    if (this.props.currentMessage && this.props.currentMessage.video) {
-      const { containerStyle, wrapperStyle, ...messageVideoProps } = this.props
+    const { containerStyle, wrapperStyle, ...messageVideoProps } = this.props
+    if (
+      this.props.currentMessage &&
+      this.props.currentMessage.video &&
+      this.props.renderMessageVideo
+    ) {
       if (this.props.renderMessageVideo) {
         return this.props.renderMessageVideo(messageVideoProps)
+      } else {
+        error('renderMessageVideo is required when a video!')
+        const now = new Date()
+        return (
+          <MessageText
+            {...{
+              ...messageVideoProps,
+              currentMessage: {
+                text: '⚠️renderMessageVideo is required for video!️️️ ⚠️',
+                _id: `id-error-${now.getTime()}`,
+                createdAt: now,
+                user: {
+                  _id: 'system',
+                },
+              },
+            }}
+          />
+        )
       }
-      return <MessageVideo {...messageVideoProps} />
     }
     return null
   }

src/MessageContainer.tsx

@@ -18,6 +18,7 @@ import LoadEarlier from './LoadEarlier'
 import Message from './Message'
 import Color from './Color'
 import { User, IMessage } from './types'
+import { warning } from './utils'
 
 const styles = StyleSheet.create({
   container: {
@@ -244,14 +245,11 @@ export default class MessageContainer<
 
   renderRow = ({ item, index }: ListRenderItemInfo<TMessage>) => {
     if (!item._id && item._id !== 0) {
-      console.warn(
-        'GiftedChat: `_id` is missing for message',
-        JSON.stringify(item),
-      )
+      warning('GiftedChat: `_id` is missing for message', JSON.stringify(item))
     }
     if (!item.user) {
       if (!item.system) {
-        console.warn(
+        warning(
           'GiftedChat: `user` is missing for message',
           JSON.stringify(item),
         )

src/QuickReplies.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 import { IMessage, Reply } from './types'
 import Color from './Color'
+import { warning } from './utils'
 
 const styles = StyleSheet.create({
   container: {
@@ -110,7 +111,7 @@ export default class QuickReplies extends Component<
         }
 
         default: {
-          console.warn(`[GiftedChat.onQuickReply] unknown type: ` + type)
+          warning(`onQuickReply unknown type: ${type}`)
           return
         }
       }

src/types.ts

@@ -1,27 +1,26 @@
-import { StyleProp } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native'
 
-export { ActionsProps } from './Actions';
-export { AvatarProps } from './Avatar';
+export { ActionsProps } from './Actions'
+export { AvatarProps } from './Avatar'
 export {
   BubbleProps,
   RenderMessageImageProps,
   RenderMessageVideoProps,
   RenderMessageTextProps,
-} from './Bubble';
-export { ComposerProps } from './Composer';
-export { DayProps } from './Day';
-export { GiftedAvatarProps } from './GiftedAvatar';
-export { InputToolbarProps } from './InputToolbar';
-export { LoadEarlierProps } from './LoadEarlier';
-export { MessageProps } from './Message';
-export { MessageContainerProps } from './MessageContainer';
-export { MessageImageProps } from './MessageImage';
-export { MessageTextProps } from './MessageText';
-export { MessageVideoProps } from './MessageVideo';
-export { QuickRepliesProps } from './QuickReplies';
-export { SendProps } from './Send';
-export { SystemMessageProps } from './SystemMessage';
-export { TimeProps } from './Time';
+} from './Bubble'
+export { ComposerProps } from './Composer'
+export { DayProps } from './Day'
+export { GiftedAvatarProps } from './GiftedAvatar'
+export { InputToolbarProps } from './InputToolbar'
+export { LoadEarlierProps } from './LoadEarlier'
+export { MessageProps } from './Message'
+export { MessageContainerProps } from './MessageContainer'
+export { MessageImageProps } from './MessageImage'
+export { MessageTextProps } from './MessageText'
+export { QuickRepliesProps } from './QuickReplies'
+export { SendProps } from './Send'
+export { SystemMessageProps } from './SystemMessage'
+export { TimeProps } from './Time'
 
 export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
 
@@ -64,3 +63,12 @@ export interface IMessage {
 }
 
 export type IChatMessage = IMessage
+
+export interface MessageVideoProps<TMessage extends IMessage> {
+  currentMessage?: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  videoStyle?: StyleProp<ViewStyle>
+  videoProps?: object
+  // TODO: should be LightBox properties
+  lightboxProps?: object
+}

src/utils.ts

@@ -1,5 +1,6 @@
 import moment from 'moment'
 import { IMessage } from './types'
+import pkg from '../package.json'
 
 export function isSameDay(
   currentMessage: IMessage,
@@ -30,3 +31,13 @@ export function isSameUser(
     diffMessage.user._id === currentMessage.user._id
   )
 }
+
+const styleString = (color: string) => `color: ${color}; font-weight: bold`
+
+const headerLog = `%c[${pkg.name} v${pkg.version}]`
+
+export const warning = (...args: any) =>
+  console.log(headerLog, styleString('orange'), ...args)
+
+export const error = (...args: any) =>
+  console.log(headerLog, styleString('red'), ...args)

tslint.json

@@ -1,5 +1,8 @@
 {
   "extends": ["tslint:recommended", "tslint-config-prettier"],
+  "linterOptions": {
+    "exclude": ["**/*.json"]
+  },
   "rules": {
     "member-access": false,
     "interface-name": false,

yarn.lock

@@ -1244,15 +1244,7 @@
   resolved "https://registry.yarnpkg.com/@types/react-native-communications/-/react-native-communications-2.2.1.tgz#fe067d9d226090cea34a62de8c6ac71f92caeeb9"
   integrity sha512-eTgJlMjrx825VuO+3y5rT4Xu3it6oH3i7Zck/QhJO3c8RM61nBp9lJ7BBI3Coc8nxweYkS6i1lkrPPmZOnNzNA==
 
-"@types/react-native-video@3.1.4":
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/@types/react-native-video/-/react-native-video-3.1.4.tgz#17049b708d22f7254971b823523d7afe9a8a9bb6"
-  integrity sha512-bFAgMtItNyHDhg9XV2EYw+o4ARZD26h4AEAuQkYBBs3DXe3cdFfiDKD1SKMV25hu2JjGsfQ/n6Si+N+s+tFWaA==
-  dependencies:
-    "@types/react" "*"
-    "@types/react-native" "*"
-
-"@types/react-native@*", "@types/react-native@^0.57.19":
+"@types/react-native@^0.57.19":
   version "0.57.51"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.51.tgz#adcb02141734b72822848351be734971e508f5f1"
   integrity sha512-0LkXPeV1Hn+5zZ0BE6RBrBJTpM2P4S+306H9lKdi220PHFwMtHt1k8SiQpqUA2yjpi+c6pFIq6H2zZGusPHT9w==
@@ -4655,11 +4647,6 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-keymirror@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/keymirror/-/keymirror-0.1.1.tgz#918889ea13f8d0a42e7c557250eee713adc95c35"
-  integrity sha1-kYiJ6hP40KQufFVyUO7nE63JXDU=
-
 kind-of@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-1.1.0.tgz#140a3d2d41a36d2efcfa9377b62c24f8495a5c44"
@@ -6281,15 +6268,6 @@ react-native-svg@9.4.0:
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.4.0.tgz#e428e0eae55aebd2355f1ff4f22675dad4611960"
   integrity sha512-IVJlVbS2dAPerPr927fEi4uXzrPXzlra5ddgyJXZZ2IKA2ZygyYWFZDM+vsQs+Vj20CfL8nOWszQQV57vdQgFg==
 
-react-native-video@4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-4.4.2.tgz#1abf2a50758cca9285b8807e945fb560316d9ae3"
-  integrity sha512-bF17FOSTdrFHeUmN6t4cCa0kLaJT3uzYw1rCzvHFEdkCmdTG4Kcin/cfJ2E29jFViqw2uBPfW6m1y2yI2cgOCQ==
-  dependencies:
-    keymirror "^0.1.1"
-    prop-types "^15.5.10"
-    shaka-player "^2.4.4"
-
 react-native-view-shot@2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz#3b23675826f67658366352c4b97b59a6aded2f43"
@@ -6917,11 +6895,6 @@ setprototypeof@1.1.0:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
   integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
 
-shaka-player@^2.4.4:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-2.5.1.tgz#34b02a0ac8e865699426de9defbebf3e6afeff4c"
-  integrity sha512-5P1bnWQ3LTiNbt7nyf75btGAPCWW3lHRhti9Yl/yE+DowqRl8KcHkHR0t0OfERyRKO1lrPLrCjiVOgJhi9jbFw==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"