fix: Reduce reanimated value

Author: howljs

apps/docs/docs/api/hooks/useBody.md

@@ -35,7 +35,6 @@ The `useBody` hook returns an object with the following properties:
 - `hours` (`Array<{ slot: number; time: string }>`): Array of hour objects.
 - `hourFormat` (string): Format for displaying hours.
 - `totalSlots` (number): Total number of time slots.
-- `columnWidthAnim` (`SharedValue<number>`): Animated value for column width.
 - `numberOfDays` (number): Number of days displayed.
 - `hourWidth` (number): Width of the hour column.
 - `start` (number): Start time of the calendar (in minutes from midnight).

apps/docs/docs/api/hooks/useCalendar.md

@@ -29,7 +29,6 @@ The `useCalendar` hook returns an object with numerous properties and functions.
 - `verticalListRef` (RefObject): Reference to the vertical list component.
 - `dayBarListRef` (RefObject): Reference to the day bar list component.
 - `gridListRef` (RefObject): Reference to the grid list component.
-- `columnWidthAnim` (`SharedValue<number>`): Animated value for column width.
 - `firstDay` (number): The first day of the week (0 for Sunday, 1 for Monday, etc.).
 - `offsetY` (`SharedValue<number>`): Animated value for vertical offset.
 - `minuteHeight` (`SharedValue<number>`): Animated value for the height of one minute.

apps/docs/docs/api/hooks/useHeader.md

@@ -23,7 +23,6 @@ The `useHeader` hook returns an object with the following properties:
 
 - `dayBarHeight` (number): The height of the day bar in the header.
 - `numberOfDays` (number): The number of days displayed in the calendar view.
-- `columnWidthAnim` (`Animated.SharedValue<number>`): An animated value representing the width of each day column.
 - `calendarLayout` (object): Contains `width` and `height` of the calendar layout.
 - `hourWidth` (number): The width of the hour column.
 - `minuteHeight` (`Animated.SharedValue<number>`): An animated value representing the height of one minute in the calendar.

packages/react-native-calendar-kit/src/CalendarBody.tsx

@@ -57,7 +57,6 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
   const {
     calendarLayout,
     hourWidth,
-    columnWidthAnim,
     numberOfDays,
     offsetY,
     minuteHeight,
@@ -217,7 +216,6 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
       hours,
       hourFormat,
       totalSlots,
-      columnWidthAnim,
       numberOfDays,
       hourWidth,
       start,
@@ -262,7 +260,6 @@ const CalendarBody: React.FC<CalendarBodyProps> = ({
       hours,
       hourFormat,
       totalSlots,
-      columnWidthAnim,
       numberOfDays,
       hourWidth,
       start,

packages/react-native-calendar-kit/src/CalendarContainer.tsx

@@ -130,7 +130,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     minStartDifference,
     onLongPressBackground,
     resources,
-    animateColumnWidth = false,
     dragToCreateMode = 'duration',
     allowHorizontalSwipe = !IS_WEB,
     enableResourceScroll = false,
@@ -242,7 +241,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
   const verticalListRef = useAnimatedRef<Animated.ScrollView>();
   const dayBarListRef = useAnimatedRef<Animated.ScrollView>();
   const gridListRef = useAnimatedRef<Animated.ScrollView>();
-  const isTriggerMomentum = useRef(false);
   const scrollVisibleHeight = useRef(0);
   const triggerDateChanged = useRef<number | undefined>(undefined);
   const visibleDateRef = useRef<VisibleDateProviderRef>(null);
@@ -294,7 +292,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     visibleDateUnix,
   ]);
 
-  const columnWidthAnim = useSharedValue(columnWidth);
   const offsetY = useSharedValue(0);
   const offsetX = useSharedValue(
     isResourceMode && enableResourceScroll ? 0 : initialOffset
@@ -740,21 +737,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
     }
   }, [enableResourceScroll, initialOffset, isResourceMode, offsetX]);
 
-  const prevMode = useRef(isSingleDay);
-  useEffect(() => {
-    if (!animateColumnWidth) {
-      columnWidthAnim.value = columnWidth;
-      return;
-    }
-
-    if (prevMode.current !== isSingleDay) {
-      prevMode.current = isSingleDay;
-      columnWidthAnim.value = columnWidth;
-    } else {
-      columnWidthAnim.value = withTiming(columnWidth);
-    }
-  }, [columnWidthAnim, columnWidth, isSingleDay, animateColumnWidth]);
-
   const snapToInterval =
     numberOfDays > 1 && scrollByDay && !isResourceMode
       ? columnWidth
@@ -770,7 +752,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
       verticalListRef,
       dayBarListRef,
       gridListRef,
-      columnWidthAnim,
       firstDay,
       offsetY,
       minuteHeight,
@@ -789,7 +770,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
       timeInterval,
       scrollVisibleHeight,
       offsetX,
-      isTriggerMomentum,
       showWeekNumber,
       calendarGridWidth,
       columnWidth,
@@ -828,7 +808,6 @@ const CalendarContainer: React.ForwardRefRenderFunction<
       verticalListRef,
       dayBarListRef,
       gridListRef,
-      columnWidthAnim,
       firstDay,
       offsetY,
       minuteHeight,

packages/react-native-calendar-kit/src/CalendarHeader.tsx

@@ -48,7 +48,6 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
   const {
     calendarLayout,
     numberOfDays,
-    columnWidthAnim,
     minuteHeight,
     hourWidth,
     dayBarListRef,
@@ -159,7 +158,6 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
     () => ({
       dayBarHeight,
       numberOfDays,
-      columnWidthAnim,
       calendarLayout,
       hourWidth,
       minuteHeight,
@@ -184,7 +182,6 @@ const CalendarHeader: React.FC<CalendarHeaderProps> = ({
     [
       dayBarHeight,
       numberOfDays,
-      columnWidthAnim,
       calendarLayout,
       hourWidth,
       minuteHeight,

packages/react-native-calendar-kit/src/components/DraggableEvent.tsx

@@ -57,7 +57,7 @@ export const DraggableEvent: FC<DraggableEventProps> = ({
       };
     }, [])
   );
-  const { minuteHeight, columnWidthAnim, start, numberOfDays } = useBody();
+  const { minuteHeight, columnWidth, start, numberOfDays } = useBody();
   const {
     dragStartUnix,
     dragSelectedStartUnix,
@@ -70,10 +70,9 @@ export const DraggableEvent: FC<DraggableEventProps> = ({
   const totalResources =
     resources && resources.length > 1 ? resources.length : 1;
 
-  const eventWidth = useDerivedValue(
-    () => columnWidthAnim.value / totalResources,
-    [totalResources]
-  );
+  const eventWidth = columnWidth / totalResources;
+
+  const eventWidthAnim = useDerivedValue(() => eventWidth, [eventWidth]);
 
   const resourceIndex = useMemo(() => {
     if (!resources) {
@@ -84,10 +83,10 @@ export const DraggableEvent: FC<DraggableEventProps> = ({
       (resource) => resource.id === selectedEvent?.resourceId
     );
   }, [resources, selectedEvent?.resourceId]);
-  const left = useDerivedValue(() => {
+  const left = useMemo(() => {
     const diffDays = visibleDates[startUnix]?.diffDays ?? 1;
-    return (diffDays - 1) * columnWidthAnim.value;
-  }, [visibleDates, startUnix]);
+    return (diffDays - 1) * columnWidth;
+  }, [visibleDates, startUnix, columnWidth]);
 
   const top = useDerivedValue(() => {
     if (index > 0) {
@@ -104,16 +103,13 @@ export const DraggableEvent: FC<DraggableEventProps> = ({
   const eventHeight = useDerivedValue(
     () => dragSelectedDuration.value * minuteHeight.value
   );
+  const startX = resourceIndex !== -1 ? resourceIndex * eventWidth : 0;
 
   const isDragging = useDerivedValue(() => dragStartUnix.value !== -1);
-
   const animView = useAnimatedStyle(() => {
-    const startX = resourceIndex !== -1 ? resourceIndex * eventWidth.value : 0;
     return {
       top: top.value,
       height: eventHeight.value,
-      width: eventWidth.value,
-      left: startX + left.value,
       opacity:
         isDragging.value || dragSelectedStartMinutes.value === -1 ? 0 : 1,
     };
@@ -159,7 +155,12 @@ export const DraggableEvent: FC<DraggableEventProps> = ({
     });
 
   return (
-    <Animated.View style={[styles.container, animView]}>
+    <Animated.View
+      style={[
+        styles.container,
+        { width: eventWidth, left: startX + left },
+        animView,
+      ]}>
       {selectedEvent && (
         <View
           style={[
@@ -178,7 +179,7 @@ export const DraggableEvent: FC<DraggableEventProps> = ({
           ]}>
           {renderEvent ? (
             renderEvent(selectedEvent, {
-              width: eventWidth,
+              width: eventWidthAnim,
               height: eventHeight,
             })
           ) : (

packages/react-native-calendar-kit/src/components/DraggingEvent.tsx

@@ -50,7 +50,7 @@ export const DraggingEvent: FC<DraggingEventProps> = ({
 
   const {
     minuteHeight,
-    columnWidthAnim,
+    columnWidth,
     start,
     hourWidth,
     visibleDateUnixAnim,
@@ -106,20 +106,17 @@ export const DraggingEvent: FC<DraggingEventProps> = ({
     }
     return clampValues(currentIndex - startIndex, 0, columns - 1);
   };
-  const eventWidth = useDerivedValue(
-    () =>
-      columnWidthAnim.value /
-      (enableResourceScroll ? resourcePerPage : totalResources),
-    [totalResources, enableResourceScroll, resourcePerPage]
-  );
+  const eventWidth =
+    columnWidth / (enableResourceScroll ? resourcePerPage : totalResources);
+  const eventWidthAnim = useDerivedValue(() => eventWidth, [eventWidth]);
 
   const resourceIndex = useDerivedValue(() => {
     if (totalResources === 1) {
       return 0;
     }
 
     const xWithoutHourWidth = dragX.value - hourWidth;
-    const columnIndex = Math.floor(xWithoutHourWidth / eventWidth.value);
+    const columnIndex = Math.floor(xWithoutHourWidth / eventWidth);
     return clampValues(columnIndex, 0, totalResources - 1);
   }, [totalResources, hourWidth]);
 
@@ -140,13 +137,12 @@ export const DraggingEvent: FC<DraggingEventProps> = ({
   });
 
   const animView = useAnimatedStyle(() => {
-    const startX = resourceIndex.value * eventWidth.value;
+    const startX = resourceIndex.value * eventWidth;
     const dIndex = enableResourceScroll ? 0 : internalDayIndex.value;
     return {
       top: (dragStartMinutes.value - start) * minuteHeight.value,
       height: dragDuration.value * minuteHeight.value,
-      width: eventWidth.value,
-      left: startX + hourWidth + eventWidth.value * dIndex - 1,
+      left: startX + hourWidth + eventWidth * dIndex - 1,
     };
   }, [totalResources, hourWidth]);
 
@@ -193,7 +189,7 @@ export const DraggingEvent: FC<DraggingEventProps> = ({
   };
 
   return (
-    <Animated.View style={[styles.container, animView]}>
+    <Animated.View style={[styles.container, { width: eventWidth }, animView]}>
       <View
         style={[
           StyleSheet.absoluteFill,
@@ -207,7 +203,7 @@ export const DraggingEvent: FC<DraggingEventProps> = ({
         ]}>
         {renderEvent
           ? renderEvent(draggingEvent, {
-              width: eventWidth,
+              width: eventWidthAnim,
               height: eventHeight,
             })
           : !!draggingEvent?.title && (