From f54ebbb2bfc433afbf8479e9b044d18b4d6e1fbb Mon Sep 17 00:00:00 2001
From: Dimitris-Rafail Katsampas <katsampasdr@gmail.com>
Date: Thu, 7 Sep 2023 16:39:42 +0300
Subject: [PATCH] fix(ios): Shadow layer origin point update (#10376)

---
 packages/core/ui/core/view/index.ios.ts    | 23 +++++++++++++++++++---
 packages/core/ui/styling/background.ios.ts |  7 +++++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
index 03ef018a4..9fa8b0442 100644
--- 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
index a6e2756b6..558abf7fa 100644
--- 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;