CODEWITHSUNDEEP
react-native
Blezx
Blezx

Reputation: 614

React Native Negative shadowOffset to create top shadow

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:

enter image description here

Upvotes: 21

Views: 38220

Answers (2)

mehmet k
mehmet k

Reputation: 1

shadowOffset and shadowRadius only work in ios. Android not working.

Upvotes: 0

Olya Pischik
Olya Pischik

Reputation: 404

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

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

Upvotes: 38

Related Questions