For circle shadow not blending properly from corners

[Ranvir Gorai]

For the circle, the shadow is not blending properly from corners

const shadowOpt1 = {
           width:150,
           height:150,
           color:"#000",
           border:30,
           radius:75,
           opacity:0.2,
           x:0,
           y:0,
           style:{marginVertical:0,marginHorizontal:40,}
       }

And if the border-radius is greater then 50% then getting an unexpected result

const shadowOpt1 = {
           width:150,
           height:150,
           color:"#000",
           border:30,
           radius:80,
           opacity:0.2,
           x:0,
           y:0,
           style:{marginVertical:0,marginHorizontal:40,}
       }

[Daniel Neveux]

I confirm.

[Yossi]

@dagatsoin @ranvirgorai

I believe that the problem that I have is the one you are referring to.
I am posting this in order to make sure this is the case... Is it?
And perhaps anybody has found a solution on how to do this in raect-native (android)...

I want to display something like the following:

But what I get is:

Here is my code:

class ShadowTest extends Component {

  render() {

    const shadowOpt = {
      width: 100,
      height: 100,
      color: "#000",
      border: 2,
      radius: 50,
      opacity: 0.8,
      x: 3,
      y: 3,
      //style: { marginVertical: 5 }
    }

    return (
      <View style={{ flex: 1 }}>
        <View style={{ margin: 10, alignItems: 'center',
            justifyContent: 'center' }}>
          <BoxShadow setting={ shadowOpt }>
            <TouchableHighlight style={{
              position: 'relative',
              width: 100,
              height: 100,
              backgroundColor: "#fff",
              borderRadius: 50,
              borderWidth: 1,
              borderColor: '#aaa',
              // marginVertical:5,
              alignItems: 'center',
              justifyContent: 'center',
              overflow: "hidden" }}>
              <Text>aaaa</Text>
            </TouchableHighlight>
          </BoxShadow>
          </View>
      </View>
    )
  }
}

[Daniel Neveux]

I reimplemented this plugin in a way that supports the round corner. It is part of my library but it is isolated enough to be adapted on any project. Just take care to replace the View element.

Demo for android: https://expo.io/@dagatsoin/sproutch
Code: https://github.com/dagatsoin/sproutch/blob/master/src/components/shadow/Shadow.tsx

[Yossi]

Thanks @dagatsoin
Which part of the code implements the circular shadow?

[Daniel Neveux]

It is those SVG commands: https://github.com/dagatsoin/sproutch/blob/master/src/components/shadow/Shadow.tsx#L193

[Yossi]

Thanks!

[Jamyth Luk]

I reimplemented this plugin in a way that supports the round corner. It is part of my library but it is isolated enough to be adapted on any project. Just take care to replace the View element.

Demo for android: https://expo.io/@dagatsoin/sproutch
Code: https://github.com/dagatsoin/sproutch/blob/master/src/components/shadow/Shadow.tsx

I got an Error while updating property 'd' of a view managed by: RNSVGPath

null

UnexecptedData

[Daniel Neveux]

@Jamyth try this branch https://github.com/dagatsoin/sproutch/tree/release/0.0.4

This error is due to dependencies mess with the new expo/rn versions.

[Simon Chaumet]

Still no update on this ? Or any workaround ?