fix day renders

Author: Inbal-Tish

example/src/screens/horizontalCalendarList.tsx

@@ -1,33 +1,36 @@
-import React, {useState} from 'react';
+import React, {useState, useMemo, useCallback} from 'react';
 // @ts-expect-error
 import {CalendarList} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
-const initialDate = '2020-05-16';
+const INITIAL_DATE = '2020-05-16';
 
 const HorizontalCalendarList = () => {
-  const [selected, setSelected] = useState(initialDate);
-  const markedDates = {
-    [selected]: {
-      selected: true,
-      selectedColor: '#DFA460'
-    }
-  };
+  const [selected, setSelected] = useState(INITIAL_DATE);
+  const markedDates = useMemo(() => {
+    return {
+      [selected]: {
+        selected: true,
+        selectedColor: '#DFA460'
+      }
+    };
+  }, [selected]);
 
-  const onDayPress = day => {
+  const onDayPress = useCallback((day) => {
     setSelected(day.dateString);
-  };
+  }, []);
 
   return (
     <CalendarList
-      testID={testIDs.horizontalList.CONTAINER}
+      current={INITIAL_DATE}
       markedDates={markedDates}
-      current={initialDate}
       pastScrollRange={24}
       futureScrollRange={24}
       horizontal
       pagingEnabled
       onDayPress={onDayPress}
+      testID={testIDs.horizontalList.CONTAINER}
+      staticHeader
     />
   );
 };

src/calendar/index.tsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
-import memoize from 'memoize-one';
 
 import React, {useRef, useState, useEffect, useCallback} from 'react';
 import {View, ViewStyle, StyleProp} from 'react-native';
@@ -113,9 +112,7 @@ const Calendar = (props: CalendarProps) => {
     const max = parseDate(maxDate);
 
     if (allowSelectionOutOfRange || !(min && !isGTE(day, min)) && !(max && !isLTE(day, max))) {
-      const shouldUpdateMonth = disableMonthChange === undefined || !disableMonthChange;
-
-      if (shouldUpdateMonth) {
+      if (!disableMonthChange) {
         updateMonth(day);
       }
       if (interaction) {
@@ -124,17 +121,27 @@ const Calendar = (props: CalendarProps) => {
     }
   };
 
-  const pressDay = useCallback((date?: DateData) => {
+  const onPressDay = useCallback((date?: DateData) => {
     if (date)
     handleDayInteraction(date, onDayPress);
-  }, [onDayPress]);
+  }, []);
 
-  const longPressDay = useCallback((date?: DateData) => {
+  const onLongPressDay = useCallback((date?: DateData) => {
     if (date)
     handleDayInteraction(date, onDayLongPress);
-  }, [onDayLongPress]);
+  }, []);
 
-  const onSwipe = (gestureName: string) => {
+  const onSwipeLeft = useCallback(() => {
+    // @ts-expect-error
+    header.current?.onPressRight();
+  }, [header]);
+
+  const onSwipeRight = useCallback(() => {
+    // @ts-expect-error
+    header.current?.onPressLeft();
+  }, [header]);
+
+  const onSwipe = useCallback((gestureName: string) => {
     const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
 
     switch (gestureName) {
@@ -148,19 +155,9 @@ const Calendar = (props: CalendarProps) => {
         onSwipeRight();
         break;
     }
-  };
-
-  const onSwipeLeft = () => {
-    // @ts-expect-error
-    header.current?.onPressRight();
-  };
+  }, [onSwipeLeft, onSwipeRight]);
 
-  const onSwipeRight = () => {
-    // @ts-expect-error
-    header.current?.onPressLeft();
-  };
-
-  const renderWeekNumber = memoize(weekNumber => {
+  const renderWeekNumber = (weekNumber: number) => {
     return (
       <View style={style.current.dayContainer} key={`week-container-${weekNumber}`}>
         <BasicDay
@@ -174,7 +171,7 @@ const Calendar = (props: CalendarProps) => {
         </BasicDay>
       </View>
     );
-  });
+  };
 
   const renderDay = (day: XDate, id: number) => {
     const dayProps = extractComponentProps(Day, props);
@@ -190,8 +187,8 @@ const Calendar = (props: CalendarProps) => {
           date={toMarkingFormat(day)}
           state={getState(day, currentMonth, props)}
           marking={markedDates?.[toMarkingFormat(day)]}
-          onPress={pressDay}
-          onLongPress={longPressDay}
+          onPress={onPressDay}
+          onLongPress={onLongPressDay}
         />
       </View>
     );
@@ -256,7 +253,9 @@ const Calendar = (props: CalendarProps) => {
   };
 
   const GestureComponent = enableSwipeMonths ? GestureRecognizer : View;
-  const swipeProps = {onSwipe: (direction: string) => onSwipe(direction)};
+  const swipeProps = {
+    onSwipe: (direction: string) => onSwipe(direction)
+  };
   const gestureProps = enableSwipeMonths ? swipeProps : undefined;
 
   return (