Comments (9)
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.
from react-native-shadow-2.
@SrBrahma It really looks amazing in the Sandbox, great work! 💪
from react-native-shadow-2.
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.
from react-native-shadow-2.
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.
from react-native-shadow-2.
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.
from react-native-shadow-2.
@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.
from react-native-shadow-2.
@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:
from react-native-shadow-2.
This explains why it's needed the limitRadius prop:
Not always a maxRadius = size/2 would be good.
from react-native-shadow-2.
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!
from react-native-shadow-2.
Related Issues (20)
- Have tried to use this lib, but I can't. What am doing wrong? HOT 5
- [Fixed in v13.6.0] Incompatible with react-native-svg v13.5.0 HOT 5
- On IOS, setting distance=0 does not work properly HOT 2
- Border radius problem HOT 2
- x-axis offset not working as expected (iOS) HOT 1
- could you provide a new prop `blur`? HOT 3
- X offset not working on IOS HOT 1
- Inner shadow HOT 4
- Issue with borderRadius in the latest version 7 when size of the elements changes HOT 5
- Unable to find an element with testID HOT 3
- Can I do this effect with this library? HOT 1
- Sides and corners HOT 2
- Fail to compile on web "Support for the experimental syntax 'jsx' isn't currently enabled" HOT 3
- Android
- SVGs in corners with border radius are not aligned properly HOT 9
- I'm using react-native-shadow-2 but it's weirdly slow when switching to screen ? HOT 2
- the shadow can not as same as web css HOT 2
- Sandbox update
- Corners/sides types should allow Partial
- Draw a shadow around an svg HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-shadow-2.