react-native-gifted-chat 2.8.2-alpha.1 → 2.8.2-alpha.3

package/src/GiftedChat/index.tsx

@@ -7,17 +7,27 @@ 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 {
-  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 { SafeAreaProvider } from 'react-native-safe-area-context'
 import { Actions } from '../Actions'
 import { Avatar } from '../Avatar'
 import Bubble from '../Bubble'
@@ -27,30 +37,22 @@ import { Day } from '../Day'
 import { GiftedAvatar } from '../GiftedAvatar'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { LoadEarlier } from '../LoadEarlier'
+import { LoadEarlierMessages } from '../LoadEarlierMessages'
 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 stylesCommon from '../styles'
+import {
+  IMessage,
+} from '../types'
+import * as utils from '../utils'
 import styles from './styles'
+import { GiftedChatProps } from './types'
 
 dayjs.extend(localizedFormat)
 
@@ -75,14 +77,13 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     textInputProps,
     renderChatFooter,
     renderInputToolbar,
-    bottomOffset = 0,
+    keyboardBottomOffset = 0,
     focusOnInputWhenOpeningKeyboard = true,
     onInputTextChanged,
     inverted = true,
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     isKeyboardInternallyHandled = true,
-    disableKeyboardController = false,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
@@ -108,23 +109,24 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   // 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 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(
@@ -278,6 +280,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const onInitialLayoutViewLayout = useCallback(
     (e: LayoutChangeEvent) => {
+      console.log('onInitialLayoutViewLayout', e.nativeEvent.layout.height)
       if (isInitialized)
         return
 
@@ -349,23 +352,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,
             }
           )
 
@@ -383,8 +386,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       focusOnInputWhenOpeningKeyboard,
       handleTextInputFocusWhenKeyboardHide,
       handleTextInputFocusWhenKeyboardShow,
-      bottomOffset,
-      disableKeyboardController,
+      keyboardBottomOffset,
+      isKeyboardInternallyHandled,
     ]
   )
 
@@ -398,7 +401,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>
@@ -413,14 +416,18 @@ 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}>
+      <SafeAreaProvider>
+        <KeyboardProvider>
+          <GiftedChat<TMessage> {...props} />
+        </KeyboardProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   )
 }
 
@@ -463,7 +470,7 @@ export {
   Composer,
   Day,
   InputToolbar,
-  LoadEarlier,
+  LoadEarlierMessages,
   Message,
   MessageContainer,
   Send,

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,21 +1,26 @@
 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 { InputToolbarProps } from '../InputToolbar'
 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,
@@ -23,12 +28,6 @@ import {
   MessageVideoProps,
   User,
 } from '../types'
-import { QuickRepliesProps } from '../QuickReplies'
-import { SendProps } from '../Send'
-import { SystemMessageProps } from '../SystemMessage'
-import { TimeProps } from '../Time'
-import { AnimatedList, MessageContainerProps } from '../MessageContainer'
-import { BubbleProps } from '../Bubble'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
   /* Message container ref */
@@ -54,8 +53,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   dateFormatCalendar?: object
   /* 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 */
@@ -64,10 +61,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderAvatarOnTop?: 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 */
@@ -82,8 +77,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   minComposerHeight?: number
   /* composer min Height */
   maxComposerHeight?: number
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>
@@ -148,7 +143,9 @@ 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']
   renderQuickReplies?(
     quickReplies: QuickRepliesProps<TMessage>,

package/src/InputToolbar.tsx

@@ -1,15 +1,15 @@
 import React, { useMemo } from 'react'
 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> {
-  options?: { [key: string]: () => void }
-  optionTintColor?: string
+  actions?: Array<{ title: string, action: () => void }>
+  actionSheetOptionTintColor?: string
   containerStyle?: StyleProp<ViewStyle>
   primaryStyle?: StyleProp<ViewStyle>
   accessoryStyle?: StyleProp<ViewStyle>
@@ -31,8 +31,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     renderComposer,
     renderSend,
     renderAccessory,
-    options,
-    optionTintColor,
+    actions,
+    actionSheetOptionTintColor,
     icon,
     wrapperStyle,
     containerStyle,
@@ -43,8 +43,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   const actionsFragment = useMemo(() => {
     const props = {
       onPressActionButton,
-      options,
-      optionTintColor,
+      actions,
+      actionSheetOptionTintColor,
       icon,
       wrapperStyle,
       containerStyle,
@@ -56,8 +56,8 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
   }, [
     renderActions,
     onPressActionButton,
-    options,
-    optionTintColor,
+    actions,
+    actionSheetOptionTintColor,
     icon,
     wrapperStyle,
     containerStyle,

package/src/LoadEarlier.tsx

@@ -4,13 +4,13 @@ import {
   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({
@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
   },
 })
 
-export interface LoadEarlierProps {
+export interface LoadEarlierMessagesProps {
   isLoadingEarlier?: boolean
   label?: string
   containerStyle?: StyleProp<ViewStyle>
@@ -49,12 +49,12 @@ export interface LoadEarlierProps {
   activityIndicatorStyle?: StyleProp<ViewStyle>
   activityIndicatorColor?: string
   activityIndicatorSize?: number | 'small' | 'large'
-  onLoadEarlier?(): void
+  onPress: () => void
 }
 
-export function LoadEarlier ({
+export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
   isLoadingEarlier = false,
-  onLoadEarlier = () => {},
+  onPress,
   label = 'Load earlier messages',
   containerStyle,
   wrapperStyle,
@@ -62,7 +62,7 @@ export function LoadEarlier ({
   activityIndicatorColor = 'white',
   activityIndicatorSize = 'small',
   activityIndicatorStyle,
-}: LoadEarlierProps): React.ReactElement {
+}) => {
   const loadingContent = useMemo(() => (
     <View>
       <Text style={[styles.text, textStyle, { opacity: 0 }]}>
@@ -83,7 +83,7 @@ export function LoadEarlier ({
   return (
     <TouchableOpacity
       style={[styles.container, containerStyle]}
-      onPress={onLoadEarlier}
+      onPress={onPress}
       disabled={isLoadingEarlier}
       accessibilityRole='button'
     >

package/src/LoadEarlierMessages.tsx

@@ -0,0 +1,97 @@
+import React, { useMemo } from 'react'
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
+import stylesCommon from './styles'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  wrapper: {
+    backgroundColor: Color.defaultColor,
+    borderRadius: 15,
+    height: 30,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    color: Color.white,
+    fontSize: 12,
+  },
+  activityIndicator: {
+    marginTop: Platform.select({
+      ios: -14,
+      android: -16,
+      default: -15,
+    }),
+  },
+})
+
+export interface LoadEarlierMessagesProps {
+  isAvailable?: boolean
+  isLoading?: boolean
+  isInfiniteScrollEnabled?: boolean
+  label?: string
+  containerStyle?: StyleProp<ViewStyle>
+  wrapperStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+  activityIndicatorStyle?: StyleProp<ViewStyle>
+  activityIndicatorColor?: string
+  activityIndicatorSize?: number | 'small' | 'large'
+  onPress: () => void
+}
+
+export const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps> = ({
+  isLoading = false,
+  onPress,
+  label = 'Load earlier messages',
+  containerStyle,
+  wrapperStyle,
+  textStyle,
+  activityIndicatorColor = 'white',
+  activityIndicatorSize = 'small',
+  activityIndicatorStyle,
+}) => {
+  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]}
+      onPress={onPress}
+      disabled={isLoading}
+      accessibilityRole='button'
+    >
+      <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
+        {isLoading ? 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,6 +1,6 @@
 import React, { useMemo } from 'react'
-import Color from './Color'
 import { View, Text, StyleSheet } from 'react-native'
+import Color from './Color'
 
 const styles = StyleSheet.create({
   container: {

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

@@ -2,22 +2,22 @@ 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'
 
-const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoadingEarlier, ...rest }: DayAnimatedProps) => {
+const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoading, ...rest }: DayAnimatedProps) => {
   const opacity = useSharedValue(0)
   const fadeOutOpacityTimeoutId = useSharedValue<ReturnType<typeof setTimeout> | undefined>(undefined)
   const containerHeight = useSharedValue(0)
 
   const isScrolledOnMount = useSharedValue(false)
-  const isLoadingEarlierAnim = useSharedValue(isLoadingEarlier)
+  const isLoadingAnim = useSharedValue(isLoading)
 
   const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
 
@@ -57,11 +57,11 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
   const style = useAnimatedStyle(() => ({
     top: interpolate(
       relativeScrolledPositionToBottomOfDay.value,
-      [-dayTopOffset, -0.0001, 0, isLoadingEarlierAnim.value ? 0 : containerHeight.value + dayTopOffset],
-      [dayTopOffset, dayTopOffset, -containerHeight.value, isLoadingEarlierAnim.value ? -containerHeight.value : dayTopOffset],
+      [-dayTopOffset, -0.0001, 0, isLoadingAnim.value ? 0 : containerHeight.value + dayTopOffset],
+      [dayTopOffset, dayTopOffset, -containerHeight.value, isLoadingAnim.value ? -containerHeight.value : dayTopOffset],
       'clamp'
     ),
-  }), [relativeScrolledPositionToBottomOfDay, containerHeight, dayTopOffset, isLoadingEarlierAnim])
+  }), [relativeScrolledPositionToBottomOfDay, containerHeight, dayTopOffset, isLoadingAnim])
 
   const contentStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
@@ -111,8 +111,8 @@ const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages
   )
 
   useEffect(() => {
-    isLoadingEarlierAnim.value = isLoadingEarlier
-  }, [isLoadingEarlierAnim, isLoadingEarlier])
+    isLoadingAnim.value = isLoading
+  }, [isLoadingAnim, isLoading])
 
   const dayContent = useMemo(() => {
     if (!createdAt)

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

@@ -8,5 +8,5 @@ export interface DayAnimatedProps extends Omit<DayProps, 'createdAt'> {
   listHeight: { value: number }
   renderDay?: (props: DayProps) => React.ReactNode
   messages: IMessage[]
-  isLoadingEarlier: boolean
+  isLoading: boolean
 }

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'

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