https://snack.expo.dev/@joe06102/6c4fc6

I can not reproduce the problem on the expo. Do you have any idea how it happens?

I will take a look into it this weekend. It would be very helpful for me if you find a way to reproduce it on iOS emulator in Expo (as I don't own an iOS), maybe trying a bigger resolution somehow (the gaps may be vanishing due to the zoom out / scale, the many pixels of the ios screen become fewer pixels to fit our pc screens), maybe trying fractional sizes, like 101.93 etc.

As you are entering the size prop, I think the problem may be in the dp to pixel conversion.

If I can't find how to fix it, I will use the native iOS shadow, that very certainly will have the exact same look as this lib for Android.

Just to be sure, what version of this lib are you using in your project? Please, ensure you are using the latest one and clean your RN/Expo cache and try it again, if you at some point had a previous version.

Just to be sure, what version of this lib are you using in your project? Please, ensure you are using the latest one and clean your RN/Expo cache and try it again, if you at some point had a previous version.

Thx for the reply! I'm using the latest version 5.1.0. I tried starting the program with the resetCache: true, which did not work either.

Besides, I've run the program on different apple devices and the behaviors varies among them. on iPhone 6s, the gap is less obvious on the iPhone 6s than that on the iphoneX.

I will take a look into it this weekend. It would be very helpful for me if you find a way to reproduce it on iOS emulator in Expo (as I don't own an iOS), maybe trying a bigger resolution somehow (the gaps may be vanishing due to the zoom out / scale, the many pixels of the ios screen become fewer pixels to fit our pc screens), maybe trying fractional sizes, like 101.93 etc.

As you are entering the size prop, I think the problem may be in the dp to pixel conversion.

If I can't find how to fix it, I will use the native iOS shadow, that very certainly will have the exact same look as this lib for Android.

I tried the native shadow on ios before but it did behave the same as the shadow-2 with the same params. Maybe I should take more tries to align the behaviors.

By native shadow, I mean the https://reactnative.dev/docs/shadow-props :) But I just noticed that it doesn't support some functionalities of this lib, like specific radius for each corner (it actually uses the borderRadii style values). But, if we can't figure out how to fix it, I may add a fallback to it for iOS.

I am going to ask a few things -- this is the only way I may help your case and other iOS users (besides the fallback to the native shadow):

1. The source code is the https://github.com/SrBrahma/react-native-shadow-2/blob/main/src/index.tsx.

Copy it and the utils.ts to a folder in your project, and import the Shadow component from it.

2. Add console.log(JSON.stringify({scale, width, height, distance, radii, cornerShadowRadius, }, null, 2)) at the line 308.
   (JSON to have a pretty and better readable output)

3. Also, see if the problems also happen even if not passing the size prop (as you did with size={[100, 100]}). The lib has a way to get the exact component size with onLayout.

4. Send me here the log output when it happens and when it doesn't, if you find out. Try also changing the radius values, I suspect that the problem is with it or with the dp scaling rounding.

Edit: if you don't use typescript, you will need to change the lib .js file in the node_modules/react-native-shadow-2/lib. You may need to rename the variable values if they have different names there, changed in the TS compilation process. The line number may also be different, but just add it before the return inside the shadow useMemo().

Thx, SrBrahma.

The output with size={[100,100]}(render only triggered once):

{
  "scale": 2,
  "width": 100,
  "height": 100,
  "distance": 15,
  "radii": {
    "topLeft": 10,
    "topRight": 10,
    "bottomLeft": 10,
    "bottomRight": 10
  },
  "cornerShadowRadius": {
    "topLeftShadow": 25,
    "topRightShadow": 25,
    "bottomLeftShadow": 25,
    "bottomRightShadow": 25
  }
}

And the output without size props(render triggered twice):

//the first
{
  "scale": 2,
  "width": "100%",
  "height": "100%",
  "distance": 15,
  "radii": {
    "topLeft": 10,
    "topRight": 10,
    "bottomLeft": 10,
    "bottomRight": 10
  },
  "cornerShadowRadius": {
    "topLeftShadow": 25,
    "topRightShadow": 25,
    "bottomLeftShadow": 25,
    "bottomRightShadow": 25
  }
}

// the second
{
  "scale": 2,
  "width": 100,
  "height": 100,
  "distance": 15,
  "radii": {
    "topLeft": 10,
    "topRight": 10,
    "bottomLeft": 10,
    "bottomRight": 10
  },
  "cornerShadowRadius": {
    "topLeftShadow": 25,
    "topRightShadow": 25,
    "bottomLeftShadow": 25,
    "bottomRightShadow": 25
  }
}

Unfortunately, the problems still happen in both case.

I appreciate. Is there any gap when using radius={0}?

with shadow' s radius = 0 & children's borderRadius = 0

But the gap becomes smaller if I change to the fractional size:

  <Shadow
    distance={15}
    startColor={'#000000ff'}
    finalColor={'#00000000'}
    offset={[10, 0]}
    radius={0}
    size={[101.93, 101.93]}
  >
    <View
      style={[
        {
          width: 101.93,
          height: 101.93,
          borderRadius: 10,
          backgroundColor: '#fff',
        },
      ]}
    ></View>
  </Shadow>

(first image of the issue)

(first image last post)

Seems that we are having overlaps before the gaps. Apparently the problem is how iOS is handling the parts positioning.

Can you send here an image with

 <Shadow
    distance={15}
    startColor={'#00f9'}
    finalColor={'#f009'}
    radius={0}
    size={[100, 100]}
    paintInside
  />

then

 <Shadow
    distance={15}
    startColor={'#00f9'}
    finalColor={'#f009'}
    radius={0}
    size={[100, 100]}
    sides={[]}
    paintInside
  />

then

 <Shadow
    distance={15}
    startColor={'#00f9'}
    finalColor={'#f009'}
    radius={0}
    size={[100, 100]}
    corners={[]}
    paintInside
  />

All without the child. This will allow us to see what parts are invading the other part space.

Also, in line 43 there is const additional = isWeb ? 0 : 1;. Try changing this 1 to 5 and see if there is any change on the first code in this message.

And changing the addtional from 1 to 5 doesn't have any effect.

You are being very helpful! Thanks a lot, really.

Three questions before trying the fixes:

a) Are you using the copied .tsx file or changing the .js in node_modules? I ask this because sometimes when changing the node_modules files they won't take effect right away.

b) Just to be sure, are you using [email protected], right?

c) Are you using RTL? If you don't know what this is, you are not using and that's ok (would also be ok to use it)

Using the previous component:

 <Shadow
    distance={15}
    startColor={'#00f9'}
    finalColor={'#f009'}
    radius={0}
    size={[100, 100]}
    paintInside
  />

No need to send images for the requests below as I don't want to give you too much work, but be very attentive with the answers. For each item, watch out for any changes and report them or say that there are visible no changes.

For right gap:

1. Add , backgroundColor: '#000', width: 100, height: 100 in paintInside svg style, at line 410. See if the gap between the center square and the right shadow is filled with black. If the black grows by more pixels than it should, change the widthWithAdditional and heightWithAdditional to 100 at the line above, 409. At least, there must be a visible black square below/above the center square. If not, the changes aren't taking effect.

2. If above doesn't work, undo the changes and do the same for the right shadow style, with , backgroundColor: '#000', width: 15, height: 100. You may also need to change the WithAdditional to 15 and 100, like above.

3. Undo everything and add viewBox={'0 0 15 100'} prop to line 329 and viewBox={'0 0 100 100'} to now line 412. This shouldn't work if any of the two above didn't work, but not bad trying anyway. If above worked, this may fill the gap properly.

4. If no success, undo and at line 328 change left: -distance to right: 0.

Undo everything above. For top overlap:

1. Add viewBox={'0 0 100 15'} to line 345.

2. If no success, undo and add width: 100, height: 15 to styles at line 344. Look for changes and then change the corresponding WithAdditional props at the line above with the same values.

3. If no success, undo and change top: -distance at 344 to transform: [{translateY: -distance}]

4. If no success, undo and change top: -distance at 344 to bottom: 115. Maybe the overlap will turn into a gap.

If we don't achieve success and I don't have any more ideas, I will open an Issue at the react-native-svg repo requesting for help.

Once again, thank you very much for your service! :)

It seemed like that there were some incorrect screen-scale settings in our ios app that led to the problem. By accident, I found all the gaps are disappeared after they fixed the screen-scale errors. And the lib works like a charm now on both platforms.
I'll paste the resolution when I figure it out later.
Thx again for your kind responses!

:)

Please let me know later where was the problem!

I am getting the same issue when I apply an offset to my shadow. A 1 pixel gap appears on iOS (Android is fine)

<Shadow
				distance={SPACING.s12}
				viewStyle={{ alignSelf: 'stretch' }}
				radius={SPACING.s16}
				startColor={COLORS.primary}
				finalColor={SHADOW_COLORS.finalColor}
				offset={[0, 2]}
				safeRender
			>

Thanks, @walterholohan . Just on the bottom side?

I have an iOS now and when I have the time I will investigate this.

Nope its on the right side too if I add a x offset