Horizontal inversion

CHANGELOG.md

@@ -13,6 +13,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
   - https://github.com/Shopify/flash-list/pull/519
 - Added `viewPosition` and `viewOffset` support scrollTo methods
   - https://github.com/Shopify/flash-list/pull/521
+- Fix inverted mode while being horizontal
+  - https://github.com/Shopify/flash-list/pull/520
 - Upgrade recyclerlistview to v4.1.1
   - https://github.com/Shopify/flash-list/pull/526
 

src/FlashList.tsx

@@ -65,6 +65,7 @@ class FlashList<T> extends React.PureComponent<
   private stickyContentContainerRef?: PureComponentWrapper;
   private listFixedDimensionSize = 0;
   private transformStyle = { transform: [{ scaleY: -1 }] };
+  private transformStyleHorizontal = { transform: [{ scaleX: -1 }] };
   private distanceFromWindow = 0;
   private contentStyle: ContentStyle = {};
   private loadStartTime = 0;
@@ -79,7 +80,6 @@ class FlashList<T> extends React.PureComponent<
     applyToInitialOffset: true,
   };
 
-  private emptyObject = {};
   private postLoadTimeoutId?: ReturnType<typeof setTimeout>;
   private sizeWarningTimeoutId?: ReturnType<typeof setTimeout>;
 
@@ -303,7 +303,7 @@ class FlashList<T> extends React.PureComponent<
         stickyHeaderIndices={stickyHeaderIndices}
         style={
           this.props.horizontal
-            ? this.emptyObject
+            ? { ...this.getTransform() }
             : { flex: 1, ...this.getTransform() }
         }
       >
@@ -496,7 +496,10 @@ class FlashList<T> extends React.PureComponent<
   };
 
   private getTransform() {
-    return (this.props.inverted && this.transformStyle) || undefined;
+    const transformStyle = this.props.horizontal
+      ? this.transformStyleHorizontal
+      : this.transformStyle;
+    return (this.props.inverted && transformStyle) || undefined;
   }
 
   private getContentContainerInfo() {

src/__tests__/PlatformHelper.web.test.ts

@@ -13,15 +13,31 @@ describe("Platform Helper Web", () => {
       x: 30,
       y: 30,
     });
+    const transformHorizontalInvertedStyle = getCellContainerPlatformStyles(
+      true,
+      {
+        x: 30,
+        y: 30,
+        isHorizontal: true,
+      }
+    );
     const expectedTransform = "translate(20px,70px)";
     const expectedTransformInverted = "translate(30px,30px) scaleY(-1)";
+    const expectedTransformHorizontalInverted =
+      "translate(30px,30px) scaleX(-1)";
 
     expect(transformStyle?.transform).toBe(expectedTransform);
     expect(transformStyle?.WebkitTransform).toBe(expectedTransform);
     expect(transformInvertedStyle?.transform).toBe(expectedTransformInverted);
     expect(transformInvertedStyle?.WebkitTransform).toBe(
       expectedTransformInverted
     );
+    expect(transformHorizontalInvertedStyle?.transform).toBe(
+      expectedTransformHorizontalInverted
+    );
+    expect(transformHorizontalInvertedStyle?.WebkitTransform).toBe(
+      expectedTransformHorizontalInverted
+    );
   });
   it("can return an animator", () => {
     expect(getItemAnimator()!["animateWillMount"]).toBeDefined();

src/native/config/PlatformHelper.android.ts

@@ -5,7 +5,7 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   return undefined;
 };

src/native/config/PlatformHelper.ios.ts

@@ -5,7 +5,7 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   return undefined;
 };

src/native/config/PlatformHelper.ts

@@ -6,7 +6,7 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   return undefined;
 };

src/native/config/PlatformHelper.web.ts

@@ -8,10 +8,10 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   const transformValue = `translate(${parentProps.x}px,${parentProps.y}px)${
-    inverted ? ` scaleY(-1)` : ``
+    inverted ? ` ${parentProps.isHorizontal ? `scaleX` : `scaleY`}(-1)` : ``
   }`;
   return { transform: transformValue, WebkitTransform: transformValue };
 };