fix(ios): shadow does not consider z-index (#10433)

CatchABus · web-flow · commit 5a4bb7c38cc6 · 2023-11-24T10:04:06.000-08:00
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
@@ -864,7 +864,13 @@ export class View extends ViewCommon implements ViewDefinition {
 		return 0;
 	}
 	[zIndexProperty.setNative](value: number) {
-		this.nativeViewProtected.layer.zPosition = value;
+		const nativeView: NativeScriptUIView = <NativeScriptUIView>this.nativeViewProtected;
+
+		nativeView.layer.zPosition = value;
+		// Apply z-index to shadows as well
+		if (nativeView.outerShadowContainerLayer) {
+			nativeView.outerShadowContainerLayer.zPosition = value;
+		}
 	}
 
 	[backgroundInternalProperty.getDefault](): UIColor {
diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts
@@ -143,7 +143,7 @@ export namespace ios {
 		}
 
 		if (!needsMask) {
-			clearLayerMask(nativeView, background);
+			clearLayerMask(nativeView);
 		}
 
 		// Clear box shadow if it's no longer needed
@@ -345,7 +345,7 @@ function maskLayerIfNeeded(nativeView: NativeScriptUIView, background: Backgroun
 	}
 }
 
-function clearLayerMask(nativeView: NativeScriptUIView, background: BackgroundDefinition) {
+function clearLayerMask(nativeView: NativeScriptUIView) {
 	if (nativeView.outerShadowContainerLayer) {
 		nativeView.outerShadowContainerLayer.mask = null;
 	}
@@ -1127,6 +1127,7 @@ function drawBoxShadow(view: View): void {
 	outerShadowContainerLayer.bounds = bounds;
 	outerShadowContainerLayer.anchorPoint = layer.anchorPoint;
 	outerShadowContainerLayer.position = nativeView.center;
+	outerShadowContainerLayer.zPosition = layer.zPosition;
 
 	// Inherit view visibility values
 	outerShadowContainerLayer.opacity = layer.opacity;

Original file line number	Diff line number	Diff line change
`@@ -864,7 +864,13 @@ export class View extends ViewCommon implements ViewDefinition {`
`864`	`864`	`return 0;`
`865`	`865`	`}`
`866`	`866`	`[zIndexProperty.setNative](value: number) {`
`867`		`- this.nativeViewProtected.layer.zPosition = value;`
	`867`	`+ const nativeView: NativeScriptUIView = <NativeScriptUIView>this.nativeViewProtected;`
	`868`	`+`
	`869`	`+ nativeView.layer.zPosition = value;`
	`870`	`+ // Apply z-index to shadows as well`
	`871`	`+ if (nativeView.outerShadowContainerLayer) {`
	`872`	`+ nativeView.outerShadowContainerLayer.zPosition = value;`
	`873`	`+ }`
`868`	`874`	`}`
`869`	`875`
`870`	`876`	`[backgroundInternalProperty.getDefault](): UIColor {`
Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,7 @@ export namespace ios {`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	`if (!needsMask) {`
`146`		`- clearLayerMask(nativeView, background);`
	`146`	`+ clearLayerMask(nativeView);`
`147`	`147`	`}`
`148`	`148`
`149`	`149`	`// Clear box shadow if it's no longer needed`
`@@ -345,7 +345,7 @@ function maskLayerIfNeeded(nativeView: NativeScriptUIView, background: Backgroun`
`345`	`345`	`}`
`346`	`346`	`}`
`347`	`347`
`348`		`-function clearLayerMask(nativeView: NativeScriptUIView, background: BackgroundDefinition) {`
	`348`	`+function clearLayerMask(nativeView: NativeScriptUIView) {`
`349`	`349`	`if (nativeView.outerShadowContainerLayer) {`
`350`	`350`	`nativeView.outerShadowContainerLayer.mask = null;`
`351`	`351`	`}`
`@@ -1127,6 +1127,7 @@ function drawBoxShadow(view: View): void {`
`1127`	`1127`	`outerShadowContainerLayer.bounds = bounds;`
`1128`	`1128`	`outerShadowContainerLayer.anchorPoint = layer.anchorPoint;`
`1129`	`1129`	`outerShadowContainerLayer.position = nativeView.center;`
	`1130`	`+ outerShadowContainerLayer.zPosition = layer.zPosition;`
`1130`	`1131`
`1131`	`1132`	`// Inherit view visibility values`
`1132`	`1133`	`outerShadowContainerLayer.opacity = layer.opacity;`