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:

Answer 1

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

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