react-native-gifted-chat 2.7.3 → 2.8.1

package/src/Message/types.ts

@@ -3,7 +3,7 @@ import { AvatarProps } from '../Avatar'
 import { SystemMessageProps } from '../SystemMessage'
 import { DayProps } from '../Day'
 import { IMessage, User, LeftRightStyle } from '../types'
-import Bubble from '../Bubble'
+import { BubbleProps } from '../Bubble'
 
 export interface MessageProps<TMessage extends IMessage> {
   showUserAvatar?: boolean
@@ -14,7 +14,7 @@ export interface MessageProps<TMessage extends IMessage> {
   user: User
   inverted?: boolean
   containerStyle?: LeftRightStyle<ViewStyle>
-  renderBubble?(props: Bubble['props']): React.ReactNode
+  renderBubble?(props: BubbleProps<TMessage>): React.ReactNode
   renderDay?(props: DayProps): React.ReactNode
   renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
   renderAvatar?(props: AvatarProps<TMessage>): React.ReactNode

package/src/MessageContainer/components/Item/index.tsx

@@ -91,9 +91,8 @@ const DayWrapper = forwardRef<View, MessageProps<IMessage>>((props, ref) => {
   )
 })
 
-const Item = (props: ItemProps) => {
+const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   const {
-    onRefDayWrapper,
     renderMessage: renderMessageProp,
     scrolledY,
     daysPositions,
@@ -134,29 +133,19 @@ const Item = (props: ItemProps) => {
     ),
   }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset])
 
-  const handleRef = useCallback((ref: unknown) => {
-    onRefDayWrapper(
-      ref,
-      props.currentMessage._id,
-      new Date(props.currentMessage.createdAt).getTime()
-    )
-  }, [onRefDayWrapper, props.currentMessage])
-
   return (
+    // do not remove key. it helps to get correct position of the day container
     <View key={props.currentMessage._id.toString()}>
       <Animated.View
         style={style}
         onLayout={handleLayoutDayContainer}
       >
-        <DayWrapper
-          {...rest as MessageProps<IMessage>}
-          ref={handleRef}
-        />
+        <DayWrapper {...rest as MessageProps<TMessage>} />
       </Animated.View>
       {
         renderMessageProp
-          ? renderMessageProp(rest as MessageProps<IMessage>)
-          : <Message {...rest as MessageProps<IMessage>} />
+          ? renderMessageProp(rest as MessageProps<TMessage>)
+          : <Message {...rest as MessageProps<TMessage>} />
       }
     </View>
   )

package/src/MessageContainer/components/Item/types.ts

@@ -1,11 +1,10 @@
 import { MessageContainerProps, DaysPositions } from '../../types'
 import { IMessage } from '../../../types'
 
-export interface ItemProps extends MessageContainerProps<IMessage> {
-  onRefDayWrapper: (ref: unknown, id: string | number, createdAt: number) => void
-  currentMessage: IMessage
-  previousMessage?: IMessage
-  nextMessage?: IMessage
+export interface ItemProps<TMessage extends IMessage> extends MessageContainerProps<TMessage> {
+  currentMessage: TMessage
+  previousMessage?: TMessage
+  nextMessage?: TMessage
   position: 'left' | 'right'
   scrolledY: { value: number }
   daysPositions: { value: DaysPositions }

package/src/MessageContainer/index.tsx

@@ -1,12 +1,14 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
   TouchableOpacity,
   Text,
   Platform,
   LayoutChangeEvent,
+  ListRenderItemInfo,
+  FlatList,
+  CellRendererProps,
 } from 'react-native'
-import { FlashList, ListRenderItemInfo } from '@shopify/flash-list'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
 import DayAnimated from './components/DayAnimated'
@@ -21,10 +23,11 @@ import { ItemProps } from './components/Item/types'
 import { warning } from '../logging'
 import stylesCommon from '../styles'
 import styles from './styles'
+import { isSameDay } from '../utils'
 
 export * from './types'
 
-const AnimatedFlashList = Animated.createAnimatedComponent(FlashList)
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)
 
 function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {
   const {
@@ -77,7 +80,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
-    if (loadEarlier === true) {
+    if (loadEarlier) {
       if (renderLoadEarlierProp)
         return renderLoadEarlierProp(props)
 
@@ -136,31 +139,6 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       makeScrollToBottomHidden()
   }, [handleOnScrollProp, inverted, scrollToBottomOffset, scrollToBottomOpacity])
 
-  const handleLayoutDayWrapper = useCallback((ref: unknown, id: string | number, createdAt: number) => {
-    setTimeout(() => { // do not delete "setTimeout". It's necessary for get correct layout.
-      const itemLayout = forwardRef?.current?.recyclerlistview_unsafe?.getLayout(messages.findIndex(m => m._id === id))
-
-      if (ref && itemLayout)
-        daysPositions.modify(value => {
-          'worklet'
-
-          // @ts-expect-error: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
-          value[id] = {
-            ...itemLayout,
-            createdAt,
-          }
-          return value
-        })
-      else if (daysPositions.value[id] != null)
-        daysPositions.modify(value => {
-          'worklet'
-
-          delete value[id]
-          return value
-        })
-    }, 100)
-  }, [messages, daysPositions, forwardRef])
-
   const renderItem = useCallback(({ item, index }: ListRenderItemInfo<unknown>): React.ReactElement | null => {
     const messageItem = item as TMessage
 
@@ -185,25 +163,24 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       const nextMessage =
         (inverted ? messages[index - 1] : messages[index + 1]) || {}
 
-      const messageProps: ItemProps = {
+      const messageProps: ItemProps<TMessage> = {
         ...restProps,
         currentMessage: messageItem,
         previousMessage,
         nextMessage,
         position: messageItem.user._id === user._id ? 'right' : 'left',
-        onRefDayWrapper: handleLayoutDayWrapper,
         scrolledY,
         daysPositions,
         listHeight,
       }
 
       return (
-        <Item {...messageProps} />
+        <Item<TMessage> {...messageProps} />
       )
     }
 
     return null
-  }, [props, inverted, handleLayoutDayWrapper, scrolledY, daysPositions, listHeight, user])
+  }, [props, inverted, scrolledY, daysPositions, listHeight, user])
 
   const renderChatEmpty = useCallback(() => {
     if (renderChatEmptyProp)
@@ -243,21 +220,18 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       return null
 
     return (
-      <Animated.View
-        style={[
-          stylesCommon.centerItems,
-          styles.scrollToBottomStyle,
-          scrollToBottomStyle,
-          scrollToBottomStyleAnim,
-        ]}
-      >
-        <TouchableOpacity
-          onPress={() => doScrollToBottom()}
-          hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}
+      <TouchableOpacity onPress={() => doScrollToBottom()}>
+        <Animated.View
+          style={[
+            stylesCommon.centerItems,
+            styles.scrollToBottomStyle,
+            scrollToBottomStyle,
+            scrollToBottomStyleAnim,
+          ]}
         >
           {renderScrollBottomComponent()}
-        </TouchableOpacity>
-      </Animated.View>
+        </Animated.View>
+      </TouchableOpacity>
     )
   }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomVisible])
 
@@ -288,6 +262,54 @@ 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 handleOnLayout = (event: LayoutChangeEvent) => {
+      props.onLayout?.(event)
+
+      const { y, height } = event.nativeEvent.layout
+
+      const newValue = {
+        y,
+        height,
+        createdAt: new Date((props.item as IMessage).createdAt).getTime(),
+      }
+
+      daysPositions.modify(value => {
+        'worklet'
+
+        const isSameDay = (date1: number, date2: number) => {
+          const d1 = new Date(date1)
+          const d2 = new Date(date2)
+
+          return (
+            d1.getDate() === d2.getDate() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getFullYear() === d2.getFullYear()
+          )
+        }
+
+        for (const [key, item] of Object.entries(value))
+          if (isSameDay(newValue.createdAt, item.createdAt) && (inverted ? item.y <= newValue.y : item.y >= newValue.y)) {
+            delete value[key]
+            break
+          }
+
+        // @ts-expect-error: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
+        value[props.item._id] = newValue
+        return value
+      })
+    }
+
+    return (
+      <View
+        {...props}
+        onLayout={handleOnLayout}
+      >
+        {props.children}
+      </View>
+    )
+  }, [daysPositions, inverted])
+
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
       scrolledY.value = event.contentOffset.y
@@ -296,6 +318,28 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     },
   }, [handleOnScroll])
 
+  // removes unrendered days positions when messages are added/removed
+  useEffect(() => {
+    Object.keys(daysPositions.value).forEach(key => {
+      const messageIndex = messages.findIndex(m => m._id.toString() === key)
+      let shouldRemove = messageIndex === -1
+
+      if (!shouldRemove) {
+        const prevMessage = messages[messageIndex + (inverted ? 1 : -1)]
+        const message = messages[messageIndex]
+        shouldRemove = !!prevMessage && isSameDay(message, prevMessage)
+      }
+
+      if (shouldRemove)
+        daysPositions.modify(value => {
+          'worklet'
+
+          delete value[key]
+          return value
+        })
+    })
+  }, [messages, daysPositions, inverted])
+
   return (
     <View
       style={[
@@ -303,15 +347,15 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         alignTop ? styles.containerAlignTop : stylesCommon.fill,
       ]}
     >
-      <AnimatedFlashList
-        ref={forwardRef}
-        extraData={[extraData, isTyping]}
+      <AnimatedFlatList
+        extraData={extraData}
+        ref={forwardRef as React.Ref<FlatList<unknown>>}
         keyExtractor={keyExtractor}
-        automaticallyAdjustContentInsets={false}
-        inverted={inverted}
         data={messages}
-        style={stylesCommon.fill}
         renderItem={renderItem}
+        inverted={inverted}
+        automaticallyAdjustContentInsets={false}
+        style={stylesCommon.fill}
         {...invertibleScrollViewProps}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
@@ -321,12 +365,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
           inverted ? ListFooterComponent : ListHeaderComponent
         }
         onScroll={scrollHandler}
-        scrollEventThrottle={16}
+        scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
-        estimatedItemSize={100}
         {...listViewProps}
         onLayout={onLayoutList}
+        CellRendererComponent={renderCell}
       />
       {isScrollToBottomEnabled
         ? renderScrollToBottomWrapper()

package/src/MessageContainer/types.ts

@@ -1,25 +1,26 @@
 import React, { Component, RefObject } from 'react'
 import {
+  FlatListProps,
   LayoutChangeEvent,
   StyleProp,
   ViewStyle,
 } from 'react-native'
-import { FlashList, FlashListProps } from '@shopify/flash-list'
 
 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'
 
 export type ListViewProps = {
   onLayout?: (event: LayoutChangeEvent) => void
 } & object
 
-export type AnimatedList = Component<AnimateProps<FlashListProps<unknown>>, unknown, unknown> & FlashList<FlashListProps<unknown>>
+export type AnimatedList<TMessage> = Component<AnimateProps<FlatListProps<TMessage>>, unknown, unknown> & FlatList<FlatListProps<TMessage>>
 
-export interface MessageContainerProps<TMessage extends IMessage> {
-  forwardRef?: RefObject<AnimatedList | null>
+export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
+  forwardRef?: RefObject<AnimatedList<TMessage>>
   messages?: TMessage[]
   isTyping?: boolean
   user?: User

package/src/MessageText.tsx

@@ -140,13 +140,13 @@ export function MessageText<TMessage extends IMessage = IMessage> ({
     <View
       style={[
         styles[position].container,
-        containerStyle && containerStyle[position],
+        containerStyle?.[position],
       ]}
     >
       <ParsedText
         style={[
           styles[position].text,
-          textStyle && textStyle[position],
+          textStyle?.[position],
           customTextStyle,
         ]}
         parse={[

package/src/Time.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native'
 import dayjs from 'dayjs'
 
@@ -14,6 +14,7 @@ const { containerStyle } = StyleSheet.create({
     marginBottom: 5,
   },
 })
+
 const { textStyle } = StyleSheet.create({
   textStyle: {
     fontSize: 10,
@@ -58,6 +59,7 @@ export function Time<TMessage extends IMessage = IMessage> ({
   timeTextStyle,
 }: TimeProps<TMessage>) {
   const { getLocale } = useChatContext()
+
   if (currentMessage == null)
     return null
 
@@ -65,13 +67,13 @@ export function Time<TMessage extends IMessage = IMessage> ({
     <View
       style={[
         styles[position].container,
-        containerStyle && containerStyle[position],
+        containerStyle?.[position],
       ]}
     >
       <Text
         style={[
           styles[position].text,
-          timeTextStyle && timeTextStyle[position],
+          timeTextStyle?.[position],
         ]}
       >
         {dayjs(currentMessage.createdAt).locale(getLocale()).format(timeFormat)}