Change transform style on Android to fix perf

Shopify · Apr 20, 2023 · a47ed5d · a47ed5d
1 parent 2d31530
commit a47ed5d
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 5 deletions.
diff --git a/fixture/ios/Podfile.lock b/fixture/ios/Podfile.lock
@@ -366,9 +366,9 @@ PODS:
     - React-Core
     - SDWebImage (~> 5.11.1)
     - SDWebImageWebPCoder (~> 0.8.4)
-  - RNFlashList (1.4.1):
+  - RNFlashList (1.4.2):
     - React-Core
-  - RNFlashList/Tests (1.4.1):
+  - RNFlashList/Tests (1.4.2):
     - React-Core
   - RNGestureHandler (2.5.0):
     - React-Core
@@ -630,7 +630,7 @@ SPEC CHECKSUMS:
   ReactCommon: 149e2c0acab9bac61378da0db5b2880a1b5ff59b
   ReactNativePerformanceListsProfiler: b9f7cfe8d08631fbce8e4729d388a5a3f7f562c2
   RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
-  RNFlashList: 8ec7f7454721145fe84566bb9e88bcf58981c9fe
+  RNFlashList: 7fbca4fc075484a9426f1610d648dbea2de94eb0
   RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
   RNReanimated: 3d1432ce7b6b7fc31f375dcabe5b4585e0634a43
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19

diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "up": "bundle install && yarn fixture-up && yarn e2e-up && yarn build && yarn fixture-web-up",
+    "up": "bundle install && yarn fixture-up && yarn e2e-up && yarn build",
     "fixture-web-up": "cd fixture/web-app && yarn && cd ../../",
     "fixture-up": "cd fixture && yarn && cd ios && bundle exec pod install && cd ../../",
     "e2e-up": "cd fixture/ios && brew tap wix/brew && brew install applesimutils && cd ../../",

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
@@ -69,7 +69,7 @@ class FlashList<T> extends React.PureComponent<
   private rlvRef?: RecyclerListView<RecyclerListViewProps, any>;
   private stickyContentContainerRef?: PureComponentWrapper;
   private listFixedDimensionSize = 0;
-  private transformStyle = { transform: [{ scaleY: -1 }] };
+  private transformStyle = PlatformConfig.invertedTransformStyle;
   private transformStyleHorizontal = { transform: [{ scaleX: -1 }] };
   private distanceFromWindow = 0;
   private contentStyle: ContentStyleExplicit = {

diff --git a/src/native/config/PlatformHelper.android.ts b/src/native/config/PlatformHelper.android.ts
@@ -2,6 +2,7 @@ import { BaseItemAnimator } from "recyclerlistview";
 
 const PlatformConfig = {
   defaultDrawDistance: 250,
+  invertedTransformStyle: { transform: [{ rotate: "180deg" }] },
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,

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

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

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