[Feature Request] Limit shadow radius calculation to component dimensions

[jimmi-joensson]

The fast way to make completely round borders in React Native is to set a very high borderRadius like so:

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#000',
    height: 300,
    borderRadius: 1000,
    width: 100,
  },
});

This technique have an interesting result used with react-native-shadow-2.

A failsafe to prevent something like this happening could be to limit the shadow calculation by the component's dimensions from the LayoutEvent Object using onLayout. The smallest value of either width or height should be used for the calculation.

Example of the calculation could look something like this:

// First get the smallest dimension of width or height
const smallestDims = e.layout.width <== e.layout.height ? e.layout.width : e.layout.height

// Second use the smallest dimension to calculate the failsafe shadow radius
const failsafeRadius = radius > smallestDims ? smallestDims / 2 : radius

[ftzi]

But this is still problematic on the first render. I have thought about it already and tried a workaround for it (and I already use onLayout for the exact shadow positioning and sizing), but I don't know how to deal with the first render, where the code don't know yet the component size and we use relative positioning and sizing.

The width and height are '100%' on this first render, and only set to the child component size on the second render and beyond. How to know which '100%' is longer?

This is the current code for the topLeft corner, for example:

{activeCorners.topLeft && <Svg width={topLeftShadow + additional} height={topLeftShadow + additional}
  style={{ position: 'absolute', top: -distance, left: -distance }}
>
  <Defs>{radialGradient('topLeft', true, true, topLeft, topLeftShadow)}</Defs>
  <Path fill='url(#topLeft)' d={`M0,${topLeftShadow} a${topLeftShadow},${topLeftShadow} 0 0 1 ${topLeftShadow} ${-topLeftShadow} v${distance} ${paintInside
    ? `v${topLeft} h${-topLeft}` // read [*2] below for the explanation for this
    : `a${topLeft},${topLeft} 0 0 0 ${-topLeft},${topLeft}`
  } h${-distance} Z`}/>
</Svg>}

Where

• topLeft is the corresponding corner radius
• topLeftShadow is ~= the corresponding corner radius + shadow distance.
• additional is 1, just a required safe margin for the size to avoid clips

If I set '50%' for both width and height in your image example, the corner shadow would actually be curvy, and it would overlap with the top side shadow.

But yes, dealing with given sides values or 2nd render and beyond is doable. But I have no idea if this is possible at all on the first render.

[jimmi-joensson]

If this is impossible to archive on first render, then I think it would be an acceptable solution to wait displaying the shadow until the second render. Read this answer from you, and would probably be the same technique I would suggest, setting a prop after first onLayout.

To make sure there is no layout jumping or such, the shadows could just have opacity: 0 until the second onLayout && isRendered. How all this will impact performance I don't know.

To comply with people wishing for showing shadows already on first render it could be controlled with a prop like isFailsafe: boolean defaulting to either true or false, depending on the behaviour most people want.

[ftzi]

Yeah, this is what was done before the 3.0.0 version, the automatic shadow sizing was only applied after the first render, after the onLayout. It was an already good solution, but noticeable for those with some attention. You may try it with npm i react-native-shadow-2@1. But it didn't limit the radius for each corner, but yes, back then it could be done.

I will think about re-adding it as a prop, for specific cases like yours, that seems to be one.

For the issue you linked, it would be very perceptible if a component changed from width 200 to 400 (changing alignSelf value) or the contrary, even for just a render. Wouldn't be good at all :/ even if the component had opacity 0 at the first render, it just showing up would be noticeable and strange. It's better for this situation for the dev to set the proper alignSelf value.

[ftzi]

@jimmi-joensson, do you have good name ideas for both props?

limitRadius seems to be good, but I am struggling to find a good 'safeRender', 'exactRender' name, to only render after the onLayout.

I had an interesting idea some weeks ago to limit in the first render, the relative one, to use aspectRatio: 1, to keep the corner square (width=height), but I can't find (yet?) solutions to further related problems.

I have a free time today/tomorrow, and I want to implement the simple 'after 2nd render solution'. I only need this second prop name.

[jimmi-joensson]

@SrBrahma First I think safeRender would be a fine prop name.
Second is it necessary to make a limitRadius prop? Shouldn't that behaviour not just be on at all times? Example I put borderRadius: 1000, the shadow radius will be 1000, unless the containers dimensions are less. This can maybe result in a weird scenario if I set safeRender: false, however still think the result will be better than this:

[ftzi]

This explains why it's needed the limitRadius prop:

Not always a maxRadius = size/2 would be good.

[ftzi]

Long story short, I've finally found out after searching a lot how CSS (and apparently also RN) limits its radii (plural of radius, as I also found out). https://css-tricks.com/what-happens-when-border-radii-overlap/

I will only add the safeRender, as limitRadius doesn't seem to be required anymore. If anyone wants to disable this radius limitation, just comment here or open a new issue so I may add it as a prop.

Sorry for the long await. I will publish the new version with this soon.

[ftzi]

Added it in 5.0.0, via #25! Please, report any bug you find and tell me what you think of it!

You may try it now on the Sandbox. It's beautiful! 😃

To see it in action, set the Border Radius at the max value and keep decreasing the width/height.

Note that there on the sandbox all radii are the same value and there is no safeRender on it -- but it was added in this new release!

5am here and I will finally sleep 😅

Thanks!

[jimmi-joensson]

@SrBrahma It really looks amazing in the Sandbox, great work! 💪