The calendar is not clickable in months that are not displayed in the first rendering

[mtsymlov]

Current behaviour

1. Open the calendar.
2. Calendar has 12 months, December is opened by default.
3. Scroll up to earlier months, January.
4. Click on the day.
5. The day is unclickable. Sometimes it works okay, but onPress handler is cached from first render. I didn't catch why it works intermittently: yesterday it worked, today doesn't work.
6. Tested on different real devices.

Expected behaviour

1. Open the calendar.
2. Scroll up to earlier months.
3. Click on the day.
4. The day is clickable, the user can set period.

Code sample

  const { contentContainerStyles, initialStartDate, initialEndDate, onChange } = props

  const [startDate, setStartDate] = useState<CalendarDate>(initialStartDate)
  const [endDate, setEndDate] = useState<CalendarDate>(initialEndDate)
  const [pressedDate, setPressedDate] = useState<Date | undefined>()

  useEffect(() => {
    if (pressedDate) {
      const datestamp = Utils.Date.toDatestampFromDate(pressedDate)

      if (startDate && endDate) {
        if (startDate === endDate && startDate === datestamp) {
          setStartDate(undefined)
          setEndDate(undefined)
          onChange(undefined, undefined)
        } else {
          setStartDate(datestamp)
          setEndDate(undefined)
          onChange(datestamp, undefined)
        }
      } else if (startDate && !endDate) {
        if (startDate > datestamp) {
          setEndDate(startDate)
          setStartDate(datestamp)
          onChange(datestamp, startDate)
        } else if (startDate === datestamp) {
          setStartDate(undefined)
          onChange(undefined, endDate)
        } else {
          setEndDate(datestamp)
          onChange(startDate, datestamp)
        }
      } else if (!startDate && !endDate) {
        setStartDate(datestamp)
        onChange(datestamp, endDate)
      }

      setPressedDate(undefined)
    }
  }, [endDate, onChange, pressedDate, startDate])


<Calendar
  disableOffsetDays={true}
  monthHeight={MONTH_HEIGHT}
  firstDayMonday={true}
  startingMonth={'2023-01-01'}
  numberOfMonths={100}
  showsVerticalScrollIndicator={false}
  onPress={setPressedDate}
  startDate={startDate ? new Date(startDate) : undefined}
   endDate={endDate ? new Date(endDate) : undefined}
  contentContainerStyle={containerStyles}
   theme={THEME}
/>

Screencast

IMG_4933.MOV

On video I pressed days in January, they aren't clickable. The days in April is clickable.

Your Environment

"react-native-calendario": "3.5.0"

react-native info output:

System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 421.84 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
    Watchman: 2023.10.30.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: Hedgehog 2023.1.1 Hedgehog 2023.1.1
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.8 => 0.71.8
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[mtsymlov]

If you remove removeClippedSubviews prop from FlatList in /node_modules/react-native-calendario/src/components/Calendar.tsx module, it fixes the incorrect behaviour.

diff --git a/node_modules/react-native-calendario/src/components/Calendar.tsx b/node_modules/react-native-calendario/src/components/Calendar.tsx
index db580d4..5795cfc 100644
--- a/node_modules/react-native-calendario/src/components/Calendar.tsx
+++ b/node_modules/react-native-calendario/src/components/Calendar.tsx
@@ -290,7 +290,6 @@ const Calendario = forwardRef<FlatList, CalendarProps>((props, ref) => {
           ? firstMonthIndex
           : 0
       }
-      removeClippedSubviews
       initialNumToRender={
         calculateMonthHeightDynamically && firstMonthIndex !== 0
           ? months.length

[maggialejandro]

I couldn't reproduce it, but I think we could add removeClippedSubviews as a prop and set it to true as default.

Simulator.Screen.Recording.-.iPhone.14.-.2023-12-15.at.13.50.59.mp4

[maggialejandro]

Closing this as I couldn't reproduce the issue. Feel free to open a new issue