Does react native support box-shadow parameter spread radius?

user_5749192 0
Viewed 560

Wiki only refer to: shadowColor(color), shadowOffset(object), shadowOpacity(number) and shadowRadius(number). It is possible to use spread radius or this attribute is not suported?

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}
<div/>

react-native
1 Answers

You can't use box-shadow and, react native doesn't support any equivalent to spread radius css parameter.

box-shadow: 0 0 16px 0 #666 represents :

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

so, what you'll have to do is :

container: {
    backgroundColor:'white',
    padding: 24,
    margin:15,
    borderRadius: 8,
    borderColor: '#33CC99',
    borderWidth: 1,
    ...Platform.select({
     ios: {
       shadowColor: "#000",
       shadowOffset: {
         width: 0,
         height: 5,
       },
       shadowOpacity: 0.36,
       shadowRadius: 6.68,
     },
     android: {
       elevation: 11,
     },
    })
},

only shadow* in iOS and elevation in android,

here is a shadow generator for both os.

user_68174630
Related