Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change transform style on Android to fix perf #819

Merged
merged 2 commits into from
Apr 24, 2023
Merged

Change transform style on Android to fix perf #819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bb6c99c
Change transform style on Android to fix perf
naqvitalha Apr 20, 2023
54e5193
Added comment
naqvitalha Apr 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
- https://github.com/Shopify/flash-list/pull/795
- Fix Android unit test
- https://github.com/Shopify/flash-list/pull/815
- Fix performance issues with inverted lists on Android
- https://github.com/Shopify/flash-list/pull/819

## [1.4.2] - 2023-03-20

Expand Down
6 changes: 3 additions & 3 deletions fixture/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -630,7 +630,7 @@ SPEC CHECKSUMS:
ReactCommon: 149e2c0acab9bac61378da0db5b2880a1b5ff59b
ReactNativePerformanceListsProfiler: b9f7cfe8d08631fbce8e4729d388a5a3f7f562c2
RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
RNFlashList: 8ec7f7454721145fe84566bb9e88bcf58981c9fe
RNFlashList: 7fbca4fc075484a9426f1610d648dbea2de94eb0
RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
RNReanimated: 3d1432ce7b6b7fc31f375dcabe5b4585e0634a43
RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Collaborator Author

@naqvitalha naqvitalha Apr 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed due to some build issue. Not very important.

"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 ../../",
Expand Down
2 changes: 1 addition & 1 deletion src/FlashList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 2 additions & 0 deletions src/native/config/PlatformHelper.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { BaseItemAnimator } from "recyclerlistview";

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" }] },
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only changing on Android as this doesn't impact other platforms. This also reduces testing footprint.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can add a comment for why we're doing this and link to the original issues. Might be surprising to see this down the road.

};
const getCellContainerPlatformStyles = (
inverted: boolean,
Expand Down
1 change: 1 addition & 0 deletions src/native/config/PlatformHelper.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { BaseItemAnimator } from "recyclerlistview";

const PlatformConfig = {
defaultDrawDistance: 250,
invertedTransformStyle: { transform: [{ scaleY: -1 }] },
};
const getCellContainerPlatformStyles = (
inverted: boolean,
Expand Down
1 change: 1 addition & 0 deletions src/native/config/PlatformHelper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platfor

const PlatformConfig = {
defaultDrawDistance: 250,
invertedTransformStyle: { transform: [{ scaleY: -1 }] },
};
const getCellContainerPlatformStyles = (
inverted: boolean,
Expand Down
1 change: 1 addition & 0 deletions src/native/config/PlatformHelper.web.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platfor

const PlatformConfig = {
defaultDrawDistance: 2000,
invertedTransformStyle: { transform: [{ scaleY: -1 }] },
};
const getCellContainerPlatformStyles = (
inverted: boolean,
Expand Down
Loading