It seems that the ios shadow property on react native is different from what this package shows

[Fuyun791]

I used the code below, but it behaves differently in the final visual display, see the image below

      <View
        style={[
          styles.square,
          {
            shadowColor: '#ffffff',
            shadowOffset: {
              width: 2,
              height: 2,
            },
            shadowOpacity: 0.8,
            shadowRadius: 9,

            // elevation: 10,
          },
        ]}>
        <View
          style={{
            borderRadius: 10,
            width: 100,
            height: 100,
            backgroundColor: 'red',
          }} />
      </View>
      <Shadow
        distance={9}
        startColor={'#FFFFFFCC'}
        finalColor={'#00000000'}
        offset={[2, 2]}>
        <View
          style={{
            borderRadius: 10,
            width: 100,
            height: 100,
            backgroundColor: 'red',
          }} />
      </Shadow>

expo

I want to know is it a problem with my code? If yes, can you provide the correct solution? thanks

[SrBrahma]

Hi @Fuyun791!

As I said in #31, this package doesn't aim to mimic the default RN iOS / CSS shadow values and appearance.

If you want to achieve a similar appearance, in #31 I talk about it. You can start by having a higher transparency as the startColor. RN iOS/CSS shadow starts to fade before the component borders, as I said on the linked issue, opposed to how this lib works.

I will develop the said distanceOffset prop eventually to make achieving a similar look easier. Also, the CSS shadow seems to have a non-linear gradient, and I also intend to work on it at some point to have a better shadow, at some performance cost. Maybe, as you are the second person commenting about it, I can try to make a mimicCss prop or something like that to join all that up. In a few weeks I will probably have the time to do so.

Thanks for the issue and I understand it. I will close it as it's a duplicate of #31, but feel free to comment here or on #31 ;)