react-native-gifted-chat 3.0.0-alpha.1 → 3.0.0

package/src/GiftedChat/index.tsx

@@ -21,10 +21,10 @@ import localizedFormat from 'dayjs/plugin/localizedFormat'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
+import { TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { MessageContainer, AnimatedList } from '../MessageContainer'
+import { MessagesContainer, AnimatedList } from '../MessagesContainer'
 import { IMessage } from '../Models'
 import stylesCommon from '../styles'
 import { renderComponentOrElement } from '../utils'
@@ -55,15 +55,13 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     renderChatFooter,
     renderInputToolbar,
     isInverted = true,
-    minComposerHeight = MIN_COMPOSER_HEIGHT,
-    maxComposerHeight = MAX_COMPOSER_HEIGHT,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
 
-  const messageContainerRef = useMemo(
-    () => props.messageContainerRef || createRef<AnimatedList<TMessage>>(),
-    [props.messageContainerRef]
+  const messagesContainerRef = useMemo(
+    () => props.messagesContainerRef || createRef<AnimatedList<TMessage>>(),
+    [props.messagesContainerRef]
   ) as RefObject<AnimatedList<TMessage>>
 
   const textInputRef = useMemo(
@@ -72,9 +70,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   )
 
   const [isInitialized, setIsInitialized] = useState<boolean>(false)
-  const [composerHeight, setComposerHeight] = useState<number>(
-    minComposerHeight!
-  )
   const [text, setText] = useState<string | undefined>(() => props.text || '')
 
   const getTextFromProp = useCallback(
@@ -89,20 +84,20 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const scrollToBottom = useCallback(
     (isAnimated = true) => {
-      if (!messageContainerRef?.current)
+      if (!messagesContainerRef?.current)
         return
 
       if (isInverted) {
-        messageContainerRef.current.scrollToOffset({
+        messagesContainerRef.current.scrollToOffset({
           offset: 0,
           animated: isAnimated,
         })
         return
       }
 
-      messageContainerRef.current.scrollToEnd({ animated: isAnimated })
+      messagesContainerRef.current.scrollToEnd({ animated: isAnimated })
     },
-    [isInverted, messageContainerRef]
+    [isInverted, messagesContainerRef]
   )
 
   const renderMessages = useMemo(() => {
@@ -113,11 +108,11 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     return (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
-        <MessageContainer<TMessage>
+        <MessagesContainer<TMessage>
           {...messagesContainerProps}
           isInverted={isInverted}
           messages={messages}
-          forwardRef={messageContainerRef}
+          forwardRef={messagesContainerRef}
           isTyping={isTyping}
         />
         {renderComponentOrElement(renderChatFooter, {})}
@@ -129,7 +124,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     messages,
     props,
     isInverted,
-    messageContainerRef,
+    messagesContainerRef,
     renderChatFooter,
   ])
 
@@ -142,10 +137,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     notifyInputTextReset()
 
-    setComposerHeight(minComposerHeight!)
     setText(getTextFromProp(''))
   }, [
-    minComposerHeight,
     getTextFromProp,
     textInputRef,
     notifyInputTextReset,
@@ -175,18 +168,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom]
   )
 
-  const onInputSizeChanged = useCallback(
-    (size: { height: number }) => {
-      const newComposerHeight = Math.max(
-        minComposerHeight!,
-        Math.min(maxComposerHeight!, size.height)
-      )
-
-      setComposerHeight(newComposerHeight)
-    },
-    [maxComposerHeight, minComposerHeight]
-  )
-
   const _onChangeText = useCallback(
     (text: string) => {
       props.textInputProps?.onChangeText?.(text)
@@ -211,10 +192,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       notifyInputTextReset()
 
       setIsInitialized(true)
-      setComposerHeight(minComposerHeight!)
       setText(getTextFromProp(initialText))
     },
-    [isInitialized, initialText, minComposerHeight, notifyInputTextReset, getTextFromProp]
+    [isInitialized, initialText, notifyInputTextReset, getTextFromProp]
   )
 
   const inputToolbarFragment = useMemo(() => {
@@ -224,9 +204,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     const inputToolbarProps = {
       ...props,
       text: getTextFromProp(text!),
-      composerHeight: Math.max(minComposerHeight!, composerHeight),
       onSend: _onSend,
-      onInputSizeChanged,
       textInputProps: {
         ...textInputProps,
         onChangeText: _onChangeText,
@@ -242,12 +220,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInitialized,
     _onSend,
     getTextFromProp,
-    minComposerHeight,
-    onInputSizeChanged,
     props,
     text,
     renderInputToolbar,
-    composerHeight,
     textInputRef,
     textInputProps,
     _onChangeText,

package/src/GiftedChat/types.ts

@@ -14,8 +14,8 @@ import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
 import { ComposerProps } from '../Composer'
 import { InputToolbarProps } from '../InputToolbar'
-import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { MessageImageProps } from '../MessageImage'
+import { AnimatedList, MessagesContainerProps } from '../MessagesContainer'
 import { MessageTextProps } from '../MessageText'
 import {
   IMessage,
@@ -29,9 +29,9 @@ import { SendProps } from '../Send'
 import { SystemMessageProps } from '../SystemMessage'
 import { TimeProps } from '../Time'
 
-export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
-  /* Message container ref */
-  messageContainerRef?: RefObject<AnimatedList<TMessage>>
+export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessagesContainerProps<TMessage>> {
+  /* Messages container ref */
+  messagesContainerRef?: RefObject<AnimatedList<TMessage>>
   /* text input ref */
   textInputRef?: RefObject<TextInput>
   /* Controls whether or not to show user.name property in the message bubble */
@@ -115,13 +115,13 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderMessageImage?: (props: MessageImageProps<TMessage>) => React.ReactNode
   /* Custom message video */
   renderMessageVideo?: (props: MessageVideoProps<TMessage>) => React.ReactNode
-  /* Custom message video */
+  /* Custom message audio */
   renderMessageAudio?: (props: MessageAudioProps<TMessage>) => React.ReactNode
   /* Custom view inside the bubble */
   renderCustomView?: (props: BubbleProps<TMessage>) => React.ReactNode
   /* Custom time inside a message */
   renderTime?: (props: TimeProps<TMessage>) => React.ReactNode
-  /* Custom component to render below the MessageContainer (separate from the ListView) */
+  /* Custom component to render below the MessagesContainer */
   renderChatFooter?: () => React.ReactNode
   /* Custom message composer container. Can be a component, element, render function, or null */
   renderInputToolbar?: React.ComponentType<InputToolbarProps<TMessage>> | React.ReactElement | ((props: InputToolbarProps<TMessage>) => React.ReactNode) | null
@@ -143,4 +143,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderQuickReplySend?: () => React.ReactNode
   keyboardProviderProps?: React.ComponentProps<typeof KeyboardProvider>
   keyboardAvoidingViewProps?: KeyboardAvoidingViewProps
+  /** Enable animated day label that appears on scroll; default is true */
+  isDayAnimationEnabled?: boolean
 }

package/src/InputToolbar.tsx

@@ -6,6 +6,7 @@ import { Color } from './Color'
 import { Composer, ComposerProps } from './Composer'
 import { IMessage } from './Models'
 import { Send, SendProps } from './Send'
+import { getColorSchemeStyle } from './styles'
 import { renderComponentOrElement } from './utils'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
@@ -13,7 +14,6 @@ export interface InputToolbarProps<TMessage extends IMessage> {
   actionSheetOptionTintColor?: string
   containerStyle?: StyleProp<ViewStyle>
   primaryStyle?: StyleProp<ViewStyle>
-  accessoryStyle?: StyleProp<ViewStyle>
   renderAccessory?: (props: InputToolbarProps<TMessage>) => React.ReactNode
   renderActions?: (props: ActionsProps) => React.ReactNode
   renderSend?: (props: SendProps<TMessage>) => React.ReactNode
@@ -88,16 +88,14 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     if (!renderAccessory)
       return null
 
-    return (
-      <View style={[styles.accessory, props.accessoryStyle]}>
-        {renderComponentOrElement(renderAccessory, props)}
-      </View>
-    )
+    return renderComponentOrElement(renderAccessory, props)
   }, [renderAccessory, props])
 
   return (
-    <View style={[styles.container, colorScheme === 'dark' && styles.container_dark, containerStyle]}>
-      <View style={[styles.primary, props.primaryStyle]}>
+    <View
+      style={[getColorSchemeStyle(styles, 'container', colorScheme), containerStyle]}
+    >
+      <View style={[getColorSchemeStyle(styles, 'primary', colorScheme), props.primaryStyle]}>
         {actionsFragment}
         {composerFragment}
         {sendFragment}
@@ -121,7 +119,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-end',
   },
-  accessory: {
-    height: 44,
-  },
 })

package/src/MessageImage.tsx

@@ -19,14 +19,91 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
-  runOnJS,
   Easing,
+  runOnJS,
 } from 'react-native-reanimated'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import Zoom from 'react-native-zoom-reanimated'
 import { IMessage } from './Models'
 import commonStyles from './styles'
 
+interface ModalContentProps {
+  isVisible: boolean
+  imageSource: ImageURISource
+  modalImageDimensions: { width: number, height: number } | undefined
+  imageProps?: Partial<ImageProps>
+  onClose: () => void
+}
+
+function ModalContent({ isVisible, imageSource, modalImageDimensions, imageProps, onClose }: ModalContentProps) {
+  const insets = useSafeAreaInsets()
+
+  // Animation values
+  const modalOpacity = useSharedValue(0)
+  const modalScale = useSharedValue(0.9)
+  const modalBorderRadius = useSharedValue(40)
+
+  const handleModalClose = useCallback(() => {
+    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
+    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
+      runOnJS(onClose)()
+    })
+    modalBorderRadius.value = withTiming(40, { duration: 200, easing: Easing.in(Easing.ease) })
+  }, [onClose, modalOpacity, modalScale, modalBorderRadius])
+
+  // Animate on visibility change
+  useEffect(() => {
+    if (isVisible) {
+      modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+      modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+      modalBorderRadius.value = withTiming(0, { duration: 300, easing: Easing.out(Easing.ease) })
+    }
+  }, [isVisible, modalOpacity, modalScale, modalBorderRadius])
+
+  const modalAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: modalOpacity.value,
+    transform: [{ scale: modalScale.value }],
+  }), [modalOpacity, modalScale])
+
+  const modalBorderRadiusStyle = useAnimatedStyle(() => ({
+    borderRadius: modalBorderRadius.value,
+  }), [modalBorderRadius])
+
+  return (
+    <>
+      <StatusBar animated barStyle='dark-content' />
+      <Animated.View style={[styles.modalOverlay, modalAnimatedStyle, modalBorderRadiusStyle]}>
+        <GestureHandlerRootView style={commonStyles.fill}>
+          <Animated.View style={[commonStyles.fill, styles.modalContent, modalBorderRadiusStyle, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+
+            {/* close button */}
+            <View style={styles.closeButtonContainer}>
+              <BaseButton onPress={handleModalClose}>
+                <View style={styles.closeButtonContent}>
+                  <Text style={styles.closeButtonIcon}>
+                    {'X'}
+                  </Text>
+                </View>
+              </BaseButton>
+            </View>
+
+            <View style={[commonStyles.fill, commonStyles.centerItems]}>
+              <Zoom>
+                <Image
+                  style={modalImageDimensions}
+                  source={imageSource}
+                  resizeMode='contain'
+                  {...imageProps}
+                />
+              </Zoom>
+            </View>
+          </Animated.View>
+        </GestureHandlerRootView>
+      </Animated.View>
+    </>
+  )
+}
+
 export interface MessageImageProps<TMessage extends IMessage> {
   currentMessage: TMessage
   containerStyle?: StyleProp<ViewStyle>
@@ -46,12 +123,6 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
   const [imageDimensions, setImageDimensions] = useState<{ width: number, height: number }>()
   const windowDimensions = useWindowDimensions()
 
-  const insets = useSafeAreaInsets()
-
-  // Animation values
-  const modalOpacity = useSharedValue(0)
-  const modalScale = useSharedValue(0.9)
-
   const imageSource = useMemo(() => ({
     ...imageSourceProps,
     uri: currentMessage?.image,
@@ -70,23 +141,15 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
 
     setIsModalVisible(true)
 
-    // Animate modal entrance
-    modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
-    modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
-
     if (isImageSourceChanged.current || !imageDimensions)
       Image.getSize(imageSource.uri, (width, height) => {
         setImageDimensions({ width, height })
       })
-  }, [imageSource.uri, imageDimensions, modalOpacity, modalScale])
+  }, [imageSource.uri, imageDimensions])
 
   const handleModalClose = useCallback(() => {
-    // Animate modal exit
-    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
-    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
-      runOnJS(setIsModalVisible)(false)
-    })
-  }, [modalOpacity, modalScale])
+    setIsModalVisible(false)
+  }, [])
 
   const handleImageLayout = useCallback((e: LayoutChangeEvent) => {
     setImageDimensions({
@@ -115,11 +178,6 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     }
   }, [imageDimensions, windowDimensions.height, windowDimensions.width])
 
-  const modalAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: modalOpacity.value,
-    transform: [{ scale: modalScale.value }],
-  }), [modalOpacity, modalScale])
-
   useEffect(() => {
     isImageSourceChanged.current = true
   }, [imageSource.uri])
@@ -139,39 +197,17 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
         />
       </TouchableOpacity>
 
-      {isModalVisible && (
-        <OverKeyboardView visible={isModalVisible}>
-          <StatusBar animated barStyle='dark-content' />
-          <Animated.View style={[styles.modalOverlay, modalAnimatedStyle]}>
-            <GestureHandlerRootView style={commonStyles.fill}>
-              <View style={[commonStyles.fill, styles.modalContent, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-
-                {/* close button */}
-                <View style={styles.closeButtonContainer}>
-                  <BaseButton onPress={handleModalClose}>
-                    <View style={styles.closeButtonContent}>
-                      <Text style={styles.closeButtonIcon}>
-                        {'X'}
-                      </Text>
-                    </View>
-                  </BaseButton>
-                </View>
-
-                <View style={[commonStyles.fill, commonStyles.centerItems]}>
-                  <Zoom>
-                    <Image
-                      style={modalImageDimensions}
-                      source={imageSource}
-                      resizeMode='contain'
-                      {...imageProps}
-                    />
-                  </Zoom>
-                </View>
-              </View>
-            </GestureHandlerRootView>
-          </Animated.View>
-        </OverKeyboardView>
-      )}
+      <OverKeyboardView visible={isModalVisible}>
+        <SafeAreaProvider>
+          <ModalContent
+            isVisible={isModalVisible}
+            imageSource={imageSource}
+            modalImageDimensions={modalImageDimensions}
+            imageProps={imageProps}
+            onClose={handleModalClose}
+          />
+        </SafeAreaProvider>
+      </OverKeyboardView>
     </View>
   )
 }
@@ -193,6 +229,7 @@ const styles = StyleSheet.create({
   },
   modalContent: {
     backgroundColor: '#000',
+    overflow: 'hidden',
   },
   modalImageContainer: {
     width: '100%',

package/src/{MessageContainer → MessagesContainer}/components/Item/index.tsx

@@ -103,6 +103,7 @@ export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
     scrolledY,
     daysPositions,
     listHeight,
+    isDayAnimationEnabled,
     ...rest
   } = props
 
@@ -121,23 +122,26 @@ export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   }, [dayContainerHeight])
 
   const style = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      relativeScrolledPositionToBottomOfDay.value,
-      [
-        -dayTopOffset,
-        -0.0001,
-        0,
-        dayContainerHeight.value + dayTopOffset,
-      ],
-      [
-        0,
-        0,
-        1,
-        1,
-      ],
-      'clamp'
-    ),
-  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset])
+    opacity:
+      isDayAnimationEnabled
+        ? interpolate(
+          relativeScrolledPositionToBottomOfDay.value,
+          [
+            -dayTopOffset,
+            -0.0001,
+            0,
+            dayContainerHeight.value + dayTopOffset,
+          ],
+          [
+            0,
+            0,
+            1,
+            1,
+          ],
+          'clamp'
+        )
+        : 1,
+  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset, isDayAnimationEnabled])
 
   return (
     // do not remove key. it helps to get correct position of the day container

package/src/{MessageContainer → MessagesContainer}/components/Item/types.ts

@@ -1,7 +1,7 @@
 import { IMessage } from '../../../Models'
-import { MessageContainerProps, DaysPositions } from '../../types'
+import { MessagesContainerProps, DaysPositions } from '../../types'
 
-export interface ItemProps<TMessage extends IMessage> extends MessageContainerProps<TMessage> {
+export interface ItemProps<TMessage extends IMessage> extends MessagesContainerProps<TMessage> {
   currentMessage: TMessage
   previousMessage?: TMessage
   nextMessage?: TMessage
@@ -9,4 +9,5 @@ export interface ItemProps<TMessage extends IMessage> extends MessageContainerPr
   scrolledY: { value: number }
   daysPositions: { value: DaysPositions }
   listHeight: { value: number }
+  isDayAnimationEnabled?: boolean
 }

package/src/{MessageContainer → MessagesContainer}/index.tsx

@@ -1,13 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
-  Pressable,
   Text,
   LayoutChangeEvent,
   ListRenderItemInfo,
   CellRendererProps,
 } from 'react-native'
-import { FlatList } from 'react-native-gesture-handler'
+import { FlatList, Pressable } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'
@@ -21,14 +20,13 @@ import { DayAnimated } from './components/DayAnimated'
 import { Item } from './components/Item'
 import { ItemProps } from './components/Item/types'
 import styles from './styles'
-import { MessageContainerProps, DaysPositions } from './types'
+import { MessagesContainerProps, DaysPositions } from './types'
 
 export * from './types'
 
-
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
-export const MessageContainer = <TMessage extends IMessage>(props: MessageContainerProps<TMessage>) => {
+export const MessagesContainer = <TMessage extends IMessage>(props: MessagesContainerProps<TMessage>) => {
   const {
     messages = [],
     user,
@@ -47,6 +45,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     forwardRef,
     scrollToBottomComponent: scrollToBottomComponentProp,
     renderDay: renderDayProp,
+    isDayAnimationEnabled = true,
   } = props
 
   const listPropsOnScrollProp = listProps?.onScroll
@@ -182,6 +181,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         scrolledY,
         daysPositions,
         listHeight,
+        isDayAnimationEnabled,
       }
 
       return (
@@ -190,7 +190,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     }
 
     return null
-  }, [messages, restProps, isInverted, scrolledY, daysPositions, listHeight, user])
+  }, [messages, restProps, isInverted, scrolledY, daysPositions, listHeight, isDayAnimationEnabled, user])
 
   const emptyContent = useMemo(() => {
     if (!renderChatEmptyProp)
@@ -409,14 +409,16 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         CellRendererComponent={renderCell}
       />
       <ScrollToBottomWrapper />
-      <DayAnimated
-        scrolledY={scrolledY}
-        daysPositions={daysPositions}
-        listHeight={listHeight}
-        renderDay={renderDayProp}
-        messages={messages}
-        isLoading={loadEarlierMessagesProps?.isLoading ?? false}
-      />
+      {isDayAnimationEnabled && (
+        <DayAnimated
+          scrolledY={scrolledY}
+          daysPositions={daysPositions}
+          listHeight={listHeight}
+          renderDay={renderDayProp}
+          messages={messages}
+          isLoading={loadEarlierMessagesProps?.isLoading ?? false}
+        />
+      )}
     </View>
   )
 }

package/src/{MessageContainer → MessagesContainer}/types.ts

@@ -16,7 +16,7 @@ export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListPr
 
 export type AnimatedList<TMessage> = FlatList<TMessage>
 
-export interface MessageContainerProps<TMessage extends IMessage = IMessage>
+export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   extends Omit<TypingIndicatorProps, 'style'> {
   /** Ref for the FlatList message container */
   forwardRef?: RefObject<AnimatedList<TMessage>>
@@ -39,7 +39,7 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   /** 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
+  renderFooter?: (props: MessagesContainerProps<TMessage>) => React.ReactNode
   /** Custom message container */
   renderMessage?: (props: MessageProps<TMessage>) => React.ReactElement
   /** Custom day above a message */
@@ -56,6 +56,8 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   loadEarlierMessagesProps?: LoadEarlierMessagesProps
   /** Style for TypingIndicator component */
   typingIndicatorStyle?: StyleProp<ViewStyle>
+  /** Enable animated day label that appears on scroll; default is true */
+  isDayAnimationEnabled?: boolean
 }
 
 export interface State {