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

package/src/GiftedAvatar.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import {
   Image,
   Text,
-  TouchableOpacity,
   View,
   StyleSheet,
   StyleProp,
@@ -10,8 +9,9 @@ import {
   TextStyle,
 } from 'react-native'
 import Color from './Color'
-import { User } from './types'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
+import { User } from './types'
 
 const {
   carrot,
@@ -51,9 +51,6 @@ export interface GiftedAvatarProps {
 export function GiftedAvatar (
   props: GiftedAvatarProps
 ) {
-  const [avatarName, setAvatarName] = useState<string | undefined>(undefined)
-  const [backgroundColor, setBackgroundColor] = useState<string | undefined>(undefined)
-
   const {
     user,
     avatarStyle,
@@ -61,23 +58,23 @@ export function GiftedAvatar (
     onPress,
   } = props
 
-  const setAvatarColor = useCallback(() => {
-    if (backgroundColor)
-      return
-
+  const avatarName = useMemo(() => {
     const userName = user?.name || ''
     const name = userName.toUpperCase().split(' ')
 
     if (name.length === 1)
-      setAvatarName(`${name[0].charAt(0)}`)
+      return `${name[0].charAt(0)}`
     else if (name.length > 1)
-      setAvatarName(`${name[0].charAt(0)}${name[1].charAt(0)}`)
+      return `${name[0].charAt(0)}${name[1].charAt(0)}`
     else
-      setAvatarName('')
+      return ''
+  }, [user?.name])
 
+  const backgroundColor = useMemo(() => {
     let sumChars = 0
-    for (let i = 0; i < userName.length; i += 1)
-      sumChars += userName.charCodeAt(i)
+    if (user?.name)
+      for (let i = 0; i < user.name.length; i += 1)
+        sumChars += user.name.charCodeAt(i)
 
     // inspired by https://github.com/wbinnssmith/react-user-avatar
     // colors from https://flatuicolors.com/
@@ -91,8 +88,8 @@ export function GiftedAvatar (
       midnightBlue,
     ]
 
-    setBackgroundColor(colors[sumChars % colors.length])
-  }, [user?.name, backgroundColor])
+    return colors[sumChars % colors.length]
+  }, [user?.name])
 
   const renderAvatar = useCallback(() => {
     switch (typeof user?.avatar) {
@@ -125,17 +122,16 @@ export function GiftedAvatar (
     )
   }, [textStyle, avatarName])
 
-  const handleOnPress = () => {
+  const handleOnPress = useCallback(() => {
     const {
       onPress,
       ...rest
     } = props
 
-    if (onPress)
-      onPress(rest)
-  }
+    onPress?.(rest)
+  }, [props])
 
-  const handleOnLongPress = () => {
+  const handleOnLongPress = useCallback(() => {
     const {
       onLongPress,
       ...rest
@@ -143,25 +139,22 @@ export function GiftedAvatar (
 
     if (onLongPress)
       onLongPress(rest)
-  }
+  }, [props])
 
-  useEffect(() => {
-    setAvatarColor()
-  }, [setAvatarColor])
+  const placeholderView = useMemo(() => (
+    <View
+      style={[
+        stylesCommon.centerItems,
+        styles.avatarStyle,
+        styles.avatarTransparent,
+        avatarStyle,
+      ]}
+      accessibilityRole='image'
+    />
+  ), [avatarStyle])
 
   if (!user || (!user.name && !user.avatar))
-    // render placeholder
-    return (
-      <View
-        style={[
-          stylesCommon.centerItems,
-          styles.avatarStyle,
-          styles.avatarTransparent,
-          avatarStyle,
-        ]}
-        accessibilityRole='image'
-      />
-    )
+    return placeholderView
 
   if (user.avatar)
     return (

package/src/GiftedChat/index.tsx

@@ -7,18 +7,26 @@ import React, {
   useCallback,
   RefObject,
 } from 'react'
+import {
+  TextInput,
+  View,
+  LayoutChangeEvent,
+} from 'react-native'
 import {
   ActionSheetProvider,
   ActionSheetProviderRef,
 } from '@expo/react-native-action-sheet'
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
-import {
-  Platform,
-  TextInput,
-  View,
-  LayoutChangeEvent,
-} from 'react-native'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { KeyboardProvider, useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
+import Animated, {
+  useAnimatedStyle,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated'
 import { Actions } from '../Actions'
 import { Avatar } from '../Avatar'
 import Bubble from '../Bubble'
@@ -33,25 +41,17 @@ import Message from '../Message'
 import MessageContainer, { AnimatedList } from '../MessageContainer'
 import { MessageImage } from '../MessageImage'
 import { MessageText } from '../MessageText'
-import {
-  IMessage,
-} from '../types'
 import { Send } from '../Send'
+import stylesCommon from '../styles'
 import { SystemMessage } from '../SystemMessage'
 import { Time } from '../Time'
-import * as utils from '../utils'
-import Animated, {
-  useAnimatedStyle,
-  useAnimatedReaction,
-  useSharedValue,
-  withTiming,
-  runOnJS,
-} from 'react-native-reanimated'
-import { KeyboardProvider, useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
-import { GiftedChatProps } from './types'
+import {
+  IMessage,
+} from '../types'
 
-import stylesCommon from '../styles'
+import * as utils from '../utils'
 import styles from './styles'
+import { GiftedChatProps } from './types'
 
 dayjs.extend(localizedFormat)
 
@@ -72,24 +72,17 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     onSend,
     locale = 'en',
     renderLoading,
-    actionSheet = null,
+    actionSheet,
     textInputProps,
-    renderChatFooter = null,
-    renderInputToolbar = null,
-    bottomOffset = 0,
+    renderChatFooter,
+    renderInputToolbar,
+    keyboardBottomOffset = 0,
     focusOnInputWhenOpeningKeyboard = true,
-    keyboardShouldPersistTaps = Platform.select({
-      ios: 'never',
-      android: 'always',
-      default: 'never',
-    }),
-    onInputTextChanged = null,
-    maxInputLength = null,
+    onInputTextChanged,
     inverted = true,
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     isKeyboardInternallyHandled = true,
-    disableKeyboardController = false,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
@@ -111,29 +104,28 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     minComposerHeight!
   )
   const [text, setText] = useState<string | undefined>(() => props.text || '')
-  const [isTypingDisabled, setIsTypingDisabled] = useState<boolean>(false)
 
   // Always call the hook, but conditionally use its data
   const keyboardControllerData = useReanimatedKeyboardAnimation()
 
-  // Create a mock keyboard object when disabled
+  // Create a mock keyboard object when keyboard is not internally handled
   const keyboard = useMemo(() => {
-    if (disableKeyboardController)
+    if (!isKeyboardInternallyHandled)
       return { height: { value: 0 } }
+
     return keyboardControllerData
-  }, [disableKeyboardController, keyboardControllerData])
+  }, [isKeyboardInternallyHandled, keyboardControllerData])
 
   const trackingKeyboardMovement = useSharedValue(false)
-  const debounceEnableTypingTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
-  const keyboardOffsetBottom = useSharedValue(0)
+  const keyboardBottomOffsetAnim = useSharedValue(0)
 
   const contentStyleAnim = useAnimatedStyle(
     () => ({
       transform: [
-        { translateY: keyboard.height.value - keyboardOffsetBottom.value },
+        { translateY: keyboard.height.value + keyboardBottomOffsetAnim.value },
       ],
     }),
-    [keyboard, keyboardOffsetBottom]
+    [keyboard, keyboardBottomOffsetAnim]
   )
 
   const getTextFromProp = useCallback(
@@ -174,23 +166,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isTextInputWasFocused.current = false
   }, [textInputRef])
 
-  const disableTyping = useCallback(() => {
-    clearTimeout(debounceEnableTypingTimeoutId.current)
-    setIsTypingDisabled(true)
-  }, [])
-
-  const enableTyping = useCallback(() => {
-    clearTimeout(debounceEnableTypingTimeoutId.current)
-    setIsTypingDisabled(false)
-  }, [])
-
-  const debounceEnableTyping = useCallback(() => {
-    clearTimeout(debounceEnableTypingTimeoutId.current)
-    debounceEnableTypingTimeoutId.current = setTimeout(() => {
-      enableTyping()
-    }, 50)
-  }, [enableTyping])
-
   const scrollToBottom = useCallback(
     (isAnimated = true) => {
       if (!messageContainerRef?.current)
@@ -219,10 +194,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
         <MessageContainer<TMessage>
           {...messagesContainerProps}
-          invertibleScrollViewProps={{
-            inverted,
-            keyboardShouldPersistTaps,
-          }}
+          inverted={inverted}
           messages={messages}
           forwardRef={messageContainerRef}
           isTyping={isTyping}
@@ -236,7 +208,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     messages,
     props,
     inverted,
-    keyboardShouldPersistTaps,
     messageContainerRef,
     renderChatFooter,
   ])
@@ -252,13 +223,11 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     setComposerHeight(minComposerHeight!)
     setText(getTextFromProp(''))
-    enableTyping()
   }, [
     minComposerHeight,
     getTextFromProp,
     textInputRef,
     notifyInputTextReset,
-    enableTyping,
   ])
 
   const _onSend = useCallback(
@@ -275,17 +244,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         }
       })
 
-      if (shouldResetInputToolbar === true) {
-        disableTyping()
-
+      if (shouldResetInputToolbar === true)
         resetInputToolbar()
-      }
 
       onSend?.(newMessages)
 
       setTimeout(() => scrollToBottom(), 10)
     },
-    [messageIdGenerator, onSend, user, resetInputToolbar, disableTyping, scrollToBottom]
+    [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom]
   )
 
   const onInputSizeChanged = useCallback(
@@ -301,21 +267,19 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   )
 
   const _onInputTextChanged = useCallback(
-    (_text: string) => {
-      if (isTypingDisabled)
-        return
-
-      onInputTextChanged?.(_text)
+    (text: string) => {
+      onInputTextChanged?.(text)
 
       // Only set state if it's not being overridden by a prop.
       if (props.text === undefined)
-        setText(_text)
+        setText(text)
     },
-    [onInputTextChanged, isTypingDisabled, props.text]
+    [onInputTextChanged, props.text]
   )
 
   const onInitialLayoutViewLayout = useCallback(
     (e: LayoutChangeEvent) => {
+      console.log('onInitialLayoutViewLayout', e.nativeEvent.layout.height)
       if (isInitialized)
         return
 
@@ -347,7 +311,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       textInputProps: {
         ...textInputProps,
         ref: textInputRef,
-        maxLength: isTypingDisabled ? 0 : maxInputLength,
       },
     }
 
@@ -359,14 +322,12 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInitialized,
     _onSend,
     getTextFromProp,
-    maxInputLength,
     minComposerHeight,
     onInputSizeChanged,
     props,
     text,
     renderInputToolbar,
     composerHeight,
-    isTypingDisabled,
     textInputRef,
     textInputProps,
     _onInputTextChanged,
@@ -390,23 +351,23 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       setText(props.text)
   }, [props.text])
 
-  // Only set up keyboard animation when keyboard controller is enabled
+  // Only set up keyboard animation when keyboard is internally handled
   useAnimatedReaction(
-    () => disableKeyboardController ? 0 : -keyboard.height.value,
+    () => isKeyboardInternallyHandled ? keyboard.height.value : 0,
     (value, prevValue) => {
-      // Skip keyboard handling when disabled
-      if (disableKeyboardController)
+      // Skip keyboard handling when not internally handled
+      if (!isKeyboardInternallyHandled)
         return
 
       if (prevValue !== null && value !== prevValue) {
-        const isKeyboardMovingUp = value > prevValue
+        const isKeyboardMovingUp = value < prevValue
         if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
           trackingKeyboardMovement.value = isKeyboardMovingUp
-          keyboardOffsetBottom.value = withTiming(
-            isKeyboardMovingUp ? bottomOffset : 0,
+          keyboardBottomOffsetAnim.value = withTiming(
+            isKeyboardMovingUp ? keyboardBottomOffset : 0,
             {
-              // If `bottomOffset` exists, we change the duration to a smaller value to fix the delay in the keyboard animation speed
-              duration: bottomOffset ? 150 : 400,
+              // If `keyboardBottomOffset` exists, we change the duration to a smaller value to fix the delay in the keyboard animation speed
+              duration: keyboardBottomOffset ? 150 : 400,
             }
           )
 
@@ -415,13 +376,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
               runOnJS(handleTextInputFocusWhenKeyboardShow)()
             else
               runOnJS(handleTextInputFocusWhenKeyboardHide)()
-
-          if (value === 0) {
-            runOnJS(enableTyping)()
-          } else {
-            runOnJS(disableTyping)()
-            runOnJS(debounceEnableTyping)()
-          }
         }
       }
     },
@@ -431,11 +385,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       focusOnInputWhenOpeningKeyboard,
       handleTextInputFocusWhenKeyboardHide,
       handleTextInputFocusWhenKeyboardShow,
-      enableTyping,
-      disableTyping,
-      debounceEnableTyping,
-      bottomOffset,
-      disableKeyboardController,
+      keyboardBottomOffset,
+      isKeyboardInternallyHandled,
     ]
   )
 
@@ -449,7 +400,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         >
           {isInitialized
             ? (
-              <Animated.View style={[stylesCommon.fill, (isKeyboardInternallyHandled && !disableKeyboardController) && contentStyleAnim]}>
+              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
                 {renderMessages}
                 {inputToolbarFragment}
               </Animated.View>
@@ -464,14 +415,16 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
-  // Don't use KeyboardProvider when keyboard controller is disabled
-  if (props.disableKeyboardController)
+  // Don't use KeyboardProvider when keyboard is not internally handled
+  if (!props.isKeyboardInternallyHandled)
     return <GiftedChat<TMessage> {...props} />
 
   return (
-    <KeyboardProvider>
-      <GiftedChat<TMessage> {...props} />
-    </KeyboardProvider>
+    <GestureHandlerRootView style={styles.fill}>
+      <KeyboardProvider>
+        <GiftedChat<TMessage> {...props} />
+      </KeyboardProvider>
+    </GestureHandlerRootView>
   )
 }
 

package/src/GiftedChat/styles.ts

@@ -1,6 +1,9 @@
 import { StyleSheet } from 'react-native'
 
 export default StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
   contentContainer: {
     overflow: 'hidden',
   },

package/src/GiftedChat/types.ts

@@ -1,64 +1,46 @@
 import React, { RefObject } from 'react'
-import {
-  ActionSheetOptions,
-} from '@expo/react-native-action-sheet'
 import {
   TextInput,
   StyleProp,
   TextStyle,
   ViewStyle,
 } from 'react-native'
-import { LightboxProps } from 'react-native-lightbox-v2'
+import {
+  ActionSheetOptions,
+} from '@expo/react-native-action-sheet'
 import { ActionsProps } from '../Actions'
 import { AvatarProps } from '../Avatar'
+import { BubbleProps } from '../Bubble'
 import { ComposerProps } from '../Composer'
-import { DayProps } from '../Day'
 import { InputToolbarProps } from '../InputToolbar'
-import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
+import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
+import { QuickRepliesProps } from '../QuickReplies'
+import { SendProps } from '../Send'
+import { SystemMessageProps } from '../SystemMessage'
+import { TimeProps } from '../Time'
 import {
   IMessage,
   LeftRightStyle,
   MessageAudioProps,
   MessageVideoProps,
-  Reply,
   User,
 } from '../types'
-import { QuickRepliesProps } from '../QuickReplies'
-import { SendProps } from '../Send'
-import { SystemMessageProps } from '../SystemMessage'
-import { TimeProps } from '../Time'
-import { AnimatedList, ListViewProps, MessageContainerProps } from '../MessageContainer'
-import { BubbleProps } from '../Bubble'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
   /* Message container ref */
   messageContainerRef?: RefObject<AnimatedList<TMessage>>
   /* text input ref */
   textInputRef?: RefObject<TextInput>
-  /* Messages to display */
-  messages?: TMessage[]
-  /* Typing Indicator state */
-  isTyping?: boolean
   /* Controls whether or not to show user.name property in the message bubble */
   renderUsernameOnMessage?: boolean
   /* Messages container style */
   messagesContainerStyle?: StyleProp<ViewStyle>
   /* Input text; default is undefined, but if specified, it will override GiftedChat's internal state */
   text?: string
-  /* 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>
   initialText?: string
-  /* Placeholder when text is empty; default is 'Type a message...' */
-  placeholder?: string
-  /* Makes the composer not editable */
-  disableComposer?: boolean
   /* User sending the messages: { _id, name, avatar } */
   user?: User
   /*  Locale to localize the dates */
@@ -69,45 +51,28 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   dateFormat?: string
   /* Format to use for rendering relative times; Today - for now. See more: https://day.js.org/docs/en/plugin/calendar */
   dateFormatCalendar?: object
-  /* Enables the "Load earlier messages" button */
-  loadEarlier?: boolean
-  /* Display an ActivityIndicator when loading earlier messages */
-  isLoadingEarlier?: boolean
   /* Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true` */
   isKeyboardInternallyHandled?: boolean
-  /* Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false` */
-  disableKeyboardController?: boolean
   /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
   showUserAvatar?: boolean
   /* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
   showAvatarForEveryMessage?: boolean
   /* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
   renderAvatarOnTop?: boolean
-  inverted?: boolean
   /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
   imageProps?: MessageImageProps<TMessage>
-  /* Extra props to be passed to the MessageImage's Lightbox */
-  lightboxProps?: LightboxProps
   /* Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar); default is 0 */
-  bottomOffset?: number
+  keyboardBottomOffset?: number
   /* Focus on <TextInput> automatically when opening the keyboard; default is true */
   focusOnInputWhenOpeningKeyboard?: boolean
   /* Minimum height of the input toolbar; default is 44 */
   minInputToolbarHeight?: number
-  /* Extra props to be passed to the messages <ListView>; some props can't be overridden, see the code in MessageContainer.render() for details */
-  listViewProps?: ListViewProps
-  /*  Extra props to be passed to the <TextInput> */
-  textInputProps?: object
-  /* Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs */
-  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'
-  /* Max message composer TextInput length */
-  maxInputLength?: number
+  /*  Extra props to be passed to the <TextInput>. See https://reactnative.dev/docs/textinput */
+  textInputProps?: Partial<React.ComponentProps<typeof TextInput>>
   /* Force send button */
   alwaysShowSend?: boolean
   /* Image style */
   imageStyle?: StyleProp<ViewStyle>
-  /* This can be used to pass unknown data which needs to be re-rendered */
-  extraData?: object
   /* composer min Height */
   minComposerHeight?: number
   /* composer min Height */
@@ -119,8 +84,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   quickReplyContainerStyle?: StyleProp<ViewStyle>
   /* optional prop used to place customView below text, image and video views; default is false */
   isCustomViewBottom?: boolean
-  /* infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist */
-  infiniteScroll?: boolean
   timeTextStyle?: LeftRightStyle<TextStyle>
   /* Custom action sheet */
   actionSheet?(): {
@@ -137,12 +100,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   messageIdGenerator?(message?: TMessage): string
   /* Callback when sending a message */
   onSend?(messages: TMessage[]): void
-  /* Callback when loading earlier messages */
-  onLoadEarlier?(): void
   /*  Render a loading view when initializing */
   renderLoading?(): React.ReactNode
-  /* Custom "Load earlier messages" button */
-  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
   /* Custom message avatar; set to null to not render any avatar for the message */
   renderAvatar?: null | ((props: AvatarProps<TMessage>) => React.ReactNode)
   /* Custom message bubble */
@@ -150,14 +109,12 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* Custom system message */
   renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
   /* Callback when a message bubble is pressed; default is to do nothing */
-  onPress?(context: unknown, message: TMessage): void
+  onPressMessage?(context: unknown, message: TMessage): void
   /* Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example using showActionSheetWithOptions()) */
-  onLongPress?(context: unknown, message: TMessage): void
+  onLongPressMessage?(context: unknown, message: TMessage): void
   /* Custom Username container */
   renderUsername?(user: User): React.ReactNode
   /* Reverses display order of messages; default is true */
-  /* Custom message container */
-  renderMessage?(message: MessageProps<TMessage>): React.ReactElement
   /* Custom message text */
   renderMessageText?(messageText: MessageTextProps<TMessage>): React.ReactNode
   /* Custom message image */
@@ -168,14 +125,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderMessageAudio?(props: MessageAudioProps<TMessage>): React.ReactNode
   /* Custom view inside the bubble */
   renderCustomView?(props: BubbleProps<TMessage>): React.ReactNode
-  /* Custom day above a message */
-  renderDay?(props: DayProps): React.ReactNode
   /* Custom time inside a message */
   renderTime?(props: TimeProps<TMessage>): React.ReactNode
-  /* Custom footer component on the ListView, e.g. 'User is typing...' */
-  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) */
   renderChatFooter?(): React.ReactNode
   /* Custom message composer container */
@@ -192,15 +143,14 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   onPressActionButton?(): void
   /* Callback when the input text changes */
   onInputTextChanged?(text: string): void
-  /* Custom parse patterns for react-native-parsed-text used to linking message content (like URLs and phone numbers) */
+  /* Extra props to be passed to the MessageText component */
+  messageTextProps?: Partial<MessageTextProps<TMessage>>
+  /* Custom parse patterns for react-native-autolink used to linking message content (like URLs and phone numbers) */
   matchers?: MessageTextProps<TMessage>['matchers']
-  onQuickReply?(replies: Reply[]): void
   renderQuickReplies?(
     quickReplies: QuickRepliesProps<TMessage>,
   ): React.ReactNode
   renderQuickReplySend?(): React.ReactNode
-  /* Scroll to bottom custom component */
-  scrollToBottomComponent?(): React.ReactNode
   shouldUpdateMessage?(
     props: MessageProps<TMessage>,
     nextProps: MessageProps<TMessage>,