react-native-gifted-chat 2.6.4 → 2.7.0

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

@@ -0,0 +1,136 @@
+import React, { forwardRef, useCallback, useMemo } from 'react'
+import { LayoutChangeEvent, View } from 'react-native'
+import { IMessage } from '../../../types'
+import Message, { MessageProps } from '../../../Message'
+import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated'
+import { DaysPositions } from '../../types'
+import { Day } from '../../../Day'
+import { isSameDay } from '../../../utils'
+import { ItemProps } from './types'
+
+export * from './types'
+
+export const useScrolledPosition = (listHeight: { value: number }, scrolledY: { value: number }, containerHeight: { value: number }, dayBottomMargin: number, dayTopOffset: number) => {
+  const scrolledPosition = useDerivedValue(() =>
+    listHeight.value + scrolledY.value - containerHeight.value - dayBottomMargin - dayTopOffset
+  , [listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset])
+
+  return scrolledPosition
+}
+
+export const useTopOffset = (
+  listHeight: { value: number },
+  scrolledY: { value: number },
+  daysPositions: { value: DaysPositions },
+  containerHeight: { value: number },
+  dayBottomMargin: number,
+  dayTopOffset: number
+) => {
+  const scrolledPosition = useScrolledPosition(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
+
+  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
+
+  const currentDayPosition = useDerivedValue(() =>
+    daysPositionsArray.value.find((day, index) => {
+      const dayPosition = day.y + day.height
+      return (scrolledPosition.value < dayPosition) || index === daysPositionsArray.value.length - 1
+    })
+  , [daysPositionsArray, scrolledPosition])
+
+  const topOffset = useDerivedValue(() => {
+    const scrolledBottomY = listHeight.value + scrolledY.value - (currentDayPosition.value?.height ?? 0) - 5 // 5 is marginTop in Day component.
+    const dateBottomY = currentDayPosition.value?.y ?? 0
+
+    const topOffset = scrolledBottomY - dateBottomY
+
+    return topOffset
+  }, [listHeight, scrolledY, currentDayPosition])
+
+  return topOffset
+}
+
+const DayWrapper = forwardRef<View, MessageProps<IMessage>>((props, ref) => {
+  const {
+    renderDay: renderDayProp,
+    currentMessage,
+    previousMessage,
+  } = props
+
+  if (!currentMessage?.createdAt || isSameDay(currentMessage, previousMessage))
+    return null
+
+  const {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    containerStyle,
+    onMessageLayout,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ...rest
+  } = props
+
+  return (
+    <View ref={ref}>
+      {
+        renderDayProp
+          ? renderDayProp({ ...rest, createdAt: currentMessage.createdAt })
+          : <Day {...rest} createdAt={currentMessage.createdAt} />
+      }
+    </View>
+  )
+})
+
+const Item = (props: ItemProps) => {
+  const {
+    onRefDayWrapper,
+    renderMessage: renderMessageProp,
+    scrolledY,
+    daysPositions,
+    listHeight,
+    ...rest
+  } = props
+
+  const containerHeight = useSharedValue(0)
+  const dayTopOffset = useMemo(() => 10, [])
+  const dayBottomMargin = useMemo(() => 10, [])
+  const topOffset = useTopOffset(listHeight, scrolledY, daysPositions, containerHeight, dayBottomMargin, dayTopOffset)
+
+  const handleLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    containerHeight.value = nativeEvent.layout.height
+  }, [containerHeight])
+
+  const style = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      topOffset.value,
+      [-dayTopOffset, -0.0001, 0, containerHeight.value + dayTopOffset],
+      [0, 0, 1, 1],
+      'clamp'
+    ),
+  }), [topOffset, containerHeight, dayTopOffset])
+
+  const handleRef = useCallback((ref: unknown) => {
+    onRefDayWrapper(
+      ref,
+      props.currentMessage._id,
+      props.currentMessage.createdAt instanceof Date
+        ? props.currentMessage.createdAt.getTime()
+        : props.currentMessage.createdAt
+    )
+  }, [onRefDayWrapper, props.currentMessage])
+
+  return (
+    <View key={props.currentMessage._id.toString()}>
+      <Animated.View style={style} onLayout={handleLayout}>
+        <DayWrapper
+          {...rest as MessageProps<IMessage>}
+          ref={handleRef}
+        />
+      </Animated.View>
+      {
+        renderMessageProp
+          ? renderMessageProp(rest as MessageProps<IMessage>)
+          : <Message {...rest as MessageProps<IMessage>} />
+      }
+    </View>
+  )
+}
+
+export default Item

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

@@ -0,0 +1,13 @@
+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
+  position: 'left' | 'right'
+  scrolledY: { value: number }
+  daysPositions: { value: DaysPositions }
+  listHeight: { value: number }
+}

package/src/MessageContainer/index.tsx

@@ -0,0 +1,316 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  Platform,
+  LayoutChangeEvent,
+} from 'react-native'
+import { FlashList, ListRenderItemInfo } from '@shopify/flash-list'
+import Animated, { runOnJS, useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
+import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
+import DayAnimated from './components/DayAnimated'
+import Item from './components/Item'
+
+import { LoadEarlier } from '../LoadEarlier'
+import { IMessage } from '../types'
+import TypingIndicator from '../TypingIndicator'
+import { MessageContainerProps, DaysPositions } from './types'
+import { ItemProps } from './components/Item/types'
+
+import { warning } from '../logging'
+import stylesCommon from '../styles'
+import styles from './styles'
+
+export * from './types'
+
+const AnimatedFlashList = Animated.createAnimatedComponent(FlashList)
+
+function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageContainerProps<TMessage>) {
+  const {
+    messages = [],
+    user,
+    isTyping = false,
+    renderChatEmpty: renderChatEmptyProp,
+    onLoadEarlier,
+    inverted = true,
+    loadEarlier = false,
+    listViewProps,
+    invertibleScrollViewProps,
+    extraData = null,
+    scrollToBottom = false,
+    scrollToBottomOffset = 200,
+    alignTop = false,
+    scrollToBottomStyle,
+    infiniteScroll = false,
+    isLoadingEarlier = false,
+    renderTypingIndicator: renderTypingIndicatorProp,
+    renderFooter: renderFooterProp,
+    renderLoadEarlier: renderLoadEarlierProp,
+    forwardRef,
+    handleOnScroll: handleOnScrollProp,
+    scrollToBottomComponent: scrollToBottomComponentProp,
+  } = props
+
+  const [isScrollToBottomVisible, setIsScrollToBottomVisible] = useState(false)
+  const [hasScrolled, setHasScrolled] = useState(false)
+
+  const daysPositions = useSharedValue<DaysPositions>({})
+  const listHeight = useSharedValue(0)
+  const scrolledY = useSharedValue(0)
+
+  const renderTypingIndicator = useCallback(() => {
+    if (renderTypingIndicatorProp)
+      return renderTypingIndicatorProp()
+
+    return <TypingIndicator isTyping={isTyping} />
+  }, [isTyping, renderTypingIndicatorProp])
+
+  const ListFooterComponent = useMemo(() => {
+    if (renderFooterProp)
+      return <>{renderFooterProp(props)}</>
+
+    return <>{renderTypingIndicator()}</>
+  }, [renderFooterProp, renderTypingIndicator, props])
+
+  const renderLoadEarlier = useCallback(() => {
+    if (loadEarlier === true) {
+      if (renderLoadEarlierProp)
+        return renderLoadEarlierProp(props)
+
+      return <LoadEarlier {...props} />
+    }
+
+    return null
+  }, [loadEarlier, renderLoadEarlierProp, props])
+
+  const scrollTo = useCallback((options: { animated?: boolean, offset: number }) => {
+    if (forwardRef?.current && options)
+      forwardRef.current.scrollToOffset(options)
+  }, [forwardRef])
+
+  const doScrollToBottom = useCallback((animated: boolean = true) => {
+    if (inverted)
+      scrollTo({ offset: 0, animated })
+    else if (forwardRef?.current)
+      forwardRef.current.scrollToEnd({ animated })
+  }, [forwardRef, inverted, scrollTo])
+
+  const handleOnScroll = useCallback((event: ReanimatedScrollEvent) => {
+    handleOnScrollProp?.(event)
+
+    const {
+      contentOffset: { y: contentOffsetY },
+      contentSize: { height: contentSizeHeight },
+      layoutMeasurement: { height: layoutMeasurementHeight },
+    } = event
+
+    if (inverted)
+      if (contentOffsetY > scrollToBottomOffset!)
+        setIsScrollToBottomVisible(true)
+      else
+        setIsScrollToBottomVisible(false)
+    else if (
+      contentOffsetY < scrollToBottomOffset! &&
+      contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset!
+    )
+      setIsScrollToBottomVisible(true)
+    else
+      setIsScrollToBottomVisible(false)
+
+    setHasScrolled(true)
+  }, [handleOnScrollProp, inverted, scrollToBottomOffset])
+
+  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.value = {
+          ...daysPositions.value,
+          [id]: {
+            ...itemLayout,
+            createdAt,
+          },
+        }
+      } else if (daysPositions.value[id] != null) {
+        const nextDaysPositions = { ...daysPositions.value }
+        delete nextDaysPositions[id]
+        daysPositions.value = nextDaysPositions
+      }
+    }, 100)
+  }, [messages, daysPositions, forwardRef])
+
+  const renderItem = useCallback(({ item, index }: ListRenderItemInfo<unknown>): React.ReactElement | null => {
+    const messageItem = item as TMessage
+
+    if (!messageItem._id && messageItem._id !== 0)
+      warning('GiftedChat: `_id` is missing for message', JSON.stringify(item))
+
+    if (!messageItem.user) {
+      if (!messageItem.system)
+        warning(
+          'GiftedChat: `user` is missing for message',
+          JSON.stringify(messageItem)
+        )
+
+      messageItem.user = { _id: 0 }
+    }
+
+    const { messages, ...restProps } = props
+
+    if (messages && user) {
+      const previousMessage =
+        (inverted ? messages[index + 1] : messages[index - 1]) || {}
+      const nextMessage =
+        (inverted ? messages[index - 1] : messages[index + 1]) || {}
+
+      const messageProps: ItemProps = {
+        ...restProps,
+        currentMessage: messageItem,
+        previousMessage,
+        nextMessage,
+        position: messageItem.user._id === user._id ? 'right' : 'left',
+        onRefDayWrapper: handleLayoutDayWrapper,
+        scrolledY,
+        daysPositions,
+        listHeight,
+      }
+
+      return (
+        <Item {...messageProps} />
+      )
+    }
+
+    return null
+  }, [props, inverted, handleLayoutDayWrapper, scrolledY, daysPositions, listHeight, user])
+
+  const renderChatEmpty = useCallback(() => {
+    if (renderChatEmptyProp)
+      return inverted
+        ? (
+          renderChatEmptyProp()
+        )
+        : (
+          <View style={[stylesCommon.fill, styles.emptyChatContainer]}>
+            {renderChatEmptyProp()}
+          </View>
+        )
+
+    return <View style={stylesCommon.fill} />
+  }, [inverted, renderChatEmptyProp])
+
+  const ListHeaderComponent = useMemo(() => {
+    const content = renderLoadEarlier()
+
+    if (!content)
+      return null
+
+    return (
+      <View style={stylesCommon.fill}>{content}</View>
+    )
+  }, [renderLoadEarlier])
+
+  const renderScrollBottomComponent = useCallback(() => {
+    if (scrollToBottomComponentProp)
+      return scrollToBottomComponentProp()
+
+    return <Text>{'V'}</Text>
+  }, [scrollToBottomComponentProp])
+
+  const renderScrollToBottomWrapper = useCallback(() => {
+    return (
+      <View style={[stylesCommon.centerItems, styles.scrollToBottomStyle, scrollToBottomStyle]}>
+        <TouchableOpacity
+          onPress={() => doScrollToBottom()}
+          hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}
+        >
+          {renderScrollBottomComponent()}
+        </TouchableOpacity>
+      </View>
+    )
+  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom])
+
+  const onLayoutList = useCallback((event: LayoutChangeEvent) => {
+    listHeight.value = event.nativeEvent.layout.height
+
+    if (
+      !inverted &&
+      messages?.length
+    )
+      setTimeout(() => {
+        doScrollToBottom(false)
+      }, 500)
+
+    listViewProps?.onLayout?.(event)
+  }, [inverted, messages, doScrollToBottom, listHeight, listViewProps])
+
+  const onEndReached = useCallback(() => {
+    if (
+      infiniteScroll &&
+      hasScrolled &&
+      loadEarlier &&
+      onLoadEarlier &&
+      !isLoadingEarlier &&
+      Platform.OS !== 'web'
+    )
+      onLoadEarlier()
+  }, [hasScrolled, infiniteScroll, loadEarlier, onLoadEarlier, isLoadingEarlier])
+
+  const keyExtractor = useCallback((item: unknown) => (item as TMessage)._id.toString(), [])
+
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: event => {
+      scrolledY.value = event.contentOffset.y
+
+      runOnJS(handleOnScroll)(event)
+    },
+  }, [handleOnScroll])
+
+  return (
+    <View
+      style={[
+        styles.contentContainerStyle,
+        alignTop ? styles.containerAlignTop : stylesCommon.fill,
+      ]}
+    >
+      <AnimatedFlashList
+        ref={forwardRef}
+        extraData={[extraData, isTyping]}
+        keyExtractor={keyExtractor}
+        automaticallyAdjustContentInsets={false}
+        inverted={inverted}
+        data={messages}
+        style={stylesCommon.fill}
+        renderItem={renderItem}
+        {...invertibleScrollViewProps}
+        ListEmptyComponent={renderChatEmpty}
+        ListFooterComponent={
+          inverted ? ListHeaderComponent : ListFooterComponent
+        }
+        ListHeaderComponent={
+          inverted ? ListFooterComponent : ListHeaderComponent
+        }
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+        onEndReached={onEndReached}
+        onEndReachedThreshold={0.1}
+        estimatedItemSize={100}
+        {...listViewProps}
+        onLayout={onLayoutList}
+      />
+      {isScrollToBottomVisible && scrollToBottom
+        ? renderScrollToBottomWrapper()
+        : null}
+      <DayAnimated
+        scrolledY={scrolledY}
+        daysPositions={daysPositions}
+        listHeight={listHeight}
+        messages={messages}
+        isLoadingEarlier={isLoadingEarlier}
+      />
+    </View>
+  )
+}
+
+export default MessageContainer

package/src/MessageContainer/styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native'
+import Color from '../Color'
+
+export default StyleSheet.create({
+  containerAlignTop: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  contentContainerStyle: {
+    flexGrow: 1,
+    justifyContent: 'flex-start',
+  },
+  emptyChatContainer: {
+    transform: [{ scaleY: -1 }],
+  },
+  scrollToBottomStyle: {
+    opacity: 0.8,
+    position: 'absolute',
+    right: 10,
+    bottom: 30,
+    zIndex: 999,
+    height: 40,
+    width: 40,
+    borderRadius: 20,
+    backgroundColor: Color.white,
+    shadowColor: Color.black,
+    shadowOpacity: 0.5,
+    shadowOffset: { width: 0, height: 0 },
+    shadowRadius: 1,
+  },
+})

package/src/MessageContainer/types.ts

@@ -0,0 +1,60 @@
+import React, { Component, RefObject } from 'react'
+import {
+  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 { 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 interface MessageContainerProps<TMessage extends IMessage> {
+  forwardRef?: RefObject<AnimatedList | null>
+  messages?: TMessage[]
+  isTyping?: boolean
+  user?: User
+  listViewProps?: ListViewProps
+  inverted?: boolean
+  loadEarlier?: boolean
+  alignTop?: boolean
+  scrollToBottom?: boolean
+  scrollToBottomStyle?: StyleProp<ViewStyle>
+  invertibleScrollViewProps?: object
+  extraData?: object
+  scrollToBottomOffset?: number
+  renderChatEmpty?(): React.ReactNode
+  renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
+  renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
+  renderTypingIndicator?(): React.ReactNode
+  scrollToBottomComponent?(): React.ReactNode
+  onLoadEarlier?(): void
+  onQuickReply?(replies: Reply[]): void
+  infiniteScroll?: boolean
+  isLoadingEarlier?: boolean
+  handleOnScroll?(event: ReanimatedScrollEvent): void
+}
+
+export interface State {
+  showScrollBottom: boolean
+  hasScrolled: boolean
+}
+
+interface ViewLayout {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export type DaysPositions = { [key: string]: ViewLayout & { createdAt: number } }

package/src/MessageImage.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import {
   Image,
@@ -12,8 +11,8 @@ import {
 } from 'react-native'
 // TODO: support web
 import Lightbox, { LightboxProps } from 'react-native-lightbox-v2'
-import { IMessage } from './Models'
-import { StylePropType } from './utils'
+import { IMessage } from './types'
+import stylesCommon from './styles'
 
 const styles = StyleSheet.create({
   image: {
@@ -24,7 +23,6 @@ const styles = StyleSheet.create({
     resizeMode: 'cover',
   },
   imageActive: {
-    flex: 1,
     resizeMode: 'contain',
   },
 })
@@ -54,7 +52,7 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
       {/* @ts-expect-error: Lightbox types are not fully compatible */}
       <Lightbox
         activeProps={{
-          style: styles.imageActive,
+          style: [stylesCommon.fill, styles.imageActive],
         }}
         {...lightboxProps}
       >
@@ -67,12 +65,3 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     </View>
   )
 }
-
-MessageImage.propTypes = {
-  currentMessage: PropTypes.object,
-  containerStyle: StylePropType,
-  imageSourceProps: PropTypes.object,
-  imageStyle: StylePropType,
-  imageProps: PropTypes.object,
-  lightboxProps: PropTypes.object,
-}

package/src/MessageText.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import {
   Linking,
@@ -11,8 +10,7 @@ import {
 } from 'react-native'
 
 import ParsedText from 'react-native-parsed-text'
-import { LeftRightStyle, IMessage } from './Models'
-import { StylePropType } from './utils'
+import { LeftRightStyle, IMessage } from './types'
 import { useChatContext } from './GiftedChatContext'
 import { error } from './logging'
 
@@ -152,7 +150,7 @@ export function MessageText<TMessage extends IMessage = IMessage> ({
           customTextStyle,
         ]}
         parse={[
-          ...(parsePatterns ? parsePatterns(linkStyle as TextStyle) : []),
+          ...(parsePatterns ? parsePatterns(linkStyle as unknown as TextStyle) : []),
           { type: 'url', style: linkStyle, onPress: onUrlPress },
           { type: 'phone', style: linkStyle, onPress: onPhonePress },
           { type: 'email', style: linkStyle, onPress: onEmailPress },
@@ -164,24 +162,3 @@ export function MessageText<TMessage extends IMessage = IMessage> ({
     </View>
   )
 }
-
-MessageText.propTypes = {
-  position: PropTypes.oneOf(['left', 'right']),
-  optionTitles: PropTypes.arrayOf(PropTypes.string),
-  currentMessage: PropTypes.object,
-  containerStyle: PropTypes.shape({
-    left: StylePropType,
-    right: StylePropType,
-  }),
-  textStyle: PropTypes.shape({
-    left: StylePropType,
-    right: StylePropType,
-  }),
-  linkStyle: PropTypes.shape({
-    left: StylePropType,
-    right: StylePropType,
-  }),
-  parsePatterns: PropTypes.func,
-  textProps: PropTypes.object,
-  customTextStyle: StylePropType,
-}

package/src/MessageVideo.tsx

@@ -9,10 +9,7 @@ export function MessageVideo () {
         {'Video is not implemented by GiftedChat.'}
       </Text>
       <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
-        {
-          'You need to provide your own implementation by using renderMessageVideo'
-        }
-        {'prop.'}
+        {'\nYou need to provide your own implementation by using renderMessageVideo prop.'}
       </Text>
     </View>
   )