How to add shadow to `<View>` like normal tab bar

user_7820956 0
Viewed 2546

This is my custom NavBar using <View>

enter image description here

Can I add bottom shadow like normal react-navigation bar (like image below)?

enter image description here

Adding shadow seems difficult to me

  header: {
    height: 55,
    flexDirection: 'row',
    shadowColor: 'black',
    shadowOpacity: 0.1,
    shadowRadius: 5,
    shadowOffset: {
      height: 5,
    },
    elevation: 4,
    zIndex: -1,
    overflow: 'visible'
  },
react-navigation react-native reactjs css
2 Answers

You can simply use CSS:

header: {
    height: 55,
    flexDirection: 'row',
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
        height: 1,
        width: 1
    }
}

Adjust values to your convenience. In some cases, you'll want to make sure you set an appropriate zIndex value and double check that your header overflow is visible.

Admin1

your are not using width inside shadowOffset thats why you are not getting shadow.

shadowOffset: {
    height: 2,
    width: 2 
}
user_101796640
Related