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.

Have you tried specifing `shadowColor: Colors.BLACK, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.16, shadowRadius: 16`? Values are clearly random :) — Milore, Dec 06 '18 at 08:44

score 36 · Accepted Answer · edited May 12 '21 at 19:10

36

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,
},
// ...

edited May 12 '21 at 19:10

ggorlen

44,755
7
76
106

answered Dec 06 '18 at 08:53

Helmer Barcos

1,898
12
18

score 2 · Answer 2 · answered May 15 '20 at 05:18

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,

Kiran Maniya · Answer 3 · 2021-04-30T10:40:39.993

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.

score 1 · Answer 4 · answered Jul 07 '21 at 11:03

1

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'
},

answered Jul 07 '21 at 11:03

kishan verma

984
15
17

shadow properties has not effect except elevation and shadowColor – CrackerKSR Jan 30 '22 at 05:31

soumya sourabha · Answer 5 · 2023-01-21T05:49:41.460

0

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

edited Jan 21 '23 at 05:49

answered Jan 21 '23 at 05:49

soumya sourabha

1
1

1

Please add explanations. – Syscall Jan 21 '23 at 06:43

Elevation in React Native

5 Answers5