fix(ios): Shadow layer origin point update (#10376)

CatchABus · web-flow · commit f54ebbb2bfc4 · 2023-09-07T06:39:42.000-07:00
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
@@ -169,8 +169,9 @@ export class View extends ViewCommon implements ViewDefinition {
 				CATransaction.setDisableActions(true);
 
 				if (nativeView.outerShadowContainerLayer) {
+					const { x: originX, y: originY }: CGPoint = nativeView.outerShadowContainerLayer.anchorPoint;
 					nativeView.outerShadowContainerLayer.bounds = nativeView.bounds;
-					nativeView.outerShadowContainerLayer.position = CGPointMake(frame.origin.x + frame.size.width / 2, frame.origin.y + frame.size.height / 2);
+					nativeView.outerShadowContainerLayer.position = CGPointMake(frame.origin.x + frame.size.width * originX, frame.origin.y + frame.size.height * originY);
 				}
 
 				CATransaction.setDisableActions(false);
@@ -450,11 +451,27 @@ export class View extends ViewCommon implements ViewDefinition {
 	}
 
 	public updateOriginPoint(originX: number, originY: number) {
+		const nativeView: NativeScriptUIView = <NativeScriptUIView>this.nativeViewProtected;
 		const newPoint = CGPointMake(originX, originY);
-		this.nativeViewProtected.layer.anchorPoint = newPoint;
+
+		// Disable CALayer animatable property changes
+		CATransaction.setDisableActions(true);
+
+		nativeView.layer.anchorPoint = newPoint;
 		if (this._cachedFrame) {
-			this._setNativeViewFrame(this.nativeViewProtected, this._cachedFrame);
+			this._setNativeViewFrame(nativeView, this._cachedFrame);
+		}
+
+		// Make sure new origin also applies to outer shadow layers
+		if (nativeView.outerShadowContainerLayer) {
+			// This is the new frame after view origin point update
+			const frame = nativeView.frame;
+
+			nativeView.outerShadowContainerLayer.anchorPoint = newPoint;
+			nativeView.outerShadowContainerLayer.position = CGPointMake(frame.origin.x + frame.size.width * originX, frame.origin.y + frame.size.height * originY);
 		}
+
+		CATransaction.setDisableActions(false);
 	}
 
 	// By default we update the view's presentation layer when setting backgroundColor and opacity properties.
diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts
@@ -1125,9 +1125,12 @@ function drawBoxShadow(view: View): void {
 		}
 	}
 
-	// Since shadow layer is added to view layer's superlayer, we have to be more specific about shadow layer position
 	outerShadowContainerLayer.bounds = bounds;
-	outerShadowContainerLayer.position = CGPointMake(viewFrame.origin.x + viewFrame.size.width / 2, viewFrame.origin.y + viewFrame.size.height / 2);
+	outerShadowContainerLayer.anchorPoint = layer.anchorPoint;
+
+	// Since shadow uses superlayer's coordinate system, we have to be more specific about shadow layer position
+	const { x: originX, y: originY }: CGPoint = outerShadowContainerLayer.anchorPoint;
+	outerShadowContainerLayer.position = CGPointMake(viewFrame.origin.x + viewFrame.size.width * originX, viewFrame.origin.y + viewFrame.size.height * originY);
 
 	// Inherit view visibility values
 	outerShadowContainerLayer.opacity = layer.opacity;

Original file line number	Diff line number	Diff line change
`@@ -1125,9 +1125,12 @@ function drawBoxShadow(view: View): void {`
`1125`	`1125`	`}`
`1126`	`1126`	`}`
`1127`	`1127`
`1128`		`- // Since shadow layer is added to view layer's superlayer, we have to be more specific about shadow layer position`
`1129`	`1128`	`outerShadowContainerLayer.bounds = bounds;`
`1130`		`- outerShadowContainerLayer.position = CGPointMake(viewFrame.origin.x + viewFrame.size.width / 2, viewFrame.origin.y + viewFrame.size.height / 2);`
	`1129`	`+ outerShadowContainerLayer.anchorPoint = layer.anchorPoint;`
	`1130`	`+`
	`1131`	`+ // Since shadow uses superlayer's coordinate system, we have to be more specific about shadow layer position`
	`1132`	`+ const { x: originX, y: originY }: CGPoint = outerShadowContainerLayer.anchorPoint;`
	`1133`	`+ outerShadowContainerLayer.position = CGPointMake(viewFrame.origin.x + viewFrame.size.width * originX, viewFrame.origin.y + viewFrame.size.height * originY);`
`1131`	`1134`
`1132`	`1135`	`// Inherit view visibility values`
`1133`	`1136`	`outerShadowContainerLayer.opacity = layer.opacity;`