fix(ios): add/remove shadow for reusable views (#10409)

CatchABus · web-flow · commit ee87b52ac323 · 2023-10-14T14:25:37.000-07:00
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
@@ -8,7 +8,7 @@ import { Trace } from '../../../trace';
 import { layout, iOSNativeHelper } from '../../../utils';
 import { isNumber } from '../../../utils/types';
 import { IOSHelper } from './view-helper';
-import { ios as iosBackground, Background, BackgroundClearFlags } from '../../styling/background';
+import { ios as iosBackground, Background } from '../../styling/background';
 import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty } from '../../styling/style-properties';
 import { profile } from '../../../profiling';
 import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityLiveRegionProperty, accessibilityMediaSessionProperty, accessibilityRoleProperty, accessibilityStateProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
@@ -73,15 +73,6 @@ export class View extends ViewCommon implements ViewDefinition {
 		this._isLaidOut = false;
 		this._hasTransform = false;
 		this._hasPendingTransform = false;
-
-		// If native view extends UIView, perform a background cleanup to get rid of shadow layers
-		if (this.nativeViewProtected instanceof UIView) {
-			// Make sure shadows get removed
-			this.style.backgroundInternal.clearFlags |= BackgroundClearFlags.CLEAR_BOX_SHADOW;
-
-			// Perform background cleanup
-			iosBackground.clearBackgroundVisualEffects(this);
-		}
 	}
 
 	public requestLayout(): void {
@@ -1096,7 +1087,7 @@ export class CustomLayoutView extends ContainerView {
 		super._addViewToNativeVisualTree(child, atIndex);
 
 		const parentNativeView = this.nativeViewProtected;
-		const childNativeView = child.nativeViewProtected;
+		const childNativeView: NativeScriptUIView = <NativeScriptUIView>child.nativeViewProtected;
 
 		if (parentNativeView && childNativeView) {
 			if (typeof atIndex !== 'number' || atIndex >= parentNativeView.subviews.count) {
@@ -1105,6 +1096,11 @@ export class CustomLayoutView extends ContainerView {
 				parentNativeView.insertSubviewAtIndex(childNativeView, atIndex);
 			}
 
+			// Add outer shadow layer manually as it belongs to parent layer tree (this is needed for reusable views)
+			if (childNativeView.outerShadowContainerLayer && !childNativeView.outerShadowContainerLayer.superlayer) {
+				parentNativeView.layer.insertSublayerBelow(childNativeView.outerShadowContainerLayer, childNativeView.layer);
+			}
+
 			return true;
 		}
 
@@ -1115,7 +1111,14 @@ export class CustomLayoutView extends ContainerView {
 		super._removeViewFromNativeVisualTree(child);
 
 		if (child.nativeViewProtected) {
-			child.nativeViewProtected.removeFromSuperview();
+			const nativeView: NativeScriptUIView = <NativeScriptUIView>child.nativeViewProtected;
+
+			// Remove outer shadow layer manually as it belongs to parent layer tree
+			if (nativeView.outerShadowContainerLayer) {
+				nativeView.outerShadowContainerLayer.removeFromSuperlayer();
+			}
+
+			nativeView.removeFromSuperview();
 		}
 	}
 }
