Android RTL fix for RN73 and above (#2631)

* CalendarList and WeekCalendar - fix android rtl issue for RN73 and above.
InfinitList and TimelineList - fix memo and deps

* asCalendarConsumer - fix import

* fix undefined error

Author: Inbal-Tish

src/calendar-list/index.tsx

@@ -1,10 +1,8 @@
 import findIndex from 'lodash/findIndex';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
-
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {FlatList, FlatListProps, View, ViewStyle} from 'react-native';
-
 import {extractCalendarProps, extractHeaderProps} from '../componentUpdater';
 import {parseDate, toMarkingFormat, xdateToData} from '../interface';
 import {page, sameDate, sameMonth} from '../dateutils';
@@ -112,7 +110,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
 
   const [currentMonth, setCurrentMonth] = useState(parseDate(current));
 
-  const shouldUseAndroidRTLFix = useMemo(() => constants.isAndroidRTL && horizontal, [horizontal]);
+  const shouldFixRTL = useMemo(() => !constants.isRN73() && constants.isAndroidRTL && horizontal, [horizontal]);
   /**
    * we render a lot of months in the calendar list and we need to measure the header only once
    * so we use this ref to limit the header measurement to the first render
@@ -194,12 +192,12 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
   const scrollToMonth = useCallback((date: XDate | string) => {
     const scrollTo = parseDate(date);
     const diffMonths = Math.round(initialDate?.current?.clone().setDate(1).diffMonths(scrollTo?.clone().setDate(1)));
-    const scrollAmount = calendarSize * (shouldUseAndroidRTLFix ? pastScrollRange - diffMonths : pastScrollRange + diffMonths);
+    const scrollAmount = calendarSize * (shouldFixRTL ? pastScrollRange - diffMonths : pastScrollRange + diffMonths);
 
     if (scrollAmount !== 0) {
       list?.current?.scrollToOffset({offset: scrollAmount, animated: animateScroll});
     }
-  }, [calendarSize, shouldUseAndroidRTLFix, pastScrollRange, animateScroll]);
+  }, [calendarSize, shouldFixRTL, pastScrollRange, animateScroll]);
 
   const addMonth = useCallback((count: number) => {
     const day = currentMonth?.clone().addMonths(count, true);
@@ -289,7 +287,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
 
   const onViewableItemsChanged = useCallback(({viewableItems}: any) => {
     const newVisibleMonth = parseDate(viewableItems[0]?.item);
-    if (shouldUseAndroidRTLFix) {
+    if (shouldFixRTL) {
       const centerIndex = items.findIndex((item) => isEqual(parseDate(current), item));
       const adjustedOffset = centerIndex - items.findIndex((item) => isEqual(newVisibleMonth, item));
       visibleMonth.current = items[centerIndex + adjustedOffset];
@@ -300,7 +298,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
         setCurrentMonth(visibleMonth.current);
       }
     }
-  }, [items, shouldUseAndroidRTLFix, current]);
+  }, [items, shouldFixRTL, current]);
 
   const viewabilityConfigCallbackPairs = useRef([
     {
@@ -313,7 +311,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     <View style={style.current.flatListContainer} testID={testID}>
       <FlatList
         ref={list}
-        windowSize={shouldUseAndroidRTLFix ? pastScrollRange + futureScrollRange + 1 : undefined}
+        windowSize={shouldFixRTL ? pastScrollRange + futureScrollRange + 1 : undefined}
         style={listStyle}
         showsVerticalScrollIndicator={showScrollIndicator}
         showsHorizontalScrollIndicator={showScrollIndicator}

src/commons/constants.ts

@@ -8,7 +8,7 @@ const isIOS = Platform.OS === 'ios';
 const screenAspectRatio = screenWidth < screenHeight ? screenHeight / screenWidth : screenWidth / screenHeight;
 const isTablet = (Platform as PlatformIOSStatic).isPad || (screenAspectRatio < 1.6 && Math.max(screenWidth, screenHeight) >= 900);
 const isAndroidRTL = isAndroid && isRTL;
-const isRN73 = () => Platform.constants.reactNativeVersion.minor >= 73;
+const isRN73 = () => Platform.constants.reactNativeVersion?.minor >= 73;
 
 export default {
   screenWidth,

src/expandableCalendar/Context/asCalendarConsumer.tsx

@@ -1,6 +1,6 @@
 import React, {Component, Ref} from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
-import CalendarContext from '.';
+import CalendarContext from './index';
 
 
 function asCalendarConsumer<PROPS>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS> {

src/expandableCalendar/WeekCalendar/index.tsx

@@ -1,8 +1,6 @@
 import XDate from 'xdate';
-
 import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {FlatList, View, ViewToken} from 'react-native';
-
 import {sameWeek, onSameDateRange, getWeekDates} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import {DateData, MarkedDates} from '../../types';
@@ -50,6 +48,8 @@ const WeekCalendar = (props: WeekCalendarProps) => {
   const list = useRef<FlatList>(null);
   const currentIndex = useRef(NUMBER_OF_PAGES);
 
+  const shouldFixRTL = useMemo(() => !constants.isRN73() && constants.isAndroidRTL, []);
+
   useDidUpdate(() => {
     items.current = getDatesArray(date, firstDay, numberOfDays);
     setListData(items.current);
@@ -69,7 +69,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
           }) :
           sameWeek(item, date, firstDay));
       if (pageIndex !== currentIndex.current) {
-        const adjustedIndexFrScroll = (constants.isAndroidRTL && !constants.isRN73()) ? NUM_OF_ITEMS - 1 - pageIndex : pageIndex;
+        const adjustedIndexFrScroll = shouldFixRTL ? NUM_OF_ITEMS - 1 - pageIndex : pageIndex;
         if (pageIndex >= 0) {
           visibleWeek.current = items.current[adjustedIndexFrScroll];
           currentIndex.current = adjustedIndexFrScroll;
@@ -80,7 +80,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
         pageIndex <= 0 ? onEndReached() : list?.current?.scrollToIndex({index: adjustedIndexFrScroll, animated: false});
       }
     }
-  }, [date, updateSource]);
+  }, [date, updateSource, shouldFixRTL]);
 
   const containerWidth = useMemo(() => {
     return calendarWidth ?? constants.screenWidth;
@@ -179,7 +179,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     const currItems = items.current;
     const newDate = viewableItems[0]?.item;
     if (newDate !== visibleWeek.current) {
-      if (constants.isAndroidRTL) {
+      if (shouldFixRTL) {
         //in android RTL the item we see is the one in the opposite direction
         const newDateOffset = -1 * (NUMBER_OF_PAGES - currItems.indexOf(newDate));
         const adjustedNewDate = currItems[NUMBER_OF_PAGES - newDateOffset];
@@ -198,7 +198,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
         }
       }
     }
-  }, [onEndReached]);
+  }, [onEndReached, shouldFixRTL]);
 
   const viewabilityConfigCallbackPairs = useRef([{
       viewabilityConfig: {

src/infinite-list/index.tsx

@@ -1,11 +1,9 @@
 import inRange from 'lodash/inRange';
 import debounce from 'lodash/debounce';
 import noop from 'lodash/noop';
-
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {ScrollViewProps} from 'react-native';
 import {DataProvider, LayoutProvider, RecyclerListView, RecyclerListViewProps} from 'recyclerlistview';
-
 import constants from '../commons/constants';
 import {useCombinedRefs} from '../hooks';
 
@@ -70,10 +68,10 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       }
     )
   );
-
+  
   const shouldFixRTL = useMemo(() => {
     return isHorizontal && constants.isRTL && (constants.isRN73() || constants.isAndroid);
-  }, []);
+  }, [isHorizontal]);
 
   const listRef = useCombinedRefs(ref);
   const pageIndex = useRef<number>();
@@ -93,7 +91,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       // @ts-expect-error
       listRef.current?.scrollToOffset?.(x, y, false);
     }, 0);
-  }, [data, disableScrollOnDataChange]);
+  }, [data, disableScrollOnDataChange, isHorizontal]);
 
   const _onScroll = useCallback(
     (event, offsetX, offsetY) => {
@@ -133,7 +131,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
 
       onScroll?.(event, offsetX, offsetY);
     },
-    [onScroll, onPageChange, data.length, reloadPagesDebounce]
+    [onScroll, onPageChange, data.length, reloadPagesDebounce, isHorizontal, shouldFixRTL]
   );
 
   const onMomentumScrollEnd = useCallback(

src/timeline-list/index.tsx

@@ -1,9 +1,7 @@
 import throttle from 'lodash/throttle';
 import flatten from 'lodash/flatten';
 import dropRight from 'lodash/dropRight';
-
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-
 import {isToday, generateDay} from '../dateutils';
 import InfiniteList from '../infinite-list';
 import Context from '../expandableCalendar/Context';
@@ -53,7 +51,7 @@ export interface TimelineListProps {
 
 const TimelineList = (props: TimelineListProps) => {
   const {timelineProps, events, renderItem, showNowIndicator, scrollToFirst, scrollToNow, initialTime} = props;
-  const shouldFixRTL = constants.isRTL && (constants.isRN73() || constants.isAndroid); // isHorizontal = true
+  const shouldFixRTL = useMemo(() => constants.isRTL && (constants.isRN73() || constants.isAndroid), []); // isHorizontal = true
   const {date, updateSource, setDate, numberOfDays = 1, timelineLeftInset} = useContext(Context);
   const listRef = useRef<any>();
   const prevDate = useRef(date);
@@ -75,7 +73,9 @@ const TimelineList = (props: TimelineListProps) => {
     prevDate.current = date;
   }, [updateSource]);
 
-  const initialOffset = useMemo(() => shouldFixRTL ? constants.screenWidth * (PAGES_COUNT - INITIAL_PAGE - 1) : constants.screenWidth * INITIAL_PAGE, []);
+  const initialOffset = useMemo(() => {
+    return shouldFixRTL ? constants.screenWidth * (PAGES_COUNT - INITIAL_PAGE - 1) : constants.screenWidth * INITIAL_PAGE;
+  }, [shouldFixRTL]);
 
   useEffect(() => {
     if (date !== prevDate.current) {
@@ -102,7 +102,7 @@ const TimelineList = (props: TimelineListProps) => {
         setDate(newDate, UpdateSources.LIST_DRAG);
       }
     }, 0),
-    [pages]
+    [pages, shouldFixRTL]
   );
 
   const onReachNearEdge = useCallback(() => {