[Suggestion] Android scroll issue when nested in animated view (bottomsheet, etc)

[jonesaustindev]

Hi! 👋

Firstly, thanks for your work on this project!

Today I used patch-package to patch [email protected] for the project I'm working on.

The issue I was seeing is that Android would not register the scroll events on Android for the CalendarList when it was nested in an animated view. The specific use case was using react-native-renanimated with a pangesture handler around the CalendarList. This would interfere and not allow for scrolling. iOS would work fine either way. Using FlatList from react-native-gesture-handler fixed my issue and seemed to work fine on both platforms.

Also seems other users see the same thing #1788

Here is the diff that solved my problem:

// CalendarList

 import PropTypes from 'prop-types';
 import XDate from 'xdate';
 import React, { Component } from 'react';
-import { FlatList, Platform, Dimensions, View } from 'react-native';
+import { Platform, Dimensions, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import { extractComponentProps } from '../componentUpdater';
 import { xdateToData, parseDate } from '../interface';
 import { page, sameDate } from '../dateutils';

This issue body was partially generated by patch-package.

[BuniEmris]

did not lhelp

[BuniEmris]

Scrolling calendar days horizontal work fine in IOS but android didn`t work after changing import of FlatList to gesthandler also

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Villar74]

Wrap App.tsx in <GestureHandlerRootView style={{ flex: 1 }}> and fix react-native-calendars calendarlist with flatlist import:

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 f8943de..40afd02 100644
--- a/node_modules/react-native-calendars/src/calendar-list/index.js
+++ b/node_modules/react-native-calendars/src/calendar-list/index.js
@@ -2,7 +2,8 @@ import findIndex from 'lodash/findIndex';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
 import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { FlatList, View } from 'react-native';
+import { View } from 'react-native';
+import { FlatList } from "react-native-gesture-handler";
 import { extractHeaderProps, extractCalendarProps } from '../componentUpdater';
 import { xdateToData, parseDate, toMarkingFormat } from '../interface';
 import { page, sameDate, sameMonth } from '../dateutils';