How do I remove the month dates when scrolling fast?

[victorxtsai]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

I'm using CalendarList and when I scroll fast, I see the month on the left side (as opposed to the middle) making the calendar look low quality. I've tried many different solutions, including snap scroll, but then my last month doesn't appear fully on the screen. I don't mind slowing down the scroll speed, but doesn't seem like there's a way to do that. I just want it to look quality / professional.

Expected Behavior

To not see the month headers pop up on the left if I scroll fast.

Observed Behavior

What actually happened when you performed the above actions?

If there's an error message, please paste the full terminal output and error message in this code block:

Error text goes here!

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: [email protected]
• npm ls react-native: [email protected]

Also specify:

1. Device/emulator/simulator & OS version:

Reproducible Demo

My CalendarList settings:

         <CalendarList
            ref={calendarRef}
            key={`${currentDateAnchor}`} // This ensures CalendarList re-renders with each year change - seems like a hacky way to force re-render but it works
            current={currentDateAnchor} // Initially show calendar at today's date on first render - i think this affects the first month the calendar will show and the anchor for the past and future scroll range
            pastScrollRange={numberOfPriorMonthsToShow} // how many months prior to "current" can you scroll
            futureScrollRange={numberOfPostMonthsToShow} // how many months forward to "current" can you scroll
            // scrollEventThrottle={100} // Adjust throttle for better performance (16ms = 60FPS), higher scross slower -- doesnt' seem to do anything
            // disableVirtualization={true} // try to render everhtying - may cause app to be slow...
            // pagingEnabled={true} 
            // windowSize={50}
            scrollEnabled={true} // A boolean that determines if the user can scroll through the calendar.
            showScrollIndicator={false} // false removes scroll bar
            horizontal={false} // false means scrolls vertically thru months
            minDate={minSelectedDate} // min valid date you can select
            maxDate={maxSelectedDate} // max valid date you can select
            hideExtraDays={true} // hide dates from the previous month or future month on the current month, ie. 8/1/2025 is a fri, do we show numbers for the thur, wed prior etc..
            showWeekNumbers={false} // shows the week of the year on the left of the calendar
            
            onDayPress={onDayPress}

            // markedDates={markedDates} // set up with dates to change color
            markingType={'custom'}  // Use 'custom' marking type for full control -- seems like i need this so i can use my custom marked dates below
            markedDates={{
              // Mark a date with a custom circle, multiple dots, custom text, and custom text color
              '2024-12-18': {
                customStyles: {
                  container: {
                    backgroundColor: DefaultObjectColors.secondary,  // Custom circle color
                    borderRadius: 10,  // , changes the rounded corners 50 is full circie
                    padding: 0,  // Optional: padding inside the circle
                  },
                  text: {
                    color: 'white',  // Custom text color inside the circle
                    fontWeight: 'bold',  // Bold text inside the circle
                    // fontSize: 16,  // Font size of the text
                  },
                },
                marked: true,
                dots: [
                  { key: 'dot1', color: 'red', selectedDotColor: 'red' },  // First dot color
                  { key: 'dot2', color: 'green', selectedDotColor: 'green' },  // Second dot color
                  { key: 'dot3', color: 'yellow', selectedDotColor: 'yellow' },  // Third dot color      
                  ],
                },
              }}
              // calendar theme options
              theme={{
                backgroundColor: 'transparent', // Makes the calendar background transparent
                calendarBackground: 'transparent', // Ensures the actual calendar grid is transparent too
                // borderColor: 'black' // Sets the border color around the calendar.
                // borderWidth: 1 // Sets the border width to 1.
                
                // dates
                // textDayFontFamily: 'Helvetica', // Sets the font family of day numbers to Helvetica.
                // textDayFontSize: 16, // Sets the font size of the day numbers to 16.
                // textDayFontWeight: '300', // Sets the font weight of day numbers to 300 (light).
                dayTextColor: DefaultColors.darkGray_001, // the color of the days/dates
                todayTextColor: DefaultColors.darkGray_001, //todays color/date
                selectedDayBackgroundColor: DefaultColors.darkSalmon_001,
                selectedDayTextColor: '#ffffff',
                textDisabledColor: DefaultColors.lightGray_001, // color of disabled dates
                
                // day header
                //textDayHeaderFontFamily: 'Helvetica',  // Sets the font family for day headers.
                //textDayHeaderFontSize: 12, // Sets the font size for day headers.
                //textDayHeaderFontWeight: '500', // Sets the font weight of day headers to medium.
                textSectionTitleColor: 'black', // Adjust the color of the day headers
  
                // month header
                // textMonthFontFamily: 'Arial', // Sets the font family of the month/year title.
                textMonthFontSize: 20, // Increase this to make the month/year title larger
                textMonthFontWeight: 'bold', // Make the month/year title bold
                // monthTextColor: 'blue', // Sets the month/year title color to blue.
  
                dotColor: 'red', // Sets the dot color for marked days to red.
                selectedDotColor: 'blue', // Sets the dot color for events on the selected day to blue.
  
              }}
            />

Screenshots

[srrmstk]

Hey @victorxtsai!
As a workaround I can suggest changing the following line in node_modules/react-native-calendars/src/calendar-list/item.js

if (!visible) {
  return (<Text style={textStyle}>{dateString}</Text>); // <- change to anything you want, but keep styles in place
}

E.g. I use

if (!visible) {
  return (<ActivityIndicator style={textStyle} size="large" />);
}

After that make sure to use patch-package to create your patch