react-native-gifted-chat 2.8.1 → 2.8.2-alpha.1

package/src/MessageContainer/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
-  TouchableOpacity,
+  Pressable,
   Text,
   Platform,
   LayoutChangeEvent,
@@ -10,7 +10,7 @@ import {
   CellRendererProps,
 } from 'react-native'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
-import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
+import { ReanimatedScrollEvent } from '../reanimatedCompat'
 import DayAnimated from './components/DayAnimated'
 import Item from './components/Item'
 
@@ -23,11 +23,12 @@ import { ItemProps } from './components/Item/types'
 import { warning } from '../logging'
 import stylesCommon from '../styles'
 import styles from './styles'
-import { isSameDay } from '../utils'
+import { isSameDay, useCallbackThrottled } from '../utils'
 
 export * from './types'
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
 function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {
   const {
@@ -38,9 +39,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     onLoadEarlier,
     inverted = true,
     loadEarlier = false,
-    listViewProps,
-    invertibleScrollViewProps,
-    extraData = null,
+    listProps,
+    extraData,
     isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
     alignTop = false,
@@ -53,9 +53,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     forwardRef,
     handleOnScroll: handleOnScrollProp,
     scrollToBottomComponent: scrollToBottomComponentProp,
+    renderDay: renderDayProp,
   } = props
 
   const scrollToBottomOpacity = useSharedValue(0)
+  const isScrollingDown = useSharedValue(false)
+  const lastScrolledY = useSharedValue(0)
   const [isScrollToBottomVisible, setIsScrollToBottomVisible] = useState(false)
   const scrollToBottomStyleAnim = useAnimatedStyle(() => ({
     opacity: scrollToBottomOpacity.value,
@@ -69,14 +72,14 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     if (renderTypingIndicatorProp)
       return renderTypingIndicatorProp()
 
-    return <TypingIndicator isTyping={isTyping} />
-  }, [isTyping, renderTypingIndicatorProp])
+    return <TypingIndicator isTyping={isTyping} style={props.typingIndicatorStyle} />
+  }, [isTyping, renderTypingIndicatorProp, props.typingIndicatorStyle])
 
   const ListFooterComponent = useMemo(() => {
     if (renderFooterProp)
-      return <>{renderFooterProp(props)}</>
+      return renderFooterProp(props)
 
-    return <>{renderTypingIndicator()}</>
+    return renderTypingIndicator()
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
@@ -90,17 +93,33 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return null
   }, [loadEarlier, renderLoadEarlierProp, props])
 
+  const changeScrollToBottomVisibility: (isVisible: boolean) => void = useCallbackThrottled((isVisible: boolean) => {
+    if (isScrollingDown.value && isVisible)
+      return
+
+    if (isVisible)
+      setIsScrollToBottomVisible(true)
+
+    scrollToBottomOpacity.value = withTiming(isVisible ? 1 : 0, { duration: 250 }, isFinished => {
+      if (isFinished && !isVisible)
+        runOnJS(setIsScrollToBottomVisible)(false)
+    })
+  }, [scrollToBottomOpacity, isScrollingDown], 50)
+
   const scrollTo = useCallback((options: { animated?: boolean, offset: number }) => {
-    if (forwardRef?.current && options)
-      forwardRef.current.scrollToOffset(options)
+    if (options)
+      forwardRef?.current?.scrollToOffset(options)
   }, [forwardRef])
 
   const doScrollToBottom = useCallback((animated: boolean = true) => {
+    isScrollingDown.value = true
+    changeScrollToBottomVisibility(false)
+
     if (inverted)
       scrollTo({ offset: 0, animated })
     else if (forwardRef?.current)
       forwardRef.current.scrollToEnd({ animated })
-  }, [forwardRef, inverted, scrollTo])
+  }, [forwardRef, inverted, scrollTo, isScrollingDown, changeScrollToBottomVisibility])
 
   const handleOnScroll = useCallback((event: ReanimatedScrollEvent) => {
     handleOnScrollProp?.(event)
@@ -111,33 +130,31 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       layoutMeasurement: { height: layoutMeasurementHeight },
     } = event
 
-    const duration = 250
+    isScrollingDown.value =
+      (inverted && lastScrolledY.value > contentOffsetY) ||
+      (!inverted && lastScrolledY.value < contentOffsetY)
 
-    const makeScrollToBottomVisible = () => {
-      setIsScrollToBottomVisible(true)
-      scrollToBottomOpacity.value = withTiming(1, { duration })
-    }
-
-    const makeScrollToBottomHidden = () => {
-      scrollToBottomOpacity.value = withTiming(0, { duration }, isFinished => {
-        if (isFinished)
-          runOnJS(setIsScrollToBottomVisible)(false)
-      })
-    }
+    lastScrolledY.value = contentOffsetY
 
     if (inverted)
       if (contentOffsetY > scrollToBottomOffset!)
-        makeScrollToBottomVisible()
+        changeScrollToBottomVisibility(true)
       else
-        makeScrollToBottomHidden()
+        changeScrollToBottomVisibility(false)
     else if (
       contentOffsetY < scrollToBottomOffset! &&
       contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset!
     )
-      makeScrollToBottomVisible()
+      changeScrollToBottomVisibility(false)
     else
-      makeScrollToBottomHidden()
-  }, [handleOnScrollProp, inverted, scrollToBottomOffset, scrollToBottomOpacity])
+      changeScrollToBottomVisibility(false)
+  }, [handleOnScrollProp, inverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY])
+
+  const restProps = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { messages: _, ...rest } = props
+    return rest
+  }, [props])
 
   const renderItem = useCallback(({ item, index }: ListRenderItemInfo<unknown>): React.ReactElement | null => {
     const messageItem = item as TMessage
@@ -155,8 +172,6 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       messageItem.user = { _id: 0 }
     }
 
-    const { messages, ...restProps } = props
-
     if (messages && user) {
       const previousMessage =
         (inverted ? messages[index + 1] : messages[index - 1]) || {}
@@ -180,22 +195,29 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     }
 
     return null
-  }, [props, inverted, scrolledY, daysPositions, listHeight, user])
+  }, [messages, restProps, inverted, scrolledY, daysPositions, listHeight, user])
+
+  const emptyContent = useMemo(() => {
+    if (!renderChatEmptyProp)
+      return null
+
+    return renderChatEmptyProp()
+  }, [renderChatEmptyProp])
 
   const renderChatEmpty = useCallback(() => {
     if (renderChatEmptyProp)
       return inverted
         ? (
-          renderChatEmptyProp()
+          emptyContent
         )
         : (
           <View style={[stylesCommon.fill, styles.emptyChatContainer]}>
-            {renderChatEmptyProp()}
+            {emptyContent}
           </View>
         )
 
     return <View style={stylesCommon.fill} />
-  }, [inverted, renderChatEmptyProp])
+  }, [inverted, renderChatEmptyProp, emptyContent])
 
   const ListHeaderComponent = useMemo(() => {
     const content = renderLoadEarlier()
@@ -215,39 +237,56 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return <Text>{'V'}</Text>
   }, [scrollToBottomComponentProp])
 
-  const renderScrollToBottomWrapper = useCallback(() => {
+  const handleScrollToBottomPress = useCallback(() => {
+    doScrollToBottom()
+  }, [doScrollToBottom])
+
+  const scrollToBottomContent = useMemo(() => {
+    return (
+      <Animated.View
+        style={[
+          stylesCommon.centerItems,
+          styles.scrollToBottomContent,
+          scrollToBottomStyle,
+          scrollToBottomStyleAnim,
+        ]}
+      >
+        {renderScrollBottomComponent()}
+      </Animated.View>
+    )
+  }, [scrollToBottomStyle, scrollToBottomStyleAnim, renderScrollBottomComponent])
+
+  const ScrollToBottomWrapper = useCallback(() => {
+    if (!isScrollToBottomEnabled)
+      return null
+
     if (!isScrollToBottomVisible)
       return null
 
     return (
-      <TouchableOpacity onPress={() => doScrollToBottom()}>
-        <Animated.View
-          style={[
-            stylesCommon.centerItems,
-            styles.scrollToBottomStyle,
-            scrollToBottomStyle,
-            scrollToBottomStyleAnim,
-          ]}
-        >
-          {renderScrollBottomComponent()}
-        </Animated.View>
-      </TouchableOpacity>
+      <Pressable
+        style={styles.scrollToBottom}
+        onPress={handleScrollToBottomPress}
+      >
+        {scrollToBottomContent}
+      </Pressable>
     )
-  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomVisible])
+  }, [isScrollToBottomEnabled, isScrollToBottomVisible, handleScrollToBottomPress, scrollToBottomContent])
 
   const onLayoutList = useCallback((event: LayoutChangeEvent) => {
     listHeight.value = event.nativeEvent.layout.height
 
     if (
       !inverted &&
-      messages?.length
+      messages?.length &&
+      isScrollToBottomEnabled
     )
       setTimeout(() => {
         doScrollToBottom(false)
       }, 500)
 
-    listViewProps?.onLayout?.(event)
-  }, [inverted, messages, doScrollToBottom, listHeight, listViewProps])
+    listProps?.onLayout?.(event)
+  }, [inverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -263,15 +302,18 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   const keyExtractor = useCallback((item: unknown) => (item as TMessage)._id.toString(), [])
 
   const renderCell = useCallback((props: CellRendererProps<unknown>) => {
+    const { item, onLayout: onLayoutProp, children } = props
+    const id = (item as IMessage)._id.toString()
+
     const handleOnLayout = (event: LayoutChangeEvent) => {
-      props.onLayout?.(event)
+      onLayoutProp?.(event)
 
       const { y, height } = event.nativeEvent.layout
 
       const newValue = {
         y,
         height,
-        createdAt: new Date((props.item as IMessage).createdAt).getTime(),
+        createdAt: new Date((item as IMessage).createdAt).getTime(),
       }
 
       daysPositions.modify(value => {
@@ -295,7 +337,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
           }
 
         // @ts-expect-error: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
-        value[props.item._id] = newValue
+        value[id] = newValue
         return value
       })
     }
@@ -305,7 +347,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         {...props}
         onLayout={handleOnLayout}
       >
-        {props.children}
+        {children}
       </View>
     )
   }, [daysPositions, inverted])
@@ -349,14 +391,13 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     >
       <AnimatedFlatList
         extraData={extraData}
-        ref={forwardRef as React.Ref<FlatList<unknown>>}
+        ref={forwardRef}
         keyExtractor={keyExtractor}
         data={messages}
         renderItem={renderItem}
         inverted={inverted}
         automaticallyAdjustContentInsets={false}
         style={stylesCommon.fill}
-        {...invertibleScrollViewProps}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
           inverted ? ListHeaderComponent : ListFooterComponent
@@ -368,17 +409,16 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
-        {...listViewProps}
+        {...listProps}
         onLayout={onLayoutList}
         CellRendererComponent={renderCell}
       />
-      {isScrollToBottomEnabled
-        ? renderScrollToBottomWrapper()
-        : null}
+      <ScrollToBottomWrapper />
       <DayAnimated
         scrolledY={scrolledY}
         daysPositions={daysPositions}
         listHeight={listHeight}
+        renderDay={renderDayProp}
         messages={messages}
         isLoadingEarlier={isLoadingEarlier}
       />

package/src/MessageContainer/styles.ts

@@ -13,12 +13,13 @@ export default StyleSheet.create({
   emptyChatContainer: {
     transform: [{ scaleY: -1 }],
   },
-  scrollToBottomStyle: {
-    opacity: 0.8,
+  scrollToBottom: {
     position: 'absolute',
     right: 10,
     bottom: 30,
     zIndex: 999,
+  },
+  scrollToBottomContent: {
     height: 40,
     width: 40,
     borderRadius: 20,

package/src/MessageContainer/types.ts

@@ -1,49 +1,71 @@
-import React, { Component, RefObject } from 'react'
+import React, { RefObject } from 'react'
 import {
   FlatListProps,
-  LayoutChangeEvent,
   StyleProp,
   ViewStyle,
+  FlatList,
 } from 'react-native'
 
 import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
-import { User, IMessage, Reply } from '../types'
-import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
-import { FlatList } from 'react-native-reanimated/lib/typescript/Animated'
-import { AnimateProps } from 'react-native-reanimated'
+import { User, IMessage, Reply, DayProps } from '../types'
+import { ReanimatedScrollEvent } from '../reanimatedCompat'
+import { TypingIndicatorProps } from '../TypingIndicator/types'
 
-export type ListViewProps = {
-  onLayout?: (event: LayoutChangeEvent) => void
-} & object
+export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
 
-export type AnimatedList<TMessage> = Component<AnimateProps<FlatListProps<TMessage>>, unknown, unknown> & FlatList<FlatListProps<TMessage>>
+export type AnimatedList<TMessage> = FlatList<TMessage>
 
-export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
+export interface MessageContainerProps<TMessage extends IMessage = IMessage>
+  extends Omit<TypingIndicatorProps, 'style'> {
+  /** Ref for the FlatList message container */
   forwardRef?: RefObject<AnimatedList<TMessage>>
+  /** Messages to display */
   messages?: TMessage[]
-  isTyping?: boolean
+  /** User sending the messages: { _id, name, avatar } */
   user?: User
-  listViewProps?: ListViewProps
+  /** Additional props for FlatList */
+  listProps?: ListProps<TMessage>
+  /** Reverses display order of messages; default is true */
   inverted?: boolean
+  /** Enables the "Load earlier messages" button */
   loadEarlier?: boolean
+  /** Controls whether or not the message bubbles appear at the top of the chat */
   alignTop?: boolean
+  /** Enables the isScrollToBottomEnabled Component */
   isScrollToBottomEnabled?: boolean
+  /** Scroll to bottom wrapper style */
   scrollToBottomStyle?: StyleProp<ViewStyle>
-  invertibleScrollViewProps?: object
+  /** 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
+  /** Custom footer component on the ListView, e.g. 'User is typing...' */
   renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
+  /** Custom message container */
   renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  /** Custom day above a message */
+  renderDay?(props: DayProps): React.ReactNode
+  /** Custom "Load earlier messages" button */
   renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
+  /** Custom typing indicator */
   renderTypingIndicator?(): React.ReactNode
+  /** Scroll to bottom custom component */
   scrollToBottomComponent?(): React.ReactNode
+  /** Callback when loading earlier messages */
   onLoadEarlier?(): void
+  /** Callback when quick reply is sent */
   onQuickReply?(replies: Reply[]): void
+  /** Infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
   infiniteScroll?: boolean
+  /** Display an ActivityIndicator when loading earlier messages */
   isLoadingEarlier?: boolean
+  /** Custom scroll event handler */
   handleOnScroll?(event: ReanimatedScrollEvent): void
+  /** Style for TypingIndicator component */
+  typingIndicatorStyle?: StyleProp<ViewStyle>
 }
 
 export interface State {

package/src/MessageImage.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   Image,
   StyleSheet,
@@ -44,6 +44,20 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
   imageStyle,
   currentMessage,
 }: MessageImageProps<TMessage>) {
+  const imageSource = useMemo(() => ({
+    ...imageSourceProps,
+    uri: currentMessage?.image,
+  }), [imageSourceProps, currentMessage?.image])
+
+  const computedImageStyle = useMemo(() => [
+    styles.image,
+    imageStyle,
+  ], [imageStyle])
+
+  const activePropsStyle = useMemo(() => [{
+    style: [stylesCommon.fill, styles.imageActive],
+  }], [])
+
   if (currentMessage == null)
     return null
 
@@ -51,15 +65,13 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     <View style={containerStyle}>
       {/* @ts-expect-error: Lightbox types are not fully compatible */}
       <Lightbox
-        activeProps={{
-          style: [stylesCommon.fill, styles.imageActive],
-        }}
+        activeProps={activePropsStyle}
         {...lightboxProps}
       >
         <Image
           {...imageProps}
-          style={[styles.image, imageStyle]}
-          source={{ ...imageSourceProps, uri: currentMessage.image }}
+          style={computedImageStyle}
+          source={imageSource}
         />
       </Lightbox>
     </View>