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 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))
}