TimelineList - fix for RTL under RN73 (#2598)

Author: Inbal-Tish

example/src/app.tsx

@@ -29,20 +29,40 @@ LocaleConfig.locales['en'] = {
   monthNamesShort: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
   dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
   dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-  // numbers: ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'] // number localization example
+  // numbers: ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'] // <--- number localization example
 };
-LocaleConfig.defaultLocale = 'en';
 
-/*
 LocaleConfig.locales['fr'] = {
   monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
   monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
   dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
   dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
   today: 'Aujourd\'hui'
 };
-LocaleConfig.defaultLocale = 'fr';
-*/
+
+LocaleConfig.locales['he'] = {
+  formatAccessibilityLabel: "dddd d 'of' MMMM 'of' yyyy",
+  monthNames: [
+    'ינואר',
+    'פברואר',
+    'מרץ',
+    'אפריל',
+    'מאי',
+    'יוני',
+    'יולי',
+    'אוגוסט',
+    'ספטמבר',
+    'אוקטובר',
+    'נובמבר',
+    'דצמבר'
+  ],
+  monthNamesShort: ['ינו', 'פבר', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
+  dayNames: ['ראון', 'שני', 'שלישי', 'קביעי', 'חמישי', 'שישי', 'שבת'],
+  dayNamesShort: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
+};
+
+LocaleConfig.defaultLocale = 'en';
+
 
 Navigation.events().registerAppLaunchedListener(() => {
   Navigation.setRoot({

src/infinite-list/index.tsx

@@ -70,8 +70,9 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       }
     )
   );
-  const shouldUseAndroidRTLFix = useMemo(() => {
-    return constants.isAndroidRTL && isHorizontal;
+
+  const shouldFixRTL = useMemo(() => {
+    return isHorizontal && constants.isRTL && (constants.isRN73() || constants.isAndroid);
   }, []);
 
   const listRef = useCombinedRefs(ref);
@@ -87,7 +88,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
     }
 
     setTimeout(() => {
-      const x = isHorizontal ? constants.isAndroidRTL ? Math.floor(data.length / 2) + 1 : Math.floor(data.length / 2) * pageWidth : 0;
+      const x = isHorizontal ? shouldFixRTL ? Math.floor(data.length / 2) + 1 : Math.floor(data.length / 2) * pageWidth : 0;
       const y = isHorizontal ? 0 : positionIndex * pageHeight;
       // @ts-expect-error
       listRef.current?.scrollToOffset?.(x, y, false);
@@ -100,7 +101,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
 
       const contentOffset = event.nativeEvent.contentOffset;
       const y = contentOffset.y;
-      const x = shouldUseAndroidRTLFix ? (pageWidth * data.length - contentOffset.x) : contentOffset.x;
+      const x = shouldFixRTL ? (pageWidth * data.length - contentOffset.x) : contentOffset.x;
       const newPageIndex = Math.round(isHorizontal ? x / pageWidth : y / pageHeight);
       if (pageIndex.current !== newPageIndex) {
         if (pageIndex.current !== undefined) {
@@ -175,7 +176,6 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       // @ts-expect-error
       ref={listRef}
       isHorizontal={isHorizontal}
-      disableRecycling={shouldUseAndroidRTLFix}
       rowRenderer={renderItem}
       dataProvider={dataProvider}
       layoutProvider={layoutProvider ?? _layoutProvider.current}

src/timeline-list/index.tsx

@@ -53,13 +53,14 @@ 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 {date, updateSource, setDate, numberOfDays = 1, timelineLeftInset} = useContext(Context);
   const listRef = useRef<any>();
   const prevDate = useRef(date);
   const [timelineOffset, setTimelineOffset] = useState();
 
   const {pages, pagesRef, resetPages, resetPagesDebounce, scrollToPageDebounce, shouldResetPages, isOutOfRange} =
-    useTimelinePages({date, listRef, numberOfDays});
+    useTimelinePages({date, listRef, numberOfDays, shouldFixRTL});
 
   const scrollToCurrentDate = useCallback((date: string) => {
     const datePageIndex = pagesRef.current.indexOf(date);
@@ -74,8 +75,7 @@ const TimelineList = (props: TimelineListProps) => {
     prevDate.current = date;
   }, [updateSource]);
 
-  const initialOffset = useMemo(() =>
-  constants.isAndroidRTL ? constants.screenWidth * (PAGES_COUNT - INITIAL_PAGE - 1) : constants.screenWidth * INITIAL_PAGE, []);
+  const initialOffset = useMemo(() => shouldFixRTL ? constants.screenWidth * (PAGES_COUNT - INITIAL_PAGE - 1) : constants.screenWidth * INITIAL_PAGE, []);
 
   useEffect(() => {
     if (date !== prevDate.current) {
@@ -97,7 +97,7 @@ const TimelineList = (props: TimelineListProps) => {
 
   const onPageChange = useCallback(
     throttle((pageIndex: number) => {
-      const newDate = pages[constants.isAndroidRTL ? pageIndex - 1 : pageIndex];
+      const newDate = pages[shouldFixRTL ? pageIndex - 1 : pageIndex];
       if (newDate !== prevDate.current) {
         setDate(newDate, UpdateSources.LIST_DRAG);
       }

src/timeline-list/useTimelinePages.ts

@@ -15,9 +15,10 @@ interface UseTimelinePagesProps {
   date: string;
   listRef: RefObject<any>;
   numberOfDays: number;
+  shouldFixRTL: boolean;
 }
 
-const UseTimelinePages = ({date, listRef, numberOfDays}: UseTimelinePagesProps) => {
+const UseTimelinePages = ({date, listRef, numberOfDays, shouldFixRTL}: UseTimelinePagesProps) => {
   const pagesRef = useRef(
     times(PAGES_COUNT, i => {
       return generateDay(date, numberOfDays * (i - Math.floor(PAGES_COUNT / 2)));
@@ -48,7 +49,7 @@ const UseTimelinePages = ({date, listRef, numberOfDays}: UseTimelinePagesProps)
   }, []);
 
   const scrollToPage = (pageIndex: number) => {
-    listRef.current?.scrollToOffset(constants.isAndroidRTL ? ((PAGES_COUNT - 1 - pageIndex) * constants.screenWidth) : (pageIndex * constants.screenWidth), 0, false);
+    listRef.current?.scrollToOffset(shouldFixRTL ? ((PAGES_COUNT - 1 - pageIndex) * constants.screenWidth) : (pageIndex * constants.screenWidth), 0, false);
   };
 
   const resetPages = (date: string) => {