CardView shadow multiplying issue on Android about nativescript-cardview

[flodaniel]

we are seeing the same issue @marklanhamhc
Do you have a workaround?

[marklanhamhc]

We ended up not using the nativescript-cardview plugin and changed the design of our app. That said, we started to use the nativescript-cardview plugin again on one of our new apps but this time we changed one of our other plugins from nativescript-advanced-webview to nativescript-awesome-webview-with-custom-menu-items which might have been causing the issue and we've not seen this issue since.

Hope this helps!

[flodaniel]

strange.
I tried to find the issue yesterday and played around with the underlaying native component on android. I managed to set the elevation (which is the property that causes the issue) to 0. But as soon as I set a positive number it began stacking again. Setting it to 0 and then to a e.g. 10 again, also did not help.
Also setTimeout or requestLayout() did not help resetting the elevation of the CardView.

I am totally unsure, which plugin could cause interference. We have quite a lot in our app..

[marklanhamhc]

Yeah unfortunately, in my experience, sometimes you have to just go through each plugin, one at a time, disabling them and then testing to see if it makes a difference. Alternatively, try creating a simple app with just the cardview plugin and see if it still does it.

[bradmartin]

Just a comment from what I recall about navigating, the views should be cached when you go to a route/page and come back, so it shouldn't be recreating (which would duplicate) the views. So this is likely a different native lib causing the issue as @marklanhamhc mentioned. I've never seen this in any apps I've done with cardview. If you can pinpoint that this happens with a plain NS app with the cardview plugin (maybe look at the demo and add a second page for navigation and let me test it) then I'd be glad to help fix it, but without that it's all guessing 😄. @Firetrip let me know if you have time to possibly fork and edit the demo app so I can quickly clone and run your fork demonstrating the issue with this plugin, thanks.

[giulianimartini]

Hi,

I am having the same issue here. Only on Android. iOS is ok. Some news about this problem?

I am running on a real device and NS 6.5.0 with Vue.

Thanks

[flodaniel]

@giulianimartini do you have material components installed?
i did a lot of debugging and filed the following bug report, which i think is the actual problem, or at least the two plugins cause some unexpected interaction behavior: nativescript-community/ui-material-components#135 (comment)

[giulianimartini]

@Firetrip I only have a package called "nativescript-material-ripple" (https://market.nativescript.org/plugins/nativescript-material-ripple) installed on my project, but it is not used on the page of the strange behaviour. My package.json dependencies are:

"dependencies": {
"@nativescript/theme": "~2.3.3",
"@nstudio/nativescript-cardview": "^1.0.0",
"axios": "^0.19.2",
"btoa": "^1.2.1",
"nativescript-fontawesome": "^1.0.0",
"nativescript-fonticon": "^2.0.0",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-material-ripple": "^2.5.4",
"nativescript-theme-core": "^2.0.24",
"nativescript-ui-listview": "^8.1.2",
"nativescript-vue": "~2.5.0",
"nativescript-vue-fonticon": "^1.0.3",
"tns-core-modules": "^6.5.1",
"vuex": "^3.3.0"
},

Maybe some of these dependencies are the problem?

[flodaniel]

can you try uninstalling the ripple plugin and then check if the bug still occurs?

[giulianimartini]

@Firetrip That's it! I removed the ripple plugin and the elevation shadow stopped of multiplying in each call to the navigateBack method. Do you know any more plugins that are giving the same problem? (Except the Akylas, as already mentioned).

[flodaniel]

hey,
no sadly not.
But it seems it is some sort of interference between all Akylas plugins and the cardview plugin. Maybe somebody can figure out why this is happening.