fix inverted horizontal list performance laggy (#851)

Shopify · Jun 9, 2023 · e2854a5 · e2854a5
1 parent f91bcb1
commit e2854a5
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 1 deletion.
diff --git a/src/FlashList.tsx b/src/FlashList.tsx
@@ -70,7 +70,9 @@ class FlashList<T> extends React.PureComponent<
   private stickyContentContainerRef?: PureComponentWrapper;
   private listFixedDimensionSize = 0;
   private transformStyle = PlatformConfig.invertedTransformStyle;
-  private transformStyleHorizontal = { transform: [{ scaleX: -1 }] };
+  private transformStyleHorizontal =
+    PlatformConfig.invertedTransformStyleHorizontal;
+
   private distanceFromWindow = 0;
   private contentStyle: ContentStyleExplicit = {
     paddingBottom: 0,

diff --git a/src/native/config/PlatformHelper.android.ts b/src/native/config/PlatformHelper.android.ts
@@ -4,6 +4,7 @@ const PlatformConfig = {
   defaultDrawDistance: 250,
   // Using rotate instead of scaleY on Android to avoid performance issues. Issue: https://github.com/Shopify/flash-list/issues/751
   invertedTransformStyle: { transform: [{ rotate: "180deg" }] },
+  invertedTransformStyleHorizontal: { transform: [{ rotate: "180deg" }] },
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,

diff --git a/src/native/config/PlatformHelper.ios.ts b/src/native/config/PlatformHelper.ios.ts
@@ -3,6 +3,7 @@ import { BaseItemAnimator } from "recyclerlistview";
 const PlatformConfig = {
   defaultDrawDistance: 250,
   invertedTransformStyle: { transform: [{ scaleY: -1 }] },
+  invertedTransformStyleHorizontal: { transform: [{ scaleX: -1 }] },
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,

diff --git a/src/native/config/PlatformHelper.ts b/src/native/config/PlatformHelper.ts
@@ -4,6 +4,7 @@ import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platfor
 const PlatformConfig = {
   defaultDrawDistance: 250,
   invertedTransformStyle: { transform: [{ scaleY: -1 }] },
+  invertedTransformStyleHorizontal: { transform: [{ scaleX: -1 }] },
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,

diff --git a/src/native/config/PlatformHelper.web.ts b/src/native/config/PlatformHelper.web.ts
@@ -6,6 +6,7 @@ import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platfor
 const PlatformConfig = {
   defaultDrawDistance: 2000,
   invertedTransformStyle: { transform: [{ scaleY: -1 }] },
+  invertedTransformStyleHorizontal: { transform: [{ scaleX: -1 }] },
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,