UI lags when rendering a lot of calendars in CalendarList

[andresmartinezstay]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-calendars@1.1303.0 for the project I'm working on.

It would be useful to expose the windowSize prop from FlatList so when rendering a lot of calendars the UI responsiveness is not affected. Right now with the default window size the UI lags like 3 seconds when rendering a list of 24 calendars and pressing a day

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-calendars/src/calendar-list/index.js b/node_modules/react-native-calendars/src/calendar-list/index.js
index e0449bc..56cca47 100644
--- a/node_modules/react-native-calendars/src/calendar-list/index.js
+++ b/node_modules/react-native-calendars/src/calendar-list/index.js
@@ -43,7 +43,7 @@ const CalendarList = (props, ref) => {
     /** ScrollView props */
     horizontal = false, pagingEnabled, scrollEnabled = true, nestedScrollEnabled = true, scrollsToTop = false, keyExtractor = (_, index) => String(index), keyboardShouldPersistTaps, onScrollBeginDrag, onScrollEndDrag, onMomentumScrollBegin, onMomentumScrollEnd, 
     /** FlatList props */
-    onEndReachedThreshold, onEndReached } = props;
+    windowSize, onEndReachedThreshold, onEndReached } = props;
     const calendarProps = extractCalendarProps(props);
     const headerProps = extractHeaderProps(props);
     const calendarSize = horizontal ? calendarWidth : calendarHeight;
@@ -196,7 +196,7 @@ const CalendarList = (props, ref) => {
     return (<View style={style.current.flatListContainer} testID={testID}>
       <FlatList 
     // @ts-expect-error
-    ref={list} windowSize={shouldUseAndroidRTLFix ? pastScrollRange + futureScrollRange + 1 : undefined} style={listStyle} showsVerticalScrollIndicator={showScrollIndicator} showsHorizontalScrollIndicator={showScrollIndicator} data={items} renderItem={renderItem} getItemLayout={getItemLayout} initialNumToRender={range.current} initialScrollIndex={initialDateIndex} viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current} testID={`${testID}.list`} onLayout={onLayout} removeClippedSubviews={removeClippedSubviews} pagingEnabled={pagingEnabled} scrollEnabled={scrollEnabled} scrollsToTop={scrollsToTop} horizontal={horizontal} keyboardShouldPersistTaps={keyboardShouldPersistTaps} keyExtractor={keyExtractor} onEndReachedThreshold={onEndReachedThreshold} onEndReached={onEndReached} nestedScrollEnabled={nestedScrollEnabled} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag}/>
+    ref={list} windowSize={windowSize ?? (shouldUseAndroidRTLFix ? pastScrollRange + futureScrollRange + 1 : undefined)} style={listStyle} showsVerticalScrollIndicator={showScrollIndicator} showsHorizontalScrollIndicator={showScrollIndicator} data={items} renderItem={renderItem} getItemLayout={getItemLayout} initialNumToRender={range.current} initialScrollIndex={initialDateIndex} viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current} testID={`${testID}.list`} onLayout={onLayout} removeClippedSubviews={removeClippedSubviews} pagingEnabled={pagingEnabled} scrollEnabled={scrollEnabled} scrollsToTop={scrollsToTop} horizontal={horizontal} keyboardShouldPersistTaps={keyboardShouldPersistTaps} keyExtractor={keyExtractor} onEndReachedThreshold={onEndReachedThreshold} onEndReached={onEndReached} nestedScrollEnabled={nestedScrollEnabled} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onScrollBeginDrag={onScrollBeginDrag} onScrollEndDrag={onScrollEndDrag}/>
       {renderStaticHeader()}
     </View>);
 };
@@ -220,5 +220,6 @@ CalendarList.propTypes = {
     keyExtractor: PropTypes.func,
     onEndReachedThreshold: PropTypes.number,
     onEndReached: PropTypes.func,
+    windowSize: PropTypes.number,
     nestedScrollEnabled: PropTypes.bool
 };

This issue body was partially generated by patch-package.

[sleekLancelot]

It still lags for me(3s or so delay), i had to use the focus event to make the list render only when the screen is focused.