react-native-gifted-chat 2.7.2 → 2.8.0

package/src/GiftedChat/index.tsx

@@ -56,13 +56,18 @@ import styles from './styles'
 dayjs.extend(localizedFormat)
 
 function GiftedChat<TMessage extends IMessage = IMessage> (
-  props: GiftedChatProps
+  props: GiftedChatProps<TMessage>
 ) {
   const {
     messages = [],
     initialText = '',
     isTyping,
-    messageIdGenerator = () => crypto.randomUUID(),
+
+    // "random" function from here: https://stackoverflow.com/a/8084248/3452513
+    // we do not use uuid since it would add extra native dependency (https://www.npmjs.com/package/react-native-get-random-values)
+    // lib's user can decide which algorithm to use and pass it as a prop
+    messageIdGenerator = () => (Math.random() + 1).toString(36).substring(7),
+
     user = {},
     onSend,
     locale = 'en',
@@ -89,9 +94,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
 
   const messageContainerRef = useMemo(
-    () => props.messageContainerRef || createRef<AnimatedList>(),
+    () => props.messageContainerRef || createRef<AnimatedList<TMessage>>(),
     [props.messageContainerRef]
-  )
+  ) as RefObject<AnimatedList<TMessage>>
 
   const textInputRef = useMemo(
     () => props.textInputRef || createRef<TextInput>(),
@@ -200,9 +205,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     const { messagesContainerStyle, ...messagesContainerProps } = props
 
-    const fragment = (
+    return (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
-        <MessageContainer
+        <MessageContainer<TMessage>
           {...messagesContainerProps}
           invertibleScrollViewProps={{
             inverted,
@@ -215,8 +220,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         {renderChatFooter?.()}
       </View>
     )
-
-    return fragment
   }, [
     isInitialized,
     isTyping,
@@ -444,10 +447,10 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   )
 }
 
-function GiftedChatWrapper (props: GiftedChatProps) {
+function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
   return (
     <KeyboardProvider>
-      <GiftedChat {...props} />
+      <GiftedChat<TMessage> {...props} />
     </KeyboardProvider>
   )
 }

package/src/GiftedChat/types.ts

@@ -30,12 +30,12 @@ import { QuickRepliesProps } from '../QuickReplies'
 import { SendProps } from '../Send'
 import { SystemMessageProps } from '../SystemMessage'
 import { TimeProps } from '../Time'
-import MessageContainer, { AnimatedList, ListViewProps } from '../MessageContainer'
+import { AnimatedList, ListViewProps, MessageContainerProps } from '../MessageContainer'
 import Bubble from '../Bubble'
 
-export interface GiftedChatProps<TMessage extends IMessage = IMessage> extends Partial<Omit<typeof MessageContainer<TMessage>, 'isScrollToBottomEnabled'>> {
+export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
   /* Message container ref */
-  messageContainerRef?: RefObject<AnimatedList>
+  messageContainerRef?: RefObject<AnimatedList<TMessage>>
   /* text input ref */
   textInputRef?: RefObject<TextInput>
   /* Messages to display */
@@ -171,7 +171,7 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> extends P
   /* Custom time inside a message */
   renderTime?(props: TimeProps<TMessage>): React.ReactNode
   /* Custom footer component on the ListView, e.g. 'User is typing...' */
-  renderFooter?(): React.ReactNode
+  renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
   /* Custom component to render in the ListView when messages are empty */
   renderChatEmpty?(): React.ReactNode
   /* Custom component to render below the MessageContainer (separate from the ListView) */

package/src/GiftedChatContext.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { createContext, useContext } from 'react'
 import {
   ActionSheetOptions,
 } from '@expo/react-native-action-sheet'
@@ -13,11 +13,11 @@ export interface IGiftedChatContext {
   getLocale(): string
 }
 
-export const GiftedChatContext = React.createContext<IGiftedChatContext>({
+export const GiftedChatContext = createContext<IGiftedChatContext>({
   getLocale: () => 'en',
   actionSheet: () => ({
     showActionSheetWithOptions: () => {},
   }),
 })
 
-export const useChatContext = () => React.useContext(GiftedChatContext)
+export const useChatContext = () => useContext(GiftedChatContext)

package/src/InputToolbar.tsx

@@ -40,6 +40,7 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
 
   const actionsFragment = useMemo(() => {
     const props = {
+      onPressActionButton,
       options,
       optionTintColor,
       icon,

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,18 @@ 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 (
     <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)
@@ -288,6 +265,37 @@ 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) => {
+      const prevMessage = messages[props.index + (inverted ? 1 : -1)]
+      if (prevMessage && isSameDay(props.item as IMessage, prevMessage))
+        return
+
+      const { y, height } = event.nativeEvent.layout
+
+      const newValue = {
+        y,
+        height,
+        createdAt: new Date((props.item as IMessage).createdAt).getTime(),
+      }
+
+      daysPositions.modify(value => {
+        'worklet'
+
+        // @ts-expect-error: https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
+        value[props.item._id] = newValue
+        return value
+      })
+    }
+
+    return (
+      <Animated.View
+        {...props}
+        onLayout={handleOnLayout}
+      />
+    )
+  }, [daysPositions, messages, inverted])
+
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
       scrolledY.value = event.contentOffset.y
@@ -296,6 +304,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 === 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,8 +333,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         alignTop ? styles.containerAlignTop : stylesCommon.fill,
       ]}
     >
-      <AnimatedFlashList
-        ref={forwardRef}
+      <AnimatedFlatList
+        ref={forwardRef as React.Ref<FlatList<unknown>>}
         extraData={[extraData, isTyping]}
         keyExtractor={keyExtractor}
         automaticallyAdjustContentInsets={false}
@@ -321,12 +351,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/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)}