feat improve log and bump

README.md

@@ -67,7 +67,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.)
@@ -82,6 +82,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`
@@ -296,7 +300,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)
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
 - **`renderDay`** _(Function)_ - Custom day above a message

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"
     ]
@@ -67,7 +66,6 @@
     "@types/react": "^16.7.17",
     "@types/react-native": "^0.57.19",
     "@types/react-native-communications": "2.2.1",
-    "@types/react-native-video": "3.1.4",
     "@types/react-test-renderer": "16.8.2",
     "@types/uuid": "3.4.5",
     "babel-core": "^7.0.0-bridge.0",
@@ -101,15 +99,13 @@
     "react-native-lightbox": "^0.7.0",
     "react-native-maps": "~0.24.0",
     "react-native-parsed-text": "https://github.com/EvanBacon/react-native-parsed-text.git",
-    "react-native-video": "4.4.2",
     "react-native-web": "^0.11.1",
     "uuid": "3.3.0"
   },
   "peerDependencies": {
     "prop-types": "*",
     "react": "*",
-    "react-native": "*",
-    "react-native-video": "*"
+    "react-native": "*"
   },
   "husky": {
     "hooks": {

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>,
@@ -353,12 +359,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,