How to shape shadows in React Native for android?-CodePudding

Package used: react-native-shadow

Problem: How to shape the shadow if the view is circular-shaped? I have used Avatar and want shadow behind it with the same shape.

Code Used:

<BoxShadow setting={{
    width: 90,
    height: 90,
    color: "#000",
    radius: 20,
    opacity: 0.1,
    x: 2,
    y: 3,
    style: { marginVertical: 7 }
}}>
    <Avatar size={90} overlayContainerStyle={{ backgroundColor: '#bf1e2e' }} rounded title="GS" onPress={() => console.log("Works!")} activeOpacity={0.7} />
</BoxShadow>

Solution Tried: I tried making radius 44, 48 but gives error after 50 If someone can give a reason would be great.

Current Output: Click Here: Shadow Shape is rectangular

Expected Output: Click Here: Shadow Shape is circular and blurred

CodePudding user response：

Please add and try this in your code:

<BoxShadow
  setting={{
    width: 90,
    height: 90,
    border: 10,   //Add this
    color: '#8d1622',
    radius: 45,   //Change here
    opacity: 1,   //Change here
    x: 0,   //Change here
    y: 0,   //Change here
    style: { marginVertical: 7 },
  }}>
  <Avatar
    size={90}
    overlayContainerStyle={{ backgroundColor: '#bf1e2e' }}
    rounded
    title="GS"
    onPress={() => console.log('Works!')}
    activeOpacity={0.7}
  />
</BoxShadow>