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

package/src/GiftedChat/index.tsx

@@ -14,7 +14,6 @@ import {
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import {
-  Platform,
   TextInput,
   View,
   LayoutChangeEvent,
@@ -72,23 +71,18 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     onSend,
     locale = 'en',
     renderLoading,
-    actionSheet = null,
+    actionSheet,
     textInputProps,
-    renderChatFooter = null,
-    renderInputToolbar = null,
+    renderChatFooter,
+    renderInputToolbar,
     bottomOffset = 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)
@@ -110,11 +104,18 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     minComposerHeight!
   )
   const [text, setText] = useState<string | undefined>(() => props.text || '')
-  const [isTypingDisabled, setIsTypingDisabled] = useState<boolean>(false)
 
-  const keyboard = useReanimatedKeyboardAnimation()
+  // Always call the hook, but conditionally use its data
+  const keyboardControllerData = useReanimatedKeyboardAnimation()
+
+  // Create a mock keyboard object when disabled
+  const keyboard = useMemo(() => {
+    if (disableKeyboardController)
+      return { height: { value: 0 } }
+    return keyboardControllerData
+  }, [disableKeyboardController, keyboardControllerData])
+
   const trackingKeyboardMovement = useSharedValue(false)
-  const debounceEnableTypingTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
   const keyboardOffsetBottom = useSharedValue(0)
 
   const contentStyleAnim = useAnimatedStyle(
@@ -164,23 +165,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)
@@ -209,10 +193,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}
@@ -226,7 +207,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     messages,
     props,
     inverted,
-    keyboardShouldPersistTaps,
     messageContainerRef,
     renderChatFooter,
   ])
@@ -242,13 +222,11 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     setComposerHeight(minComposerHeight!)
     setText(getTextFromProp(''))
-    enableTyping()
   }, [
     minComposerHeight,
     getTextFromProp,
     textInputRef,
     notifyInputTextReset,
-    enableTyping,
   ])
 
   const _onSend = useCallback(
@@ -265,17 +243,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(
@@ -291,17 +266,14 @@ 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(
@@ -337,7 +309,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       textInputProps: {
         ...textInputProps,
         ref: textInputRef,
-        maxLength: isTypingDisabled ? 0 : maxInputLength,
       },
     }
 
@@ -349,14 +320,12 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInitialized,
     _onSend,
     getTextFromProp,
-    maxInputLength,
     minComposerHeight,
     onInputSizeChanged,
     props,
     text,
     renderInputToolbar,
     composerHeight,
-    isTypingDisabled,
     textInputRef,
     textInputProps,
     _onInputTextChanged,
@@ -380,9 +349,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       setText(props.text)
   }, [props.text])
 
+  // Only set up keyboard animation when keyboard controller is enabled
   useAnimatedReaction(
-    () => -keyboard.height.value,
+    () => disableKeyboardController ? 0 : -keyboard.height.value,
     (value, prevValue) => {
+      // Skip keyboard handling when disabled
+      if (disableKeyboardController)
+        return
+
       if (prevValue !== null && value !== prevValue) {
         const isKeyboardMovingUp = value > prevValue
         if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
@@ -400,13 +374,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
               runOnJS(handleTextInputFocusWhenKeyboardShow)()
             else
               runOnJS(handleTextInputFocusWhenKeyboardHide)()
-
-          if (value === 0) {
-            runOnJS(enableTyping)()
-          } else {
-            runOnJS(disableTyping)()
-            runOnJS(debounceEnableTyping)()
-          }
         }
       }
     },
@@ -416,10 +383,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       focusOnInputWhenOpeningKeyboard,
       handleTextInputFocusWhenKeyboardHide,
       handleTextInputFocusWhenKeyboardShow,
-      enableTyping,
-      disableTyping,
-      debounceEnableTyping,
       bottomOffset,
+      disableKeyboardController,
     ]
   )
 
@@ -433,7 +398,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         >
           {isInitialized
             ? (
-              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
+              <Animated.View style={[stylesCommon.fill, (isKeyboardInternallyHandled && !disableKeyboardController) && contentStyleAnim]}>
                 {renderMessages}
                 {inputToolbarFragment}
               </Animated.View>
@@ -448,6 +413,10 @@ 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)
+    return <GiftedChat<TMessage> {...props} />
+
   return (
     <KeyboardProvider>
       <GiftedChat<TMessage> {...props} />

package/src/GiftedChat/types.ts

@@ -12,9 +12,7 @@ import { LightboxProps } from 'react-native-lightbox-v2'
 import { ActionsProps } from '../Actions'
 import { AvatarProps } from '../Avatar'
 import { ComposerProps } from '../Composer'
-import { DayProps } from '../Day'
 import { InputToolbarProps } from '../InputToolbar'
-import { LoadEarlierProps } from '../LoadEarlier'
 import { MessageProps } from '../Message'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
@@ -23,14 +21,13 @@ import {
   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 { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { BubbleProps } from '../Bubble'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
@@ -38,27 +35,13 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   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,19 +52,16 @@ 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 */
@@ -92,20 +72,12 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   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 */
@@ -117,8 +89,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?(): {
@@ -135,12 +105,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 */
@@ -148,14 +114,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 */
@@ -166,14 +130,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 */
@@ -191,14 +149,11 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* 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) */
-  parsePatterns?: (linkStyle?: TextStyle) => { type?: string, pattern?: RegExp, style?: StyleProp<TextStyle> | object, onPress?: unknown, renderText?: unknown }[]
-  onQuickReply?(replies: Reply[]): void
+  matchers?: MessageTextProps<TMessage>['matchers']
   renderQuickReplies?(
     quickReplies: QuickRepliesProps<TMessage>,
   ): React.ReactNode
   renderQuickReplySend?(): React.ReactNode
-  /* Scroll to bottom custom component */
-  scrollToBottomComponent?(): React.ReactNode
   shouldUpdateMessage?(
     props: MessageProps<TMessage>,
     nextProps: MessageProps<TMessage>,

package/src/InputToolbar.tsx

@@ -1,5 +1,5 @@
 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'
@@ -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,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   ActivityIndicator,
   Platform,
@@ -63,6 +63,23 @@ export function LoadEarlier ({
   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/MessageAudio.tsx

@@ -1,16 +1,28 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import Color from './Color'
-import { View, Text } from 'react-native'
+import { View, Text, StyleSheet } 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

@@ -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

@@ -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(() => {