0

I'm trying to add a shadow on the top of a View element, but I can't find a way to make it work on Android.

On iOS is working properly, using negative value on Y axis, but on Android, shadow is showed at the bottom of the element.

enter image description here

Here are the styles applied:

footer: css`
    padding: 0px 20px;
    background-color: ${COLOR.WHITE};
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(144, 155, 160, 0.2);
    elevation: 20;
    margin-bottom: 100px;
    shadow-color: black;
`,

Is there a way to have "elevation" on the top of a View element?

sebazelonka
  • 772
  • 2
  • 6
  • 13

1 Answers1

0

I'd had some troubles with that too on Android, you could use a <View> with a LinearGradient as an overlay on top of the absolute positioned container, or an Image. Should work on both without issues

yemd
  • 420
  • 4
  • 15