Added support for custom placeholder for CalendarList

ios/Podfile.lock

@@ -284,13 +284,13 @@ PODS:
     - React-jsi (= 0.68.3)
     - React-logger (= 0.68.3)
     - React-perflogger (= 0.68.3)
-  - ReactNativeNavigation (7.29.0):
+  - ReactNativeNavigation (7.29.1):
     - HMSegmentedControl
     - React-Core
     - React-RCTImage
     - React-RCTText
-    - ReactNativeNavigation/Core (= 7.29.0)
-  - ReactNativeNavigation/Core (7.29.0):
+    - ReactNativeNavigation/Core (= 7.29.1)
+  - ReactNativeNavigation/Core (7.29.1):
     - HMSegmentedControl
     - React-Core
     - React-RCTImage
@@ -437,7 +437,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: f41f116aad644973f24653effb3db3de64fa0314
   React-runtimeexecutor: 8cdd80915ed6dabf2221a689f1f7ddb50ea5e9f3
   ReactCommon: 5b1b43a7d81a1ac4eec85f7c4db3283a14a3b13d
-  ReactNativeNavigation: 3b09d0b7a64326dbcea7e64231287c766b18adf0
+  ReactNativeNavigation: f1c5b86f993758d0af2942ba9058a340166bef07
   Yoga: 2f6a78c58dcc2963bd8e34d96a4246d9dff2e3a7
 
 PODFILE CHECKSUM: 2ab7cf2d22a5f2660260e7b139556fed43c67f96

src/calendar-list/index.tsx

@@ -37,6 +37,8 @@ export interface CalendarListProps extends CalendarProps, Omit<FlatListProps<any
   showScrollIndicator?: boolean;
   /** Whether to animate the auto month scroll */
   animateScroll?: boolean;
+  /** Custom placeholder to be rendered while calendar is not visible. Especially useful when scrolling fast. If not provided, the default behaviour is to render a Text component with the datestring. */
+  renderPlaceholder?: (year: number, month: number) => React.ReactElement;
 }
 
 export interface CalendarListImperativeMethods {
@@ -79,6 +81,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     animateScroll = false,
     showScrollIndicator = false,
     staticHeader,
+    renderPlaceholder,
     /** View props */
     testID,
     style: propsStyle,
@@ -239,6 +242,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
         calendarHeight={calendarHeight}
         scrollToMonth={scrollToMonth}
         visible={isDateInRange(item)}
+        renderPlaceholder={renderPlaceholder}
       />
     );
   }, [horizontal, calendarStyle, calendarWidth, testID, getMarkedDatesForItem, isDateInRange, calendarProps]);

src/calendar-list/item.tsx

@@ -1,6 +1,6 @@
 import XDate from 'xdate';
 import React, {useRef, useMemo, useContext, useCallback} from 'react';
-import {Text} from 'react-native';
+import {Text, View} from 'react-native';
 import {Theme} from '../types';
 import {toMarkingFormat} from '../interface';
 import {extractCalendarProps} from '../componentUpdater';
@@ -9,13 +9,14 @@ import Calendar, {CalendarProps} from '../calendar';
 import CalendarContext from '../expandableCalendar/Context';
 
 export type CalendarListItemProps = CalendarProps & {
-  item: any;
+  item: XDate;
   calendarWidth?: number;
   calendarHeight?: number;
   horizontal?: boolean;
   theme?: Theme;
   scrollToMonth?: (date: XDate) => void;
   visible?: boolean;
+  renderPlaceholder?: (year: number, month: number) => React.ReactElement;
 };
 
 const CalendarListItem = React.memo((props: CalendarListItemProps) => {  
@@ -30,7 +31,8 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => {
     headerStyle,
     onPressArrowLeft,
     onPressArrowRight,
-    visible
+    visible,
+    renderPlaceholder,
   } = props;
   const context = useContext(CalendarContext);
 
@@ -84,9 +86,13 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => {
   }, [onPressArrowRight, scrollToMonth]);
 
   if (!visible) {
-    return (
-      <Text style={textStyle}>{dateString}</Text>
-    );
+    if (renderPlaceholder) {
+      const year = item.getFullYear();
+      const month = item.getMonth();
+      return <View style={calendarStyle}>{renderPlaceholder(year, month)}</View>;
+    }
+
+    return <Text style={textStyle}>{dateString}</Text>;
   }
 
   return (