diff --git a/CHANGELOG.md b/CHANGELOG.md index 2219045e4..0098f8250 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/FlashList.tsx b/src/FlashList.tsx index 08c9f06a9..f364e803f 100644 --- a/src/FlashList.tsx +++ b/src/FlashList.tsx @@ -65,6 +65,7 @@ class FlashList 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 extends React.PureComponent< applyToInitialOffset: true, }; - private emptyObject = {}; private postLoadTimeoutId?: ReturnType; private sizeWarningTimeoutId?: ReturnType; @@ -303,7 +303,7 @@ class FlashList extends React.PureComponent< stickyHeaderIndices={stickyHeaderIndices} style={ this.props.horizontal - ? this.emptyObject + ? { ...this.getTransform() } : { flex: 1, ...this.getTransform() } } > @@ -496,7 +496,10 @@ class FlashList 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() { diff --git a/src/__tests__/PlatformHelper.web.test.ts b/src/__tests__/PlatformHelper.web.test.ts index 63461324f..0ecaca0a7 100644 --- a/src/__tests__/PlatformHelper.web.test.ts +++ b/src/__tests__/PlatformHelper.web.test.ts @@ -13,8 +13,18 @@ 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); @@ -22,6 +32,12 @@ describe("Platform Helper Web", () => { expect(transformInvertedStyle?.WebkitTransform).toBe( expectedTransformInverted ); + expect(transformHorizontalInvertedStyle?.transform).toBe( + expectedTransformHorizontalInverted + ); + expect(transformHorizontalInvertedStyle?.WebkitTransform).toBe( + expectedTransformHorizontalInverted + ); }); it("can return an animator", () => { expect(getItemAnimator()!["animateWillMount"]).toBeDefined(); diff --git a/src/native/config/PlatformHelper.android.ts b/src/native/config/PlatformHelper.android.ts index ce4998ec0..bf872b642 100644 --- a/src/native/config/PlatformHelper.android.ts +++ b/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; }; diff --git a/src/native/config/PlatformHelper.ios.ts b/src/native/config/PlatformHelper.ios.ts index ce4998ec0..bf872b642 100644 --- a/src/native/config/PlatformHelper.ios.ts +++ b/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; }; diff --git a/src/native/config/PlatformHelper.ts b/src/native/config/PlatformHelper.ts index f70715943..1551777af 100644 --- a/src/native/config/PlatformHelper.ts +++ b/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; }; diff --git a/src/native/config/PlatformHelper.web.ts b/src/native/config/PlatformHelper.web.ts index 4bf300fd8..e6fce6cd3 100644 --- a/src/native/config/PlatformHelper.web.ts +++ b/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 }; };