react-native-gifted-chat 2.8.0 → 2.8.2-alpha.0

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

@@ -134,6 +134,7 @@ const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset])
 
   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}

package/src/MessageContainer/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
-  TouchableOpacity,
+  Pressable,
   Text,
   Platform,
   LayoutChangeEvent,
@@ -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 {
@@ -53,9 +54,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,
@@ -74,9 +78,9 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
 
   const ListFooterComponent = useMemo(() => {
     if (renderFooterProp)
-      return <>{renderFooterProp(props)}</>
+      return renderFooterProp(props)
 
-    return <>{renderTypingIndicator()}</>
+    return renderTypingIndicator()
   }, [renderFooterProp, renderTypingIndicator, props])
 
   const renderLoadEarlier = useCallback(() => {
@@ -90,17 +94,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 +131,25 @@ 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 renderItem = useCallback(({ item, index }: ListRenderItemInfo<unknown>): React.ReactElement | null => {
     const messageItem = item as TMessage
@@ -215,42 +227,46 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return <Text>{'V'}</Text>
   }, [scrollToBottomComponentProp])
 
-  const renderScrollToBottomWrapper = useCallback(() => {
+  const ScrollToBottomWrapper = useCallback(() => {
+    if (!isScrollToBottomEnabled)
+      return null
+
     if (!isScrollToBottomVisible)
       return null
 
     return (
-      <Animated.View
-        style={[
-          stylesCommon.centerItems,
-          styles.scrollToBottomStyle,
-          scrollToBottomStyle,
-          scrollToBottomStyleAnim,
-        ]}
+      <Pressable
+        style={styles.scrollToBottom}
+        onPress={() => doScrollToBottom()}
       >
-        <TouchableOpacity
-          onPress={() => doScrollToBottom()}
-          hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}
+        <Animated.View
+          style={[
+            stylesCommon.centerItems,
+            styles.scrollToBottomContent,
+            scrollToBottomStyle,
+            scrollToBottomStyleAnim,
+          ]}
         >
           {renderScrollBottomComponent()}
-        </TouchableOpacity>
-      </Animated.View>
+        </Animated.View>
+      </Pressable>
     )
-  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomVisible])
+  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomEnabled, isScrollToBottomVisible])
 
   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])
+  }, [inverted, messages, doScrollToBottom, listHeight, listViewProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -266,35 +282,55 @@ 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) => {
-      const prevMessage = messages[props.index + (inverted ? 1 : -1)]
-      if (prevMessage && isSameDay(props.item as IMessage, prevMessage))
-        return
+      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 => {
         '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
+        value[id] = newValue
         return value
       })
     }
 
     return (
-      <Animated.View
+      <View
         {...props}
         onLayout={handleOnLayout}
-      />
+      >
+        {children}
+      </View>
     )
-  }, [daysPositions, messages, inverted])
+  }, [daysPositions, inverted])
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
@@ -307,7 +343,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
   // removes unrendered days positions when messages are added/removed
   useEffect(() => {
     Object.keys(daysPositions.value).forEach(key => {
-      const messageIndex = messages.findIndex(m => m._id === key)
+      const messageIndex = messages.findIndex(m => m._id.toString() === key)
       let shouldRemove = messageIndex === -1
 
       if (!shouldRemove) {
@@ -334,14 +370,14 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       ]}
     >
       <AnimatedFlatList
-        ref={forwardRef as React.Ref<FlatList<unknown>>}
-        extraData={[extraData, isTyping]}
+        extraData={extraData}
+        ref={forwardRef}
         keyExtractor={keyExtractor}
-        automaticallyAdjustContentInsets={false}
-        inverted={inverted}
         data={messages}
-        style={stylesCommon.fill}
         renderItem={renderItem}
+        inverted={inverted}
+        automaticallyAdjustContentInsets={false}
+        style={stylesCommon.fill}
         {...invertibleScrollViewProps}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
@@ -358,13 +394,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         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,23 +1,19 @@
-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 { User, IMessage, Reply, DayProps } 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 ListViewProps<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> {
   forwardRef?: RefObject<AnimatedList<TMessage>>
@@ -36,6 +32,7 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
   renderChatEmpty?(): React.ReactNode
   renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
   renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  renderDay?(props: DayProps): React.ReactNode
   renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
   renderTypingIndicator?(): React.ReactNode
   scrollToBottomComponent?(): React.ReactNode

package/src/MessageText.tsx

@@ -1,84 +1,46 @@
-import React from 'react'
+import React, { useMemo, useCallback } from 'react'
 import {
   Linking,
   StyleSheet,
-  View,
-  TextProps,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
 
-import ParsedText from 'react-native-parsed-text'
+import Autolink, { AutolinkProps } from 'react-native-autolink'
+import { Match } from 'autolinker/dist/es2015'
 import { LeftRightStyle, IMessage } from './types'
-import { useChatContext } from './GiftedChatContext'
 import { error } from './logging'
 
-const WWW_URL_PATTERN = /^www\./i
-
-const { textStyle } = StyleSheet.create({
-  textStyle: {
-    fontSize: 16,
-    lineHeight: 20,
-    marginTop: 5,
-    marginBottom: 5,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-})
-
-const styles = {
-  left: StyleSheet.create({
-    container: {},
-    text: {
-      color: 'black',
-      ...textStyle,
-    },
-    link: {
-      color: 'black',
-      textDecorationLine: 'underline',
-    },
-  }),
-  right: StyleSheet.create({
-    container: {},
-    text: {
-      color: 'white',
-      ...textStyle,
-    },
-    link: {
-      color: 'white',
-      textDecorationLine: 'underline',
-    },
-  }),
+export interface MessageOption {
+  title: string
+  action: (phone: string) => void
 }
 
-const DEFAULT_OPTION_TITLES = ['Call', 'Text', 'Cancel']
-
-export interface MessageTextProps<TMessage extends IMessage> {
+export type MessageTextProps<TMessage extends IMessage> = {
   position?: 'left' | 'right'
-  optionTitles?: string[]
   currentMessage: TMessage
   containerStyle?: LeftRightStyle<ViewStyle>
   textStyle?: LeftRightStyle<TextStyle>
   linkStyle?: LeftRightStyle<TextStyle>
-  textProps?: TextProps
   customTextStyle?: StyleProp<TextStyle>
-  parsePatterns?: (linkStyle: TextStyle) => []
-}
+  onPress?: (
+    message: TMessage,
+    url: string,
+    match: Match
+  ) => void
+} & Omit<AutolinkProps, 'text' | 'onPress'>
 
-export function MessageText<TMessage extends IMessage = IMessage> ({
-  currentMessage = {} as TMessage,
-  optionTitles = DEFAULT_OPTION_TITLES,
+export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
+  currentMessage = {} as IMessage,
   position = 'left',
   containerStyle,
   textStyle,
   linkStyle: linkStyleProp,
   customTextStyle,
-  parsePatterns,
-  textProps,
-}: MessageTextProps<TMessage>) {
-  const { actionSheet } = useChatContext()
-
+  onPress: onPressProp,
+  ...rest
+}) => {
   // TODO: React.memo
   // const shouldComponentUpdate = (nextProps: MessageTextProps<TMessage>) => {
   //   return (
@@ -88,77 +50,80 @@ export function MessageText<TMessage extends IMessage = IMessage> ({
   //   )
   // }
 
-  const onUrlPress = (url: string) => {
-    // When someone sends a message that includes a website address beginning with "www." (omitting the scheme),
-    // react-native-parsed-text recognizes it as a valid url, but Linking fails to open due to the missing scheme.
-    if (WWW_URL_PATTERN.test(url))
-      onUrlPress(`https://${url}`)
-    else
-      Linking.openURL(url).catch(e => {
-        error(e, 'No handler for URL:', url)
-      })
-  }
+  const onUrlPress = useCallback((url: string) => {
+    if (/^www\./i.test(url))
+      url = `https://${url}`
+
+    Linking.openURL(url).catch(e => {
+      error(e, 'No handler for URL:', url)
+    })
+  }, [])
 
-  const onPhonePress = (phone: string) => {
-    const options =
-      optionTitles && optionTitles.length > 0
-        ? optionTitles.slice(0, 3)
-        : DEFAULT_OPTION_TITLES
-    const cancelButtonIndex = options.length - 1
-    actionSheet().showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-      },
-      (buttonIndex?: number) => {
-        switch (buttonIndex) {
-          case 0:
-            Linking.openURL(`tel:${phone}`).catch(e => {
-              error(e, 'No handler for telephone')
-            })
-            break
-          case 1:
-            Linking.openURL(`sms:${phone}`).catch(e => {
-              error(e, 'No handler for text')
-            })
-            break
-        }
-      }
-    )
-  }
+  const onPhonePress = useCallback((phone: string) => {
+    Linking.openURL(`tel:${phone}`).catch(e => {
+      error(e, 'No handler for telephone')
+    })
+  }, [])
 
-  const onEmailPress = (email: string) =>
+  const onEmailPress = useCallback((email: string) =>
     Linking.openURL(`mailto:${email}`).catch(e =>
       error(e, 'No handler for mailto')
-    )
+    ), [])
 
-  const linkStyle = [
-    styles[position].link,
+  const linkStyle = useMemo(() => StyleSheet.flatten([
+    styles.link,
     linkStyleProp?.[position],
-  ]
+  ]), [position, linkStyleProp])
+
+  const handlePress = useCallback((url: string, match: Match) => {
+    const type = match.getType()
+
+    if (onPressProp)
+      onPressProp(currentMessage, url, match)
+    else if (type === 'url')
+      onUrlPress(url)
+    else if (type === 'phone')
+      onPhonePress(url)
+    else if (type === 'email')
+      onEmailPress(url)
+  }, [onUrlPress, onPhonePress, onEmailPress, onPressProp, currentMessage])
+
+  const style = useMemo(() => [
+    containerStyle?.[position],
+    styles[`text_${position}`],
+    textStyle?.[position],
+    customTextStyle,
+  ], [containerStyle, position, textStyle, customTextStyle])
+
   return (
-    <View
-      style={[
-        styles[position].container,
-        containerStyle && containerStyle[position],
-      ]}
-    >
-      <ParsedText
-        style={[
-          styles[position].text,
-          textStyle && textStyle[position],
-          customTextStyle,
-        ]}
-        parse={[
-          ...(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 },
-        ]}
-        childrenProps={{ ...textProps }}
-      >
-        {currentMessage!.text}
-      </ParsedText>
-    </View>
+    <Autolink
+      style={style}
+      {...rest}
+      text={currentMessage!.text}
+      email
+      link
+      linkStyle={linkStyle}
+      onPress={handlePress}
+    />
   )
 }
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 20,
+    marginTop: 5,
+    marginBottom: 5,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  text_left: {
+    color: 'black',
+  },
+  text_right: {
+    color: 'white',
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+})

package/src/SystemMessage.tsx

@@ -29,6 +29,7 @@ export interface SystemMessageProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   wrapperStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
+  children?: React.ReactNode
 }
 
 export function SystemMessage<TMessage extends IMessage = IMessage> ({
@@ -36,6 +37,7 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   containerStyle,
   wrapperStyle,
   textStyle,
+  children,
 }: SystemMessageProps<TMessage>) {
   if (currentMessage == null || currentMessage.system === false)
     return null
@@ -43,7 +45,8 @@ export function SystemMessage<TMessage extends IMessage = IMessage> ({
   return (
     <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={wrapperStyle}>
-        <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
+        {!!currentMessage.text && <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>}
+        {children}
       </View>
     </View>
   )