[iOS] NativescriptAnimationModule doesn't work when using shadow on iOS

[acivier-serial]

When using the NativeScriptAnimationsModule with shadow on a element you got this error:
ERROR Error: View already has a parent. View: Button(3) Parent: StackLayout(2)

Which platform(s) does your issue occur on?

• iOS

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.1.2
• Cross-platform modules: 6.1.0
• Runtime: 6.1.0
• Plugin(s):
  • "nativescript-ngx-shadow": "6.5.0"
  • "nativescript-angular": "8.2.0"

Please, tell us how to recreate the issue in as much detail as possible.

Just import the NativeScriptAnimationsModule in your app.module.ts then use the shadow directive on an element.

This is probably caused by the addIosWrapper function inside the directive

nativescript-ngx-shadow/lib/src/nativescript-ngx-shadow/ng-shadow.directive.ts

Lines 126 to 140 in 6ca2850

	private addIosWrapper() {
	if (isIOS) {
	const originalElement = this.el.nativeElement as View;
	this.iosShadowRapper = this.render.createElement(
	'StackLayout'
	) as StackLayout;
	// wrappingElement.cssClasses = mainElement.cssClasses;
	const parent = originalElement.parentNode;
	this.render.insertBefore(parent, this.iosShadowRapper, originalElement);
	this.render.removeChild(parent, originalElement);
	this.render.appendChild(this.iosShadowRapper, originalElement);
	}
	}

Is there any code involved?

Here is a sample project to reproduce the issue : https://github.com/acivier-serial/issue-ngx-shadow-angular-animation

[pekevski]

This is impacting me as well.

[alexist]

same issue for me, is there a workaround ?

[alexist]

just found a workaround

    this.render.removeChild(parent, originalElement); 
    if (originalElement.parentNode) {
        originalElement.parentNode.removeChild(originalElement);
    }