wix
RTL breaks the scrolling in the WeekCalendar component
Description
Our App supports Arabic. To do that, we use ReactNatives RTL feature. When RTL is activated, selecting a date in a week that is different from the week of the selected date, causes the FlatList to scroll in the opposite direction. The responsible code is here:
// node_modules/react-native-calendars/src/expandableCalendar/WeekCalendar/new.js useEffect(() => { if (updateSource !== UpdateSources.WEEK_SCROLL) { const pageIndex = items.findIndex(item => sameWeek(item, date, firstDay)); // @ts-expect-error list.current?.scrollToOffset?.(pageIndex * containerWidth, 0, false); } }, [date]);
If I remove this, everything works as expected.
Expected Behavior
When I select a date in the week calendar, the WeekCalendar component should not scroll at all (because the date I selected is already in View).
Observed Behavior
The Week calendar scrolls in the opposite direction.
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 - ├─┬ @expo/[email protected] │ └── [email protected] deduped ├─┬ @miblanchard/[email protected] │ └── [email protected] deduped ├─┬ @react-native-async-storage/[email protected] │ └── [email protected] deduped ├─┬ @react-native-community/[email protected] │ └── [email protected] deduped ├─┬ @react-native-masked-view/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @react-navigation/[email protected] │ └── [email protected] deduped ├─┬ @sharcoux/[email protected] │ └── [email protected] deduped ├─┬ @testing-library/[email protected] │ └── [email protected] deduped ├─┬ @testing-library/[email protected] │ └── [email protected] deduped ├─┬ @types/[email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └─┬ @react-native/[email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] invalid: "^6.2.1||^7.0.3" from node_modules/react-native-svg-charts │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └─┬ @react-native/[email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped ├─┬ [email protected] │ └── [email protected] deduped └─┬ [email protected] └── [email protected] deduped
Also specify:
I am on Android, physical device
https://github.com/user-attachments/assets/007f2649-baa4-4cdb-a0a4-1bfcd407e5a9
