Clever Geek Handbook

React Native Negative shadowOffset to create top shadow

I am trying to create a bottom navigation bar like YouTube or Instagram, but I am having the problem of creating a drop shadow effect:

This is my current code;

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

This creates a shadow that is only visible at the bottom of the navbar, not at the top. Is there a way to position the negative shadowOffset so that the shadow is also visible from above?

Example:

enter image description here

+3


source to share


1 answer


You can add a small marginTop to the container rather than add styles:



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


source






More articles:


All Articles