Elevation in React Native

Question

Here is my style defined in the React-Native screen. I have used the elevation property to achieve a box-shadow. But it's not working properly.

const styles = StyleSheet.create({
scrollContainer: {
    flex: 1,
},
container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 2
},
box: {
    margin: 8,
    width: Dimensions.get('window').width / 2 - 18,
    height: Dimensions.get('window').width / 2 - 18,
    justifyContent: "center",
    alignItems: "center",
    borderStyle: 'dashed',
    borderLeftWidth: 1,
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderTopColor: 'black',
    borderBottomEndRadius : 8,
    borderTopStartRadius: 8,
    borderTopEndRadius: 8,
    borderBottomStartRadius: 8,
    borderBottomLeftRadius:8,
    borderBottomRightRadius:8,
    elevation: 5
},
navBar:{
    backgroundColor: "#000",
}
});

I have also tried using box-shadow but the same problem arises.

Imagery

Have you tried specifing shadowColor: Colors.BLACK, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.16, shadowRadius: 16? Values are clearly random :) – Havard

Answer 1

Try to add following properties to the styles.box. You could change the values for better results.

// ...
box: {
  // ...
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.5,
  shadowRadius: 2,
  elevation: 2,
},
// ...

Sarsenet

Answer 2

you can use below code

          height: 150,
          width: '100%',
          backgroundColor: 'white',
          elevation: 5,
          shadowColor: '#000',
          shadowOffset: {width: 0, height: 0},
          shadowOpacity: 0.1,
          shadowRadius: 5,

Tetrahedron

Answer 3

After little investigation, I found the working solution and here it is. There is a broad discussion over this problem on the github issue.

box: {
    margin: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 2,
}

rather only using elevation property. Also, make sure you give the proper margin to the box for proper spacing. I was lacking the margin in my case. Hope it's useful findings to help.

Imagery

Answer 4

You can add this style in your View

 headerstyle:{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 2,
    alignSelf: 'stretch'
},

Beitnes

shadow properties has not effect except elevation and shadowColor – Backstop

Answer 5

I created this when I was having issues. Since then I have been using it in my every project. It works well in all of my projects unless the client wants something different.

Just copy and paste this and change the values in elevation & height or weight of shadowOffset as per your requirement.

 shadowOffset: {
  width: 0,
  height: 2,
},
shadowOpacity: 0.21,
shadowRadius: 6.65,
elevation: 6,

},

Belong

Answer 6

chip: {
    padding: 10,
    height: 40,
    shadowColor: 'black',
    elevation: 3,
    borderRadius: 5,
    backgroundColor: '#fff'
  }

Tasso

Please add explanations. – Snaggletooth