fix(rtl): fixed render element when languages is right to left

[Matergi]

Only for Android when the device is in RTL language and is in horizontal mode the items not rendering

[Matergi]

resolve: #502 #322

[fai9al7dad]

thanks tried it on dist.. this did fix the bug

please merge it if everything is good

[demedos]

+1. @naqvitalha can this be merged?

[bestori]

Works great for me, recommend merge

[bestori]

@Matergi don't forger to rebase with main..! :)

[Matergi]

@bestori rebase done feel free to merge

[Budaa]

@Matergi Are there any prerequisites for it to work? Do I need to set any other props on the list, apart from horizontal?
I'm trying it on the FlashList and it doesn't help unfortunately. It only renders the first and last element of the list and has blank space in between.

[bestori]

@Matergi Are there any prerequisites for it to work? Do I need to set any other props on the list, apart from horizontal? I'm trying it on the FlashList and it doesn't help unfortunately. It only renders the first and last element of the list and has blank space in between.

@Budaa can you share non-working code sample?

@Matergi once we have this sorted out I will continue. Thank you!

[1nspir3d]

@Matergi Are there any prerequisites for it to work? Do I need to set any other props on the list, apart from horizontal? I'm trying it on the FlashList and it doesn't help unfortunately. It only renders the first and last element of the list and has blank space in between.

how about min reproduce repo/snack?

[1nspir3d]

@Budaa @bestori I can confirm that this fix is indeed fixes a problem with horizontal RTL list. Just tried it out on my project and everything seems to work fine.

However, I had to apply this fix directly into recyclerlistview/dist/reactnative/core/VirtualRenderer.js. Applying this to recyclerlistview/src/core/VirtualRenderer.ts has no effect whatsoever.

Are there any additional steps required when you apply this fix to recyclerlistview/src/core/VirtualRenderer.ts?

[Budaa]

@1nspir3d @bestori
My team managed to fix the issue on FlashList by applying 2 patches to rlv and one to FlashList and then editing rendering of FlashList for RTL

const PATCHES = [
  // https://github.com/Flipkart/recyclerlistview/pull/629/files - Fixes RTL for FlashList
  {
    filePath:
      "../node_modules/@shopify/flash-list/node_modules/recyclerlistview/dist/reactnative/core/VirtualRenderer.js",
    operation: insertAtInFile,
    args: {
      lineNumber: 9,
      content: `var react_native_1 = require("react-native");`,
    },
  },
  {
    filePath:
      "../node_modules/@shopify/flash-list/node_modules/recyclerlistview/dist/reactnative/core/VirtualRenderer.js",
    operation: insertAtInFile,
    args: {
      lineNumber: 76,
      content: `var isRTLAndroid = react_native_1.I18nManager.isRTL && react_native_1.Platform.OS === "android";`,
    },
  },
  {
    filePath:
      "../node_modules/@shopify/flash-list/node_modules/recyclerlistview/dist/reactnative/core/VirtualRenderer.js",
    operation: replaceStringInFile,
    args: {
      lookUpString:
        "var offset = this._params && this._params.isHorizontal ? offsetX : offsetY;",
      correctString:
        "var offset = this._params && this._params.isHorizontal ? isRTLAndroid ? this.getLayoutDimension().width - offsetX : offsetX : offsetY;",
    },
  },
];

And then we needed to change FlashList rendering for RTL:

        {isRTL ? (
          cellLayoutMeasurements?.height ? (
            <FlashList
              {...sharedProps}
              renderScrollComponent={ScrollComponent}
              estimatedItemSize={calculatedCellWidth + styles.horizontalGutter}
              estimatedListSize={{
                width: screenWidth,
                height: cellLayoutMeasurements?.height,
              }}
              disableAutoLayout
              disableHorizontalListHeightMeasurement
            />
          ) : null
        ) : (
          <FlashList {...sharedProps} estimatedItemSize={calculatedCellWidth} />

And here is the custom scrollView component

const ScrollComponent = React.forwardRef<ScrollView, {}>(
  (
    {
      children,
      removeClippedSubviews,
      onScroll,
      contentContainerStyle,
      onLayout: _,
      ...restProps
    }: ScrollViewProps,
    ref
  ) => {
    const { width } = useDimensions("screen", {
      fullDimensions: true,
    });

    return (
      <ScrollView
        ref={ref}
        horizontal
        onScroll={onScroll}
        removeClippedSubviews={removeClippedSubviews}
        contentContainerStyle={[
          contentContainerStyle,
          scrollViewStyles.flexZero,
          { minWidth: width },
        ]}
        {...restProps}
      >
        <View style={[scrollViewStyles.flexZero, scrollViewStyles.fullWidth]}>
          {children}
        </View>
      </ScrollView>
    );
  }
);