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

package/src/InputToolbar.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react'
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
+import { StyleSheet, View, StyleProp, ViewStyle, useColorScheme } from 'react-native'
 
-import { Composer, ComposerProps } from './Composer'
-import { Send, SendProps } from './Send'
 import { Actions, ActionsProps } from './Actions'
 import Color from './Color'
+import { Composer, ComposerProps } from './Composer'
+import { Send, SendProps } from './Send'
 import { IMessage } from './types'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
@@ -38,6 +38,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     containerStyle,
   } = props
 
+  const colorScheme = useColorScheme()
+
   const actionsFragment = useMemo(() => {
     const props = {
       onPressActionButton,
@@ -69,18 +71,29 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     )
   }, [renderComposer, props])
 
+  const sendFragment = useMemo(() => {
+    return renderSend?.(props) || <Send {...props} />
+  }, [renderSend, props])
+
+  const accessoryFragment = useMemo(() => {
+    if (!renderAccessory)
+      return null
+
+    return (
+      <View style={[styles.accessory, props.accessoryStyle]}>
+        {renderAccessory(props)}
+      </View>
+    )
+  }, [renderAccessory, props])
+
   return (
-    <View style={[styles.container, containerStyle]}>
+    <View style={[styles.container, styles[`container_${colorScheme}`], containerStyle]}>
       <View style={[styles.primary, props.primaryStyle]}>
         {actionsFragment}
         {composerFragment}
-        {renderSend?.(props) || <Send {...props} />}
+        {sendFragment}
       </View>
-      {renderAccessory && (
-        <View style={[styles.accessory, props.accessoryStyle]}>
-          {renderAccessory(props)}
-        </View>
-      )}
+      {accessoryFragment}
     </View>
   )
 }
@@ -91,6 +104,10 @@ const styles = StyleSheet.create({
     borderTopColor: Color.defaultColor,
     backgroundColor: Color.white,
   },
+  container_dark: {
+    backgroundColor: '#1a1a1a',
+    borderTopColor: '#444',
+  },
   primary: {
     flexDirection: 'row',
     alignItems: 'flex-end',

package/src/LoadEarlier.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   ActivityIndicator,
   Platform,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
 import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
 
 const styles = StyleSheet.create({
@@ -52,7 +52,7 @@ export interface LoadEarlierProps {
   onLoadEarlier?(): void
 }
 
-export function LoadEarlier ({
+export const LoadEarlier: React.FC<LoadEarlierProps> = ({
   isLoadingEarlier = false,
   onLoadEarlier = () => {},
   label = 'Load earlier messages',
@@ -62,7 +62,24 @@ export function LoadEarlier ({
   activityIndicatorColor = 'white',
   activityIndicatorSize = 'small',
   activityIndicatorStyle,
-}: LoadEarlierProps): React.ReactElement {
+}) => {
+  const loadingContent = useMemo(() => (
+    <View>
+      <Text style={[styles.text, textStyle, { opacity: 0 }]}>
+        {label}
+      </Text>
+      <ActivityIndicator
+        color={activityIndicatorColor!}
+        size={activityIndicatorSize!}
+        style={[styles.activityIndicator, activityIndicatorStyle]}
+      />
+    </View>
+  ), [label, textStyle, activityIndicatorColor, activityIndicatorSize, activityIndicatorStyle])
+
+  const labelContent = useMemo(() => (
+    <Text style={[styles.text, textStyle]}>{label}</Text>
+  ), [label, textStyle])
+
   return (
     <TouchableOpacity
       style={[styles.container, containerStyle]}
@@ -71,22 +88,7 @@ export function LoadEarlier ({
       accessibilityRole='button'
     >
       <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
-        {isLoadingEarlier
-          ? (
-            <View>
-              <Text style={[styles.text, textStyle, { opacity: 0 }]}>
-                {label}
-              </Text>
-              <ActivityIndicator
-                color={activityIndicatorColor!}
-                size={activityIndicatorSize!}
-                style={[styles.activityIndicator, activityIndicatorStyle]}
-              />
-            </View>
-          )
-          : (
-            <Text style={[styles.text, textStyle]}>{label}</Text>
-          )}
+        {isLoadingEarlier ? loadingContent : labelContent}
       </View>
     </TouchableOpacity>
   )

package/src/Message/index.tsx

@@ -1,19 +1,18 @@
 import React, { memo, useCallback } from 'react'
 import { View } from 'react-native'
-import isEqual from 'lodash.isequal'
 
 import { Avatar } from '../Avatar'
 import Bubble from '../Bubble'
 import { SystemMessage } from '../SystemMessage'
 
-import { isSameUser } from '../utils'
 import { IMessage } from '../types'
-import { MessageProps } from './types'
+import { isSameUser } from '../utils'
 import styles from './styles'
+import { MessageProps } from './types'
 
 export * from './types'
 
-let Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>) => {
+const Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>) => {
   const {
     currentMessage,
     renderBubble: renderBubbleProp,
@@ -113,17 +112,4 @@ let Message: React.FC<MessageProps<IMessage>> = (props: MessageProps<IMessage>)
   )
 }
 
-Message = memo(Message, (props, nextProps) => {
-  const shouldUpdate =
-    props.shouldUpdateMessage?.(props, nextProps) ||
-    !isEqual(props.currentMessage!, nextProps.currentMessage!) ||
-    !isEqual(props.previousMessage, nextProps.previousMessage) ||
-    !isEqual(props.nextMessage, nextProps.nextMessage)
-
-  if (shouldUpdate)
-    return false
-
-  return true
-})
-
-export default Message
+export default memo(Message)

package/src/Message/types.ts

@@ -1,9 +1,9 @@
 import { ViewStyle, LayoutChangeEvent } from 'react-native'
 import { AvatarProps } from '../Avatar'
-import { SystemMessageProps } from '../SystemMessage'
+import { BubbleProps } from '../Bubble'
 import { DayProps } from '../Day'
+import { SystemMessageProps } from '../SystemMessage'
 import { IMessage, User, LeftRightStyle } from '../types'
-import { BubbleProps } from '../Bubble'
 
 export interface MessageProps<TMessage extends IMessage> {
   showUserAvatar?: boolean

package/src/MessageAudio.tsx

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

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

@@ -2,12 +2,12 @@ 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 { DayAnimatedProps } from './types'
 
-import stylesCommon from '../../../styles'
 import styles from './styles'
+import { DayAnimatedProps } from './types'
 
 export * from './types'
 
@@ -114,6 +114,19 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
     isLoadingEarlierAnim.value = isLoadingEarlier
   }, [isLoadingEarlierAnim, isLoadingEarlier])
 
+  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
 
@@ -126,15 +139,7 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
         style={contentStyle}
         pointerEvents='none'
       >
-        {
-          renderDay
-            ? renderDay({ ...rest, createdAt })
-            : <Day
-              {...rest}
-              containerStyle={[styles.dayAnimatedDayContainerStyle, rest.containerStyle]}
-              createdAt={createdAt}
-            />
-        }
+        {dayContent}
       </Animated.View>
     </Animated.View>
   )

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

@@ -1,11 +1,11 @@
 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 Message, { MessageProps } from '../../../Message'
+import { IMessage } from '../../../types'
 import { isSameDay } from '../../../utils'
+import { DaysPositions } from '../../types'
 import { ItemProps } from './types'
 
 export * from './types'
@@ -33,7 +33,13 @@ export const useRelativeScrolledPositionToBottomOfDay = (
   const absoluteScrolledPositionToBottomOfDay = useAbsoluteScrolledPositionToBottomOfDay(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
 
   // sorted array of days positions by y
-  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
+  const daysPositionsArray = useDerivedValue(() => {
+    return Object.values(daysPositions.value).sort((a, b) => {
+      'worklet'
+
+      return a.y - b.y
+    })
+  })
 
   // find current day position by scrolled position
   const currentDayPosition = useDerivedValue(() => {

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

@@ -1,5 +1,5 @@
-import { MessageContainerProps, DaysPositions } from '../../types'
 import { IMessage } from '../../../types'
+import { MessageContainerProps, DaysPositions } from '../../types'
 
 export interface ItemProps<TMessage extends IMessage> extends MessageContainerProps<TMessage> {
   currentMessage: TMessage

package/src/MessageContainer/index.tsx

@@ -6,28 +6,28 @@ import {
   Platform,
   LayoutChangeEvent,
   ListRenderItemInfo,
-  FlatList,
   CellRendererProps,
 } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
 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'
-import Item from './components/Item'
-
 import { LoadEarlier } from '../LoadEarlier'
+import { warning } from '../logging'
+import { ReanimatedScrollEvent } from '../reanimatedCompat'
+
+import stylesCommon from '../styles'
 import { IMessage } from '../types'
 import TypingIndicator from '../TypingIndicator'
-import { MessageContainerProps, DaysPositions } from './types'
-import { ItemProps } from './components/Item/types'
+import { isSameDay, useCallbackThrottled } from '../utils'
+import DayAnimated from './components/DayAnimated'
 
-import { warning } from '../logging'
-import stylesCommon from '../styles'
+import Item from './components/Item'
+import { ItemProps } from './components/Item/types'
 import styles from './styles'
-import { isSameDay, useCallbackThrottled } from '../utils'
+import { MessageContainerProps, DaysPositions } from './types'
 
 export * from './types'
 
-// 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>) {
@@ -39,9 +39,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     onLoadEarlier,
     inverted = true,
     loadEarlier = false,
-    listViewProps,
-    invertibleScrollViewProps,
-    extraData = null,
+    listProps,
+    extraData,
     isScrollToBottomEnabled = false,
     scrollToBottomOffset = 200,
     alignTop = false,
@@ -73,8 +72,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     if (renderTypingIndicatorProp)
       return renderTypingIndicatorProp()
 
-    return <TypingIndicator isTyping={isTyping} />
-  }, [isTyping, renderTypingIndicatorProp])
+    return <TypingIndicator isTyping={isTyping} style={props.typingIndicatorStyle} />
+  }, [isTyping, renderTypingIndicatorProp, props.typingIndicatorStyle])
 
   const ListFooterComponent = useMemo(() => {
     if (renderFooterProp)
@@ -151,6 +150,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       changeScrollToBottomVisibility(false)
   }, [handleOnScrollProp, inverted, scrollToBottomOffset, changeScrollToBottomVisibility, isScrollingDown, lastScrolledY])
 
+  const restProps = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { messages: _, ...rest } = props
+    return rest
+  }, [props])
+
   const renderItem = useCallback(({ item, index }: ListRenderItemInfo<unknown>): React.ReactElement | null => {
     const messageItem = item as TMessage
 
@@ -167,8 +172,6 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
       messageItem.user = { _id: 0 }
     }
 
-    const { messages, ...restProps } = props
-
     if (messages && user) {
       const previousMessage =
         (inverted ? messages[index + 1] : messages[index - 1]) || {}
@@ -192,22 +195,29 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     }
 
     return null
-  }, [props, inverted, scrolledY, daysPositions, listHeight, user])
+  }, [messages, restProps, inverted, scrolledY, daysPositions, listHeight, user])
+
+  const emptyContent = useMemo(() => {
+    if (!renderChatEmptyProp)
+      return null
+
+    return renderChatEmptyProp()
+  }, [renderChatEmptyProp])
 
   const renderChatEmpty = useCallback(() => {
     if (renderChatEmptyProp)
       return inverted
         ? (
-          renderChatEmptyProp()
+          emptyContent
         )
         : (
           <View style={[stylesCommon.fill, styles.emptyChatContainer]}>
-            {renderChatEmptyProp()}
+            {emptyContent}
           </View>
         )
 
     return <View style={stylesCommon.fill} />
-  }, [inverted, renderChatEmptyProp])
+  }, [inverted, renderChatEmptyProp, emptyContent])
 
   const ListHeaderComponent = useMemo(() => {
     const content = renderLoadEarlier()
@@ -227,6 +237,25 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return <Text>{'V'}</Text>
   }, [scrollToBottomComponentProp])
 
+  const handleScrollToBottomPress = useCallback(() => {
+    doScrollToBottom()
+  }, [doScrollToBottom])
+
+  const scrollToBottomContent = useMemo(() => {
+    return (
+      <Animated.View
+        style={[
+          stylesCommon.centerItems,
+          styles.scrollToBottomContent,
+          scrollToBottomStyle,
+          scrollToBottomStyleAnim,
+        ]}
+      >
+        {renderScrollBottomComponent()}
+      </Animated.View>
+    )
+  }, [scrollToBottomStyle, scrollToBottomStyleAnim, renderScrollBottomComponent])
+
   const ScrollToBottomWrapper = useCallback(() => {
     if (!isScrollToBottomEnabled)
       return null
@@ -237,21 +266,12 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
     return (
       <Pressable
         style={styles.scrollToBottom}
-        onPress={() => doScrollToBottom()}
+        onPress={handleScrollToBottomPress}
       >
-        <Animated.View
-          style={[
-            stylesCommon.centerItems,
-            styles.scrollToBottomContent,
-            scrollToBottomStyle,
-            scrollToBottomStyleAnim,
-          ]}
-        >
-          {renderScrollBottomComponent()}
-        </Animated.View>
+        {scrollToBottomContent}
       </Pressable>
     )
-  }, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomEnabled, isScrollToBottomVisible])
+  }, [isScrollToBottomEnabled, isScrollToBottomVisible, handleScrollToBottomPress, scrollToBottomContent])
 
   const onLayoutList = useCallback((event: LayoutChangeEvent) => {
     listHeight.value = event.nativeEvent.layout.height
@@ -265,8 +285,8 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         doScrollToBottom(false)
       }, 500)
 
-    listViewProps?.onLayout?.(event)
-  }, [inverted, messages, doScrollToBottom, listHeight, listViewProps, isScrollToBottomEnabled])
+    listProps?.onLayout?.(event)
+  }, [inverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
     if (
@@ -378,7 +398,6 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         inverted={inverted}
         automaticallyAdjustContentInsets={false}
         style={stylesCommon.fill}
-        {...invertibleScrollViewProps}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
           inverted ? ListHeaderComponent : ListFooterComponent
@@ -390,7 +409,7 @@ function MessageContainer<TMessage extends IMessage = IMessage> (props: MessageC
         scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
-        {...listViewProps}
+        {...listProps}
         onLayout={onLayoutList}
         CellRendererComponent={renderCell}
       />

package/src/MessageContainer/types.ts

@@ -3,44 +3,69 @@ import {
   FlatListProps,
   StyleProp,
   ViewStyle,
-  FlatList,
 } from 'react-native'
+import { FlatList } from 'react-native-gesture-handler'
 
 import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
+import { ReanimatedScrollEvent } from '../reanimatedCompat'
 import { User, IMessage, Reply, DayProps } from '../types'
-import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes'
+import { TypingIndicatorProps } from '../TypingIndicator/types'
 
-export type ListViewProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
+export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
 
 export type AnimatedList<TMessage> = FlatList<TMessage>
 
-export interface MessageContainerProps<TMessage extends IMessage = IMessage> {
+export interface MessageContainerProps<TMessage extends IMessage = IMessage>
+  extends Omit<TypingIndicatorProps, 'style'> {
+  /** Ref for the FlatList message container */
   forwardRef?: RefObject<AnimatedList<TMessage>>
+  /** Messages to display */
   messages?: TMessage[]
-  isTyping?: boolean
+  /** User sending the messages: { _id, name, avatar } */
   user?: User
-  listViewProps?: ListViewProps
+  /** Additional props for FlatList */
+  listProps?: ListProps<TMessage>
+  /** Reverses display order of messages; default is true */
   inverted?: boolean
+  /** Enables the "Load earlier messages" button */
   loadEarlier?: boolean
+  /** Controls whether or not the message bubbles appear at the top of the chat */
   alignTop?: boolean
+  /** Enables the isScrollToBottomEnabled Component */
   isScrollToBottomEnabled?: boolean
+  /** Scroll to bottom wrapper style */
   scrollToBottomStyle?: StyleProp<ViewStyle>
-  invertibleScrollViewProps?: object
+  /** This can be used to pass unknown data which needs to be re-rendered */
   extraData?: object
+  /** Distance from bottom before showing scroll to bottom button */
   scrollToBottomOffset?: number
+  /** Custom component to render when messages are empty */
   renderChatEmpty?(): React.ReactNode
+  /** Custom footer component on the ListView, e.g. 'User is typing...' */
   renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
+  /** Custom message container */
   renderMessage?(props: MessageProps<TMessage>): React.ReactElement
+  /** Custom day above a message */
   renderDay?(props: DayProps): React.ReactNode
+  /** Custom "Load earlier messages" button */
   renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
+  /** Custom typing indicator */
   renderTypingIndicator?(): React.ReactNode
+  /** Scroll to bottom custom component */
   scrollToBottomComponent?(): React.ReactNode
+  /** Callback when loading earlier messages */
   onLoadEarlier?(): void
+  /** Callback when quick reply is sent */
   onQuickReply?(replies: Reply[]): void
+  /** Infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
   infiniteScroll?: boolean
+  /** Display an ActivityIndicator when loading earlier messages */
   isLoadingEarlier?: boolean
+  /** Custom scroll event handler */
   handleOnScroll?(event: ReanimatedScrollEvent): void
+  /** Style for TypingIndicator component */
+  typingIndicatorStyle?: StyleProp<ViewStyle>
 }
 
 export interface State {