react-native-gifted-chat 2.9.0-alpha.0 → 3.0.0-alpha.0

package/src/MessageContainer/index.tsx

@@ -11,10 +11,9 @@ import { FlatList } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'
+import { IMessage } from '../Models'
 import { ReanimatedScrollEvent } from '../reanimatedCompat'
-
 import stylesCommon from '../styles'
-import { IMessage } from '../types'
 import { TypingIndicator } from '../TypingIndicator'
 import { isSameDay, useCallbackThrottled } from '../utils'
 import { DayAnimated } from './components/DayAnimated'
@@ -35,23 +34,23 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     user,
     isTyping = false,
     renderChatEmpty: renderChatEmptyProp,
-    inverted = true,
+    isInverted = true,
     listProps,
-    extraData,
     isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
-    alignTop = false,
+    isAlignedTop = false,
     scrollToBottomStyle,
     loadEarlierMessagesProps,
     renderTypingIndicator: renderTypingIndicatorProp,
     renderFooter: renderFooterProp,
     renderLoadEarlier: renderLoadEarlierProp,
     forwardRef,
-    handleOnScroll: handleOnScrollProp,
     scrollToBottomComponent: scrollToBottomComponentProp,
     renderDay: renderDayProp,
   } = props
 
+  const listPropsOnScrollProp = listProps?.onScroll
+
   const scrollToBottomOpacity = useSharedValue(0)
   const isScrollingDown = useSharedValue(false)
   const lastScrolledY = useSharedValue(0)
@@ -111,14 +110,14 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     isScrollingDown.value = true
     changeScrollToBottomVisibility(false)
 
-    if (inverted)
+    if (isInverted)
       scrollTo({ offset: 0, animated })
     else if (forwardRef?.current)
       forwardRef.current.scrollToEnd({ animated })
-  }, [forwardRef, inverted, scrollTo, isScrollingDown, changeScrollToBottomVisibility])
+  }, [forwardRef, isInverted, scrollTo, isScrollingDown, changeScrollToBottomVisibility])
 
   const handleOnScroll = useCallback((event: ReanimatedScrollEvent) => {
-    handleOnScrollProp?.(event)
+    listPropsOnScrollProp?.(event as any)
 
     const {
       contentOffset: { y: contentOffsetY },
@@ -127,12 +126,12 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     } = event
 
     isScrollingDown.value =
-      (inverted && lastScrolledY.value > contentOffsetY) ||
-      (!inverted && lastScrolledY.value < contentOffsetY)
+      (isInverted && lastScrolledY.value > contentOffsetY) ||
+      (!isInverted && lastScrolledY.value < contentOffsetY)
 
     lastScrolledY.value = contentOffsetY
 
-    if (inverted)
+    if (isInverted)
       if (contentOffsetY > scrollToBottomOffset!)
         changeScrollToBottomVisibility(true)
       else
@@ -144,7 +143,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
       changeScrollToBottomVisibility(false)
     else
       changeScrollToBottomVisibility(false)
-  }, [handleOnScrollProp, inverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY])
+  }, [isInverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY, listPropsOnScrollProp])
 
   const restProps = useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -170,9 +169,9 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
 
     if (messages && user) {
       const previousMessage =
-        (inverted ? messages[index + 1] : messages[index - 1]) || {}
+        (isInverted ? messages[index + 1] : messages[index - 1]) || {}
       const nextMessage =
-        (inverted ? messages[index - 1] : messages[index + 1]) || {}
+        (isInverted ? messages[index - 1] : messages[index + 1]) || {}
 
       const messageProps: ItemProps<TMessage> = {
         ...restProps,
@@ -191,7 +190,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     }
 
     return null
-  }, [messages, restProps, inverted, scrolledY, daysPositions, listHeight, user])
+  }, [messages, restProps, isInverted, scrolledY, daysPositions, listHeight, user])
 
   const emptyContent = useMemo(() => {
     if (!renderChatEmptyProp)
@@ -202,7 +201,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
 
   const renderChatEmpty = useCallback(() => {
     if (renderChatEmptyProp)
-      return inverted
+      return isInverted
         ? (
           emptyContent
         )
@@ -213,7 +212,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         )
 
     return <View style={stylesCommon.fill} />
-  }, [inverted, renderChatEmptyProp, emptyContent])
+  }, [isInverted, renderChatEmptyProp, emptyContent])
 
   const ListHeaderComponent = useMemo(() => {
     const content = renderLoadEarlier()
@@ -273,7 +272,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     listHeight.value = event.nativeEvent.layout.height
 
     if (
-      !inverted &&
+      !isInverted &&
       messages?.length &&
       isScrollToBottomEnabled
     )
@@ -282,7 +281,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
       }, 500)
 
     listProps?.onLayout?.(event)
-  }, [inverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
+  }, [isInverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -326,7 +325,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         }
 
         for (const [key, item] of Object.entries(value))
-          if (isSameDay(newValue.createdAt, item.createdAt) && (inverted ? item.y <= newValue.y : item.y >= newValue.y)) {
+          if (isSameDay(newValue.createdAt, item.createdAt) && (isInverted ? item.y <= newValue.y : item.y >= newValue.y)) {
             delete value[key]
             break
           }
@@ -345,7 +344,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         {children}
       </View>
     )
-  }, [daysPositions, inverted])
+  }, [daysPositions, isInverted])
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
@@ -362,7 +361,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
       let shouldRemove = messageIndex === -1
 
       if (!shouldRemove) {
-        const prevMessage = messages[messageIndex + (inverted ? 1 : -1)]
+        const prevMessage = messages[messageIndex + (isInverted ? 1 : -1)]
         const message = messages[messageIndex]
         shouldRemove = !!prevMessage && isSameDay(message, prevMessage)
       }
@@ -375,36 +374,35 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
           return value
         })
     })
-  }, [messages, daysPositions, inverted])
+  }, [messages, daysPositions, isInverted])
 
   return (
     <View
       style={[
         styles.contentContainerStyle,
-        alignTop ? styles.containerAlignTop : stylesCommon.fill,
+        isAlignedTop ? styles.containerAlignTop : stylesCommon.fill,
       ]}
     >
       <AnimatedFlatList
-        extraData={extraData}
         ref={forwardRef}
         keyExtractor={keyExtractor}
         data={messages}
         renderItem={renderItem}
-        inverted={inverted}
+        inverted={isInverted}
         automaticallyAdjustContentInsets={false}
         style={stylesCommon.fill}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
-          inverted ? ListHeaderComponent : ListFooterComponent
+          isInverted ? ListHeaderComponent : ListFooterComponent
         }
         ListHeaderComponent={
-          inverted ? ListFooterComponent : ListHeaderComponent
+          isInverted ? ListFooterComponent : ListHeaderComponent
         }
-        onScroll={scrollHandler}
         scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
         {...listProps}
+        onScroll={scrollHandler}
         onLayout={onLayoutList}
         CellRendererComponent={renderCell}
       />

package/src/MessageContainer/types.ts

@@ -6,10 +6,10 @@ import {
 } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 
+import { DayProps } from '../Day'
 import { LoadEarlierMessagesProps } from '../LoadEarlierMessages'
 import { MessageProps } from '../Message'
-import { ReanimatedScrollEvent } from '../reanimatedCompat'
-import { User, IMessage, Reply, DayProps } from '../types'
+import { User, IMessage, Reply } from '../Models'
 import { TypingIndicatorProps } from '../TypingIndicator/types'
 
 export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
@@ -27,37 +27,33 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   /** Additional props for FlatList */
   listProps?: ListProps<TMessage>
   /** Reverses display order of messages; default is true */
-  inverted?: boolean
+  isInverted?: boolean
   /** Controls whether or not the message bubbles appear at the top of the chat */
-  alignTop?: boolean
+  isAlignedTop?: boolean
   /** Enables the isScrollToBottomEnabled Component */
   isScrollToBottomEnabled?: boolean
   /** Scroll to bottom wrapper style */
   scrollToBottomStyle?: StyleProp<ViewStyle>
-  /** This can be used to pass unknown data which needs to be re-rendered */
-  extraData?: object
   /** Distance from bottom before showing scroll to bottom button */
   scrollToBottomOffset?: number
   /** Custom component to render when messages are empty */
-  renderChatEmpty?(): React.ReactNode
+  renderChatEmpty?: () => React.ReactNode
   /** Custom footer component on the ListView, e.g. 'User is typing...' */
-  renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
+  renderFooter?: (props: MessageContainerProps<TMessage>) => React.ReactNode
   /** Custom message container */
-  renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  renderMessage?: (props: MessageProps<TMessage>) => React.ReactElement
   /** Custom day above a message */
-  renderDay?(props: DayProps): React.ReactNode
+  renderDay?: (props: DayProps) => React.ReactNode
   /** Custom "Load earlier messages" button */
-  renderLoadEarlier?(props: LoadEarlierMessagesProps): React.ReactNode
+  renderLoadEarlier?: (props: LoadEarlierMessagesProps) => React.ReactNode
   /** Custom typing indicator */
-  renderTypingIndicator?(): React.ReactNode
+  renderTypingIndicator?: () => React.ReactNode
   /** Scroll to bottom custom component */
-  scrollToBottomComponent?(): React.ReactNode
+  scrollToBottomComponent?: () => React.ReactNode
   /** Callback when quick reply is sent */
-  onQuickReply?(replies: Reply[]): void
+  onQuickReply?: (replies: Reply[]) => void
   /** Props to pass to the LoadEarlierMessages component. The LoadEarlierMessages button is only visible when isAvailable is true. Includes isAvailable (controls button visibility), isInfiniteScrollEnabled (infinite scroll up when reach the top of messages container, automatically call onPress function if it exists - not yet supported for web), onPress (callback when button is pressed), isLoading (display loading indicator), label (override default "Load earlier messages" text), and styling props (containerStyle, wrapperStyle, textStyle, activityIndicatorStyle, activityIndicatorColor, activityIndicatorSize). */
   loadEarlierMessagesProps?: LoadEarlierMessagesProps
-  /** Custom scroll event handler */
-  handleOnScroll?(event: ReanimatedScrollEvent): void
   /** Style for TypingIndicator component */
   typingIndicatorStyle?: StyleProp<ViewStyle>
 }

package/src/MessageImage.tsx

@@ -16,8 +16,8 @@ import {
 import { BaseButton, GestureHandlerRootView, Text } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Zoom from 'react-native-zoom-reanimated'
+import { IMessage } from './Models'
 import commonStyles from './styles'
-import { IMessage } from './types'
 
 const styles = StyleSheet.create({
   image: {

package/src/MessageText.tsx

@@ -9,7 +9,7 @@ import {
 
 import { Match } from 'autolinker/dist/es2015'
 import Autolink, { AutolinkProps } from 'react-native-autolink'
-import { LeftRightStyle, IMessage } from './types'
+import { LeftRightStyle, IMessage } from './Models'
 
 export type MessageTextProps<TMessage extends IMessage> = {
   position?: 'left' | 'right'

package/src/Models.ts

@@ -0,0 +1,63 @@
+import { StyleProp, ViewStyle } from 'react-native'
+
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+
+export interface LeftRightStyle<T> {
+  left?: StyleProp<T>
+  right?: StyleProp<T>
+}
+
+type renderFunction = (x: unknown) => React.ReactNode
+
+export interface User {
+  _id: string | number
+  name?: string
+  avatar?: string | number | renderFunction
+}
+
+export interface Reply {
+  title: string
+  value: string
+  messageId?: number | string
+}
+
+export interface QuickReplies {
+  type: 'radio' | 'checkbox'
+  values: Reply[]
+  keepIt?: boolean
+}
+
+export interface IMessage {
+  _id: string | number
+  text: string
+  createdAt: Date | number
+  user: User
+  image?: string
+  video?: string
+  audio?: string
+  system?: boolean
+  sent?: boolean
+  received?: boolean
+  pending?: boolean
+  quickReplies?: QuickReplies
+  location?: {
+    latitude: number
+    longitude: number
+  }
+}
+
+export type IChatMessage = IMessage
+
+export interface MessageVideoProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  videoStyle?: StyleProp<ViewStyle>
+  videoProps?: object
+}
+
+export interface MessageAudioProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  audioStyle?: StyleProp<ViewStyle>
+  audioProps?: object
+}

package/src/QuickReplies.tsx

@@ -10,8 +10,8 @@ import {
 import { Color } from './Color'
 import { TouchableOpacity } from './components/TouchableOpacity'
 import { warning } from './logging'
+import { IMessage, Reply } from './Models'
 import stylesCommon from './styles'
-import { IMessage, Reply } from './types'
 
 const styles = StyleSheet.create({
   container: {

package/src/Send.tsx

@@ -12,26 +12,7 @@ import { Color } from './Color'
 
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'
-import { IMessage } from './types'
-
-const styles = StyleSheet.create({
-  container: {
-    height: 44,
-    justifyContent: 'flex-end',
-  },
-  text: {
-    color: Color.defaultBlue,
-    fontWeight: '600',
-    fontSize: 17,
-    backgroundColor: Color.backgroundTransparent,
-    marginBottom: 12,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-  text_dark: {
-    color: '#4da6ff',
-  },
-})
+import { IMessage } from './Models'
 
 export interface SendProps<TMessage extends IMessage> {
   text?: string
@@ -39,8 +20,7 @@ export interface SendProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   children?: React.ReactNode
-  alwaysShowSend?: boolean
-  disabled?: boolean
+  isSendButtonAlwaysVisible?: boolean
   sendButtonProps?: Partial<TouchableOpacityProps>
   onSend?(
     messages: Partial<TMessage> | Partial<TMessage>[],
@@ -54,21 +34,22 @@ export const Send = <TMessage extends IMessage = IMessage>({
   children,
   textStyle,
   label = 'Send',
-  alwaysShowSend = false,
-  disabled = false,
+  isSendButtonAlwaysVisible = false,
   sendButtonProps,
   onSend,
 }: SendProps<TMessage>) => {
   const colorScheme = useColorScheme()
 
   const handleOnPress = useCallback(() => {
-    if (text && onSend)
-      onSend({ text: text.trim() } as Partial<TMessage>, true)
+    const message = { text: text?.trim() } as Partial<TMessage>
+
+    if (onSend && message.text?.length)
+      onSend(message, true)
   }, [text, onSend])
 
   const showSend = useMemo(
-    () => alwaysShowSend || (text && text.trim().length > 0),
-    [alwaysShowSend, text]
+    () => isSendButtonAlwaysVisible || !!text?.trim().length,
+    [isSendButtonAlwaysVisible, text]
   )
 
   if (!showSend)
@@ -77,12 +58,11 @@ export const Send = <TMessage extends IMessage = IMessage>({
   return (
     <TouchableOpacity
       testID={TEST_ID.SEND_TOUCHABLE}
-      accessible
-      accessibilityLabel='send'
       style={[styles.container, containerStyle]}
       onPress={handleOnPress}
+      accessible
+      accessibilityLabel='send'
       accessibilityRole='button'
-      disabled={disabled}
       {...sendButtonProps}
     >
       <View>
@@ -91,3 +71,22 @@ export const Send = <TMessage extends IMessage = IMessage>({
     </TouchableOpacity>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    height: 44,
+    justifyContent: 'flex-end',
+  },
+  text: {
+    color: Color.defaultBlue,
+    fontWeight: '600',
+    fontSize: 17,
+    backgroundColor: Color.backgroundTransparent,
+    marginBottom: 12,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  text_dark: {
+    color: '#4da6ff',
+  },
+})

package/src/SystemMessage.tsx

@@ -8,8 +8,8 @@ import {
 } from 'react-native'
 import { Color } from './Color'
 import { MessageText } from './MessageText'
+import { IMessage } from './Models'
 import stylesCommon from './styles'
-import { IMessage } from './types'
 
 export interface SystemMessageProps<TMessage extends IMessage> {
   currentMessage: TMessage

package/src/Time.tsx

@@ -5,7 +5,7 @@ import dayjs from 'dayjs'
 import { Color } from './Color'
 import { TIME_FORMAT } from './Constant'
 import { useChatContext } from './GiftedChatContext'
-import { LeftRightStyle, IMessage } from './types'
+import { LeftRightStyle, IMessage } from './Models'
 
 const { containerStyle } = StyleSheet.create({
   containerStyle: {

package/src/__tests__/Message.test.tsx

@@ -38,7 +38,7 @@ describe('Message component', () => {
         user={{ _id: 1 }}
         currentMessage={DEFAULT_TEST_MESSAGE}
         position='left'
-        showUserAvatar
+        isUserAvatarVisible
       />
     )
 
@@ -58,7 +58,7 @@ describe('Message component', () => {
           },
         }}
         position='left'
-        showUserAvatar
+        isUserAvatarVisible
       />
     )
 

package/src/__tests__/Send.test.tsx

@@ -10,7 +10,7 @@ describe('Send', () => {
   })
 
   it('should always render <Send /> and compare with snapshot', () => {
-    const { toJSON } = render(<Send alwaysShowSend />)
+    const { toJSON } = render(<Send isSendButtonAlwaysVisible />)
     expect(toJSON()).toMatchSnapshot()
   })
 

package/src/__tests__/__snapshots__/Actions.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -20,97 +20,13 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    collapsable={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "height": 26,
-            "marginBottom": 10,
-            "marginLeft": 10,
-            "width": 26,
-          },
-          undefined,
-        ],
-      ]
-    }
-    style={
-      [
-        {
-          "height": 26,
-          "marginBottom": 10,
-          "marginLeft": 10,
-          "width": 26,
-        },
-        undefined,
-        {
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          {
-            "borderColor": "#b2b2b2",
-            "borderRadius": 13,
-            "borderWidth": 2,
-          },
-          undefined,
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#b2b2b2",
-              "fontSize": 16,
-              "fontWeight": "bold",
-              "lineHeight": 16,
-              "textAlign": "center",
-            },
-            undefined,
-          ]
-        }
-      >
-        +
-      </Text>
-    </View>
-  </View>
-</View>
+/>
 `;