react-native-gifted-chat 3.3.2 → 3.3.3

package/src/MessageReply.tsx

@@ -1,160 +0,0 @@
-import React, { useMemo, useCallback } from 'react'
-import {
-  StyleSheet,
-  ViewStyle,
-  View,
-  Pressable,
-  Image,
-  TextStyle,
-  StyleProp,
-  ImageStyle,
-} from 'react-native'
-
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-import { LeftRightStyle, IMessage, ReplyMessage } from './Models'
-import { getStyleWithPosition } from './styles'
-
-export interface MessageReplyProps<TMessage extends IMessage> {
-  position?: 'left' | 'right'
-  currentMessage: TMessage
-  containerStyle?: LeftRightStyle<ViewStyle>
-  contentContainerStyle?: LeftRightStyle<ViewStyle>
-  imageStyle?: StyleProp<ImageStyle>
-  usernameStyle?: StyleProp<TextStyle>
-  textStyle?: StyleProp<TextStyle>
-  onPress?: (replyMessage: ReplyMessage) => void
-}
-
-export function MessageReply<TMessage extends IMessage = IMessage> ({
-  currentMessage,
-  position = 'left',
-  containerStyle,
-  contentContainerStyle,
-  imageStyle,
-  usernameStyle,
-  textStyle,
-  onPress: onPressProp,
-}: MessageReplyProps<TMessage>) {
-  const handlePress = useCallback(() => {
-    if (!onPressProp || !currentMessage.replyMessage)
-      return
-
-    onPressProp(currentMessage.replyMessage)
-  }, [onPressProp, currentMessage.replyMessage])
-
-  const containerStyleMemo = useMemo(() => [
-    styles.container,
-    getStyleWithPosition(styles, 'container', position),
-    containerStyle?.[position],
-  ], [position, containerStyle])
-
-  const contentContainerStyleMemo = useMemo(() => [
-    styles.contentContainer,
-    contentContainerStyle?.[position],
-  ], [position, contentContainerStyle])
-
-  const imageStyleMemo = useMemo(() => [
-    styles.image,
-    imageStyle,
-  ], [imageStyle])
-
-  const usernameStyleMemo = useMemo(() => [
-    styles.username,
-    getStyleWithPosition(styles, 'username', position),
-    usernameStyle,
-  ], [position, usernameStyle])
-
-  const textStyleMemo = useMemo(() => [
-    styles.text,
-    getStyleWithPosition(styles, 'text', position),
-    textStyle,
-  ], [position, textStyle])
-
-  if (!currentMessage.replyMessage)
-    return null
-
-  const { replyMessage } = currentMessage
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={containerStyleMemo}
-    >
-      <View style={contentContainerStyleMemo}>
-        {replyMessage.image && (
-          <Image
-            source={{ uri: replyMessage.image }}
-            style={imageStyleMemo}
-          />
-        )}
-        <View style={styles.textContainer}>
-          <Text
-            style={usernameStyleMemo}
-            numberOfLines={1}
-          >
-            {replyMessage.user?.name || 'User'}
-          </Text>
-          <Text
-            numberOfLines={1}
-            style={textStyleMemo}
-          >
-            {replyMessage.text || (replyMessage.image ? 'Photo' : (replyMessage.audio ? 'Audio' : 'Message'))}
-          </Text>
-        </View>
-      </View>
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: 10,
-    marginTop: 5,
-    marginBottom: 2,
-    padding: 8,
-    borderRadius: 8,
-    borderLeftWidth: 3,
-    borderLeftColor: Color.defaultBlue,
-    minWidth: 150,
-  },
-  container_left: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-  },
-  container_right: {
-    backgroundColor: 'rgba(255, 255, 255, 0.15)',
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  image: {
-    width: 36,
-    height: 36,
-    borderRadius: 4,
-    marginRight: 8,
-  },
-  textContainer: {
-    flex: 1,
-  },
-  username: {
-    fontSize: 13,
-    fontWeight: '600',
-    marginBottom: 2,
-  },
-  username_left: {
-    color: Color.defaultBlue,
-  },
-  username_right: {
-    color: Color.white,
-  },
-  text: {
-    fontSize: 13,
-  },
-  text_left: {
-    color: Color.black,
-  },
-  text_right: {
-    color: 'rgba(255, 255, 255, 0.8)',
-  },
-})

package/src/MessageText.tsx

@@ -1,111 +0,0 @@
-import React, { useMemo, useCallback } from 'react'
-import {
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  View,
-} from 'react-native'
-
-import { Text } from 'react-native-gesture-handler'
-import { LinkParser, LinkMatcher, LinkType } from './linkParser'
-import { LeftRightStyle, IMessage } from './Models'
-
-export type MessageTextProps<TMessage extends IMessage> = {
-  position?: 'left' | 'right'
-  currentMessage: TMessage
-  containerStyle?: LeftRightStyle<ViewStyle>
-  textStyle?: LeftRightStyle<TextStyle>
-  linkStyle?: LeftRightStyle<TextStyle>
-  customTextStyle?: StyleProp<TextStyle>
-  onPress?: (
-    message: TMessage,
-    url: string,
-    type: LinkType
-  ) => void
-  // Link parser options
-  matchers?: LinkMatcher[]
-  email?: boolean
-  phone?: boolean
-  url?: boolean
-  hashtag?: boolean
-  mention?: boolean
-  hashtagUrl?: string
-  mentionUrl?: string
-  stripPrefix?: boolean
-}
-
-export function MessageText<TMessage extends IMessage>({
-  currentMessage,
-  position = 'left',
-  containerStyle,
-  textStyle,
-  linkStyle: linkStyleProp,
-  customTextStyle,
-  onPress: onPressProp,
-  matchers,
-  email = true,
-  phone = true,
-  url = true,
-  hashtag = false,
-  mention = false,
-  hashtagUrl,
-  mentionUrl,
-  stripPrefix = false,
-}: MessageTextProps<TMessage>) {
-  const linkStyle = useMemo(() => StyleSheet.flatten([
-    styles.link,
-    linkStyleProp?.[position],
-  ]), [position, linkStyleProp])
-
-  const style = useMemo(() => [
-    styles[`text_${position}`],
-    textStyle?.[position],
-    customTextStyle,
-  ], [position, textStyle, customTextStyle])
-
-  const handlePress = useCallback((url: string, type: LinkType) => {
-    onPressProp?.(currentMessage, url, type)
-  }, [onPressProp, currentMessage])
-
-  return (
-    <View style={[styles.container, containerStyle?.[position]]}>
-      <LinkParser
-        text={currentMessage!.text}
-        matchers={matchers}
-        email={email}
-        phone={phone}
-        url={url}
-        hashtag={hashtag}
-        mention={mention}
-        hashtagUrl={hashtagUrl}
-        mentionUrl={mentionUrl}
-        stripPrefix={stripPrefix}
-        linkStyle={linkStyle}
-        textStyle={style}
-        onPress={onPressProp ? handlePress : undefined}
-        TextComponent={Text}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 5,
-    marginHorizontal: 10,
-  },
-  text: {
-    fontSize: 16,
-    lineHeight: 20,
-  },
-  text_left: {
-    color: 'black',
-  },
-  text_right: {
-    color: 'white',
-  },
-  link: {
-    textDecorationLine: 'underline',
-  },
-})

package/src/MessageVideo.tsx

@@ -1,29 +0,0 @@
-import React, { useMemo } from 'react'
-import { View, StyleSheet } from 'react-native'
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-  },
-  text: {
-    color: Color.alizarin,
-    fontWeight: '600',
-  },
-})
-
-export function MessageVideo () {
-  const content = useMemo(() => (
-    <View style={styles.container}>
-      <Text style={styles.text}>
-        {'Video is not implemented by GiftedChat.'}
-      </Text>
-      <Text style={styles.text}>
-        {'\nYou need to provide your own implementation by using renderMessageVideo prop.'}
-      </Text>
-    </View>
-  ), [])
-
-  return content
-}

package/src/MessagesContainer/components/DayAnimated/index.tsx

@@ -1,151 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { LayoutChangeEvent } from 'react-native'
-import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, useAnimatedReaction, withTiming, runOnJS } from 'react-native-reanimated'
-import { Day } from '../../../Day'
-import stylesCommon from '../../../styles'
-import { isSameDay } from '../../../utils'
-import { useAbsoluteScrolledPositionToBottomOfDay, useRelativeScrolledPositionToBottomOfDay } from '../Item'
-
-import styles from './styles'
-import { DayAnimatedProps } from './types'
-
-export * from './types'
-
-export const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoading, ...rest }: DayAnimatedProps) => {
-  const opacity = useSharedValue(0)
-  const fadeOutOpacityTimeoutId = useSharedValue<ReturnType<typeof setTimeout> | undefined>(undefined)
-  const containerHeight = useSharedValue(0)
-
-  const isScrolledOnMount = useSharedValue(false)
-  const isLoadingAnim = useSharedValue(isLoading)
-
-  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => {
-    'worklet'
-
-    return a.y - b.y
-  }))
-
-  const [createdAt, setCreatedAt] = useState<number | undefined>()
-
-  const dayTopOffset = useMemo(() => 10, [])
-  const dayBottomMargin = useMemo(() => 10, [])
-  const absoluteScrolledPositionToBottomOfDay = useAbsoluteScrolledPositionToBottomOfDay(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
-  const relativeScrolledPositionToBottomOfDay = useRelativeScrolledPositionToBottomOfDay(listHeight, scrolledY, daysPositions, containerHeight, dayBottomMargin, dayTopOffset)
-
-  const messagesDates = useMemo(() => {
-    const messagesDates: number[] = []
-
-    for (let i = 1; i < messages.length; i++) {
-      const previousMessage = messages[i - 1]
-      const message = messages[i]
-
-      if (!isSameDay(previousMessage, message) || !messagesDates.includes(new Date(message.createdAt).getTime()))
-        messagesDates.push(new Date(message.createdAt).getTime())
-    }
-
-    return messagesDates
-  }, [messages])
-
-  const createdAtDate = useDerivedValue(() => {
-    for (let i = 0; i < daysPositionsArray.value.length; i++) {
-      const day = daysPositionsArray.value[i]
-      const dayPosition = day.y + day.height - containerHeight.value - dayBottomMargin
-
-      if (absoluteScrolledPositionToBottomOfDay.value < dayPosition)
-        return day.createdAt
-    }
-
-    return messagesDates[messagesDates.length - 1]
-  }, [daysPositionsArray, absoluteScrolledPositionToBottomOfDay, messagesDates, containerHeight, dayBottomMargin])
-
-  const style = useAnimatedStyle(() => ({
-    top: interpolate(
-      relativeScrolledPositionToBottomOfDay.value,
-      [-dayTopOffset, -0.0001, 0, isLoadingAnim.value ? 0 : containerHeight.value + dayTopOffset],
-      [dayTopOffset, dayTopOffset, -containerHeight.value, isLoadingAnim.value ? -containerHeight.value : dayTopOffset],
-      'clamp'
-    ),
-  }), [relativeScrolledPositionToBottomOfDay, containerHeight, dayTopOffset, isLoadingAnim])
-
-  const contentStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-  }), [opacity])
-
-  const fadeOut = useCallback(() => {
-    'worklet'
-
-    opacity.value = withTiming(0, { duration: 500 })
-  }, [opacity])
-
-  const scheduleFadeOut = useCallback(() => {
-    clearTimeout(fadeOutOpacityTimeoutId.value)
-
-    fadeOutOpacityTimeoutId.value = setTimeout(fadeOut, 500)
-  }, [fadeOut, fadeOutOpacityTimeoutId])
-
-  const handleLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
-    containerHeight.value = nativeEvent.layout.height
-  }, [containerHeight])
-
-  useAnimatedReaction(
-    () => [scrolledY.value, daysPositionsArray],
-    (value, prevValue) => {
-      if (!isScrolledOnMount.value) {
-        isScrolledOnMount.value = true
-        return
-      }
-
-      if (value[0] === prevValue?.[0])
-        return
-
-      opacity.value = withTiming(1, { duration: 500 })
-
-      runOnJS(scheduleFadeOut)()
-    },
-    [scrolledY, scheduleFadeOut, daysPositionsArray]
-  )
-
-  useAnimatedReaction(
-    () => createdAtDate.value,
-    (value, prevValue) => {
-      if (value && value !== prevValue)
-        runOnJS(setCreatedAt)(value)
-    },
-    [createdAtDate]
-  )
-
-  useEffect(() => {
-    isLoadingAnim.value = isLoading
-  }, [isLoadingAnim, isLoading])
-
-  const dayContent = useMemo(() => {
-    if (!createdAt)
-      return null
-
-    return renderDay
-      ? renderDay({ ...rest, createdAt })
-      : <Day
-        {...rest}
-        containerStyle={[styles.dayAnimatedDayContainerStyle, rest.containerStyle]}
-        createdAt={createdAt}
-      />
-  }, [createdAt, renderDay, rest])
-
-  if (!createdAt)
-    return null
-
-  return (
-    <Animated.View
-      style={[stylesCommon.centerItems, styles.dayAnimated, style]}
-      onLayout={handleLayout}
-      pointerEvents='none'
-    >
-      <Animated.View
-        style={contentStyle}
-        pointerEvents='none'
-      >
-        {dayContent}
-      </Animated.View>
-    </Animated.View>
-  )
-}

package/src/MessagesContainer/components/DayAnimated/styles.ts

@@ -1,12 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export default StyleSheet.create({
-  dayAnimated: {
-    position: 'absolute',
-    width: '100%',
-  },
-  dayAnimatedDayContainerStyle: {
-    marginTop: 0,
-    marginBottom: 0,
-  },
-})

package/src/MessagesContainer/components/DayAnimated/types.ts

@@ -1,12 +0,0 @@
-import { DayProps } from '../../../Day'
-import { IMessage } from '../../../Models'
-import { DaysPositions } from '../../types'
-
-export interface DayAnimatedProps extends Omit<DayProps, 'createdAt'> {
-  scrolledY: { value: number }
-  daysPositions: { value: DaysPositions }
-  listHeight: { value: number }
-  renderDay?: (props: DayProps) => React.ReactNode
-  messages: IMessage[]
-  isLoading: boolean
-}

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

@@ -1,197 +0,0 @@
-import React, { useCallback, useMemo } from 'react'
-import { LayoutChangeEvent, View } from 'react-native'
-import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated'
-import { Day } from '../../../Day'
-import { Message, MessageProps } from '../../../Message'
-import { IMessage } from '../../../Models'
-import { isSameDay } from '../../../utils'
-import { DaysPositions } from '../../types'
-import { ItemProps } from './types'
-
-export * from './types'
-
-// y-position of current scroll position relative to the bottom of the day container. (since we have inverted list it is bottom)
-export const useAbsoluteScrolledPositionToBottomOfDay = (listHeight: { value: number }, scrolledY: { value: number }, containerHeight: { value: number }, dayBottomMargin: number, dayTopOffset: number) => {
-  const absoluteScrolledPositionToBottomOfDay = useDerivedValue(() =>
-    listHeight.value + scrolledY.value - containerHeight.value - dayBottomMargin - dayTopOffset
-  , [listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset])
-
-  return absoluteScrolledPositionToBottomOfDay
-}
-
-export const useRelativeScrolledPositionToBottomOfDay = (
-  listHeight: { value: number },
-  scrolledY: { value: number },
-  daysPositions: { value: DaysPositions },
-  containerHeight: { value: number },
-  dayBottomMargin: number,
-  dayTopOffset: number,
-  createdAt?: number
-) => {
-  const dayMarginTop = useMemo(() => 5, [])
-
-  const absoluteScrolledPositionToBottomOfDay = useAbsoluteScrolledPositionToBottomOfDay(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
-
-  // find current day position by scrolled position
-  const currentDayPosition = useDerivedValue(() => {
-    'worklet'
-
-    // When createdAt is provided (called from AnimatedDayWrapper for a specific message),
-    // directly find the day position by createdAt without sorting the entire array.
-    // This avoids O(n log n) sorting and O(n) search for each message item.
-    if (createdAt != null) {
-      const values = Object.values(daysPositions.value)
-      for (let i = 0; i < values.length; i++)
-        if (values[i].createdAt === createdAt)
-          return values[i]
-    }
-
-    // Fallback: sort and search when createdAt is not provided (e.g., from DayAnimated)
-    const sortedArray = Object.values(daysPositions.value).sort((a, b) => {
-      'worklet'
-
-      return a.y - b.y
-    })
-    for (let i = 0; i < sortedArray.length; i++) {
-      const day = sortedArray[i]
-      const dayPosition = day.y + day.height
-      if (absoluteScrolledPositionToBottomOfDay.value < dayPosition || i === sortedArray.length - 1)
-        return day
-    }
-
-    return undefined
-  }, [daysPositions, absoluteScrolledPositionToBottomOfDay, createdAt])
-
-  const relativeScrolledPositionToBottomOfDay = useDerivedValue(() => {
-    const scrolledBottomY = listHeight.value + scrolledY.value - (
-      (currentDayPosition.value?.y ?? 0) +
-      (currentDayPosition.value?.height ?? 0) +
-      dayMarginTop
-    )
-
-    return scrolledBottomY
-  }, [listHeight, scrolledY, currentDayPosition, dayMarginTop])
-
-  return relativeScrolledPositionToBottomOfDay
-}
-
-const DayWrapper = <TMessage extends IMessage>(props: MessageProps<TMessage>) => {
-  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>
-      {
-        renderDayProp
-          ? renderDayProp({ ...rest, createdAt: currentMessage.createdAt })
-          : <Day {...rest} createdAt={currentMessage.createdAt} />
-      }
-    </View>
-  )
-}
-
-const AnimatedDayWrapper = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
-  const {
-    scrolledY,
-    daysPositions,
-    listHeight,
-    ...rest
-  } = props
-
-  const dayContainerHeight = useSharedValue(0)
-  const dayTopOffset = useMemo(() => 10, [])
-  const dayBottomMargin = useMemo(() => 10, [])
-
-  const createdAt = useMemo(() =>
-    new Date(props.currentMessage.createdAt).getTime()
-  , [props.currentMessage.createdAt])
-
-  const relativeScrolledPositionToBottomOfDay = useRelativeScrolledPositionToBottomOfDay(listHeight, scrolledY, daysPositions, dayContainerHeight, dayBottomMargin, dayTopOffset, createdAt)
-
-  const handleLayoutDayContainer = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
-    dayContainerHeight.value = nativeEvent.layout.height
-  }, [dayContainerHeight])
-
-  const style = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      relativeScrolledPositionToBottomOfDay.value,
-      [
-        -dayTopOffset,
-        -0.0001,
-        0,
-        dayContainerHeight.value + dayTopOffset,
-      ],
-      [
-        0,
-        0,
-        1,
-        1,
-      ],
-      'clamp'
-    ),
-  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset])
-
-  return (
-    <Animated.View
-      style={style}
-      onLayout={handleLayoutDayContainer}
-    >
-      <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />
-    </Animated.View>
-  )
-}
-
-export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
-  const {
-    renderMessage: renderMessageProp,
-    isDayAnimationEnabled,
-    reply,
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    scrolledY: _scrolledY,
-    daysPositions: _daysPositions,
-    listHeight: _listHeight,
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-    ...rest
-  } = props
-
-  // Transform reply props for Message and Bubble
-  const messageProps = useMemo(() => ({
-    ...rest,
-    // Swipe to reply for Message component
-    swipeToReply: reply?.swipe,
-    // Message reply styling for Bubble component
-    messageReply: reply ? {
-      renderMessageReply: reply.renderMessageReply,
-      onPress: reply.onPress,
-      ...reply.messageStyle,
-    } : undefined,
-  }), [rest, reply])
-
-  return (
-    // do not remove key. it helps to get correct position of the day container
-    <View key={props.currentMessage._id.toString()}>
-      {isDayAnimationEnabled
-        ? <AnimatedDayWrapper<TMessage> {...props} />
-        : <DayWrapper<TMessage> {...messageProps as MessageProps<TMessage>} />}
-      {
-        renderMessageProp
-          ? renderMessageProp(messageProps as MessageProps<TMessage>)
-          : <Message<TMessage> {...messageProps as MessageProps<TMessage>} />
-      }
-    </View>
-  )
-}

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

@@ -1,13 +0,0 @@
-import { IMessage } from '../../../Models'
-import { MessagesContainerProps, DaysPositions } from '../../types'
-
-export interface ItemProps<TMessage extends IMessage> extends MessagesContainerProps<TMessage> {
-  currentMessage: TMessage
-  previousMessage?: TMessage
-  nextMessage?: TMessage
-  position: 'left' | 'right'
-  scrolledY: { value: number }
-  daysPositions: { value: DaysPositions }
-  listHeight: { value: number }
-  isDayAnimationEnabled?: boolean
-}