React Native Negative shadowOffset to create top shadow

Question

I am trying to create a bottom navigation bar like YouTube or Instagram have but I am running into issue creating the shadow effect:

This is my current code;

  shadowColor: '#000000',
  shadowOffset: {
    width: 0,
    height: 0
  },
  shadowRadius: 50,
  shadowOpacity: 1.0,
  elevation: 1

This produces a shadow that is only visible on the bottom of the navigation bar but not on the top. Is there a way to place a negative shadowOffset so that the shadow is also visible on the top?

Example:

Were you able to achieve this? I have a similar use case. – duskandawn Sep 19 '17 at 02:31 — duskandawn, Sep 19 '17 at 02:31

score 37 · Accepted Answer · answered Sep 26 '17 at 09:05

37

You can add small marginTop to your container, than add styles:

{
  shadowRadius: 2,
  shadowOffset: {
    width: 0,
    height: -3,
  },
  shadowColor: '#000000',
  elevation: 4,
}

answered Sep 26 '17 at 09:05

Olya Pischik

394
5
5

10

I needed to add the `shadowOpacity` prop as well as the above, with the exception of marginTop. (e.g. `shadowOpacity: 1.0,`) – dǝɥɔS ʇoıןןƎ Sep 07 '18 at 13:55
not working at all – Jamal Ud Din Mar 01 '22 at 10:52

React Native Negative shadowOffset to create top shadow

1 Answers1