Box shadow doesn't work in your demo application

[PetroSuch]

I have downloaded your demo project, run npm i command and afterwards i run the project, but i do not see box-shadow properties

[williamjuan027]

Hey @PetroSuch Do you mind sharing a bit more info to help me troubleshoot?

• which platform are you seeing the issue on - android/ios?
• which component are you seeing the box-shadow not being displayed?

[PetroSuch]

Hey @williamjuan027, Thanks for your answer

I am seeing the issue on android platform for example i added box-shadow to FlexboxLayout and to StackLayout, and it doesn't work on both of them <StackLayout style="box-shadow: 2 2 5 #000; width:200; height:200;" ></StackLayout >

my package.json

"dependencies": { "@angular/animations": "~11.2.7", "@angular/common": "~11.2.7", "@angular/compiler": "~11.2.7", "@angular/core": "~11.2.7", "@angular/forms": "~11.2.7", "@angular/platform-browser": "~11.2.7", "@angular/platform-browser-dynamic": "~11.2.7", "@angular/router": "~11.2.7", "@nativescript/angular": "~11.8.0", "@nativescript/background-http": "^5.0.2", "@nativescript/camera": "^5.0.8", "@nativescript/core": "~8.0.0", "@nativescript/datetimepicker": "^2.1.3", "@nativescript/fingerprint-auth": "^7.0.0", "@nativescript/imagepicker": "^1.0.4", "@nativescript/local-notifications": "^5.0.3", "@nativescript/theme": "~3.0.1", "@nativescript/ui-charts": "^0.1.0", "@nstudio/nativescript-checkbox": "^2.0.4", "@nstudio/nativescript-pulltorefresh": "^3.0.1", "moment": "^2.29.1", "nativescript-barcodescanner": "^4.1.1", "nativescript-carousel": "^7.0.1", "nativescript-clipboard": "^2.1.1", "nativescript-feedback": "^2.0.0", "nativescript-localstorage": "^2.0.2", "nativescript-permissions": "^1.3.11", "nativescript-ui-chart": "^8.0.2", "reflect-metadata": "~0.1.13", "rxjs": "~6.6.7", "save": "^2.4.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular/compiler-cli": "~11.2.7", "@nativescript/android": "8.0.0", "@nativescript/types": "~8.0.0", "@nativescript/webpack": "beta", "@ngtools/webpack": "~11.2.6", "typescript": "~4.0.0" },

[williamjuan027]

Hey @PetroSuch , I checked and did confirm that there is now box shadow visible with your code on Android. A temporary workaround would be to add some margin to the component that has the box shadow. This is consistent with the behavior of using androidElevation to set a shadow on Android. I'm going to add a little description about this in the README for future reference. Thanks for bringing this up :)

The updated code that should display the box-shadow

<StackLayout style="box-shadow: 2 2 5 #000; width:200; height:200; margin:10" ></StackLayout >

[PetroSuch]

@williamjuan027 Thanks for you answer, you know, i still watch box-shadow like a border around my element. The box-shadow now is without blur effect https://prnt.sc/13cleqy

[williamjuan027]

I was seeing a blur effect when using the code snippet above on Android. Does specifying a bigger blur radius or adding a spread radius (it should be following the web specs, so its offset x, offset y, blur radius, spread radius) make any difference to the box-shadow on your end?

[PetroSuch]

@williamjuan027 could you share some code or screenshot with your elements, and tell me please, which android version you use?

[williamjuan027]

Hey @PetroSuch, Sorry, I completely forgot about this. There are some quirks with Android that I had to do to work around some issues with how box shadows work. On Android you would have to add a margin greater than the blur radius of the shadow (3rd parameter) so it doesn't clip the shadows

Here is a code snippet you could use to try it out

<!-- src/app/shared/components/cards/thumbnail-card/thumbnail-card.component.html --->
<GridLayout boxShadow="0 0 5 3 red" margin="10" height="160" width="125" rows="*" columns="*">
    <GridLayout class="bg-color-default border-radius-m">
        <Image [src]="imageSrc" stretch="aspectFill"></Image>
    </GridLayout>
</GridLayout>

Here is what it looks like on Android

Hope that helps :)

[PetroSuch]

 boxShadow="0 0 5 3 red"

Hey @williamjuan027, thanks for your reply Can you share your project? Because i still don't see a box-shadow that what i have my code

<StackLayout width="100" height="100" background="blue"  boxShadow="0 0 5 3 red"></StackLayout>