Home > Mobile >  Linear-Gradient not working on Android device (NativeScript 8)
Linear-Gradient not working on Android device (NativeScript 8)

Time:04-24

I implemented a linear-gradient to an image in my NativeScript 8 app. it works fine on iOS but Android somehow has some issues with it. I also tried solutions like using -webkit-linear-gradient() but it still doesn't do what I expect it to do.

here is my implementation:

HTML

  <GridLayout rows="auto, auto, auto, auto, auto">
    <image  src="~/assets/images/registration.png"></image>
    ...
    ...
    ...
  </GridLayout>

and my CSS

.backgroundImage {
  background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 85%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 85%);
  width: 100%;
} 

Screenshot on my iOS emulator (that's how it should look)

Screenshot on my iOS emulator (that's how it should look)

Screenshot of my Android Emulator (Gradient not working here)

Screenshot of my Android Emulator (Gradient not working here)

my question: what is wrong with my implementation and what is causing this behaviour on Android?

CodePudding user response:

You can overlay the image (or any component) with a gradient layer to achieve similar results on the both platforms.

Template

  <GridLayout rows="auto, auto, auto, auto, auto">
    <Image row="0" src="~/assets/images/registration.png"/>
    <ContentView row="0" height="100%" />
    ... Other Components
  </GridLayout>

Style

  .my-gradient {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
  }
  • Related