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

Question

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 class="backgroundImage" 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 of my Android Emulator (Gradient not working here)

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

Answer 1

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%" class="my-gradient"/>
    ... Other Components
  </GridLayout>

Style

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