Comments (7)
Thanks!
If you change the offset to offset={[-5, -5]}
, does it also happens for the top and left sides?
Looks like it's a paintInside issue. The corners and sides contacts seems to be ok.
I think I found the cause: In the line 432 (in TS source),
react-native-shadow-2/src/index.tsx
Line 432 in aaf5dee
width={width} height={height}
".
In the transpiled .js file, it's on the line 240. You can give it a try and edit the node_modules/react-native-shadow-2/lib/index.js
and replace what I quoted with width={widthWithAdditional} height={heightWithAdditional}
. I think it will work, as by having a smaller width and height, the SVG gets shortened, specially on high dp screens, as your iPhone must be. What is your iPhone model?
If it fixes it, I will release it asap.
Edit: Hmmm... actually, it shouldn't be the cause of this issue. The wrapping svg already has the withAdditional. Maybe changing it would cause overlaps on smaller dps. Anyway, give it a try.
from react-native-shadow-2.
Also, please, make a minimal reproducible example in Expo Snack (iOS), so if I can get this issue here I won't have to make you try different stuff.
from react-native-shadow-2.
@SrBrahma thanks for the quick reply, I have tried editing line 240 above but that did not fix the issue.
Below is a screenshot of offset={[-5, -5]}
, you can see that they are some 1 pixel lines visible
from react-native-shadow-2.
Also, the issue is visible on your snack, just change the shadow color to a darker color - https://snack.expo.dev/@srbrahma/react-native-shadow-2-sandbox
I am using an iPhone Xs
from react-native-shadow-2.
Hi, @walterholohan.
Big text ahead just for future references:
I managed to get the issue on my iPhone 8. As it doesn't have a high dp and has the same issue, this seems it's an issue caused by how react-native-svg handles masks on iOS, a svg tag that paintInside uses. It doesn't seem to be predictable on iOS. Sometimes an x/y positioning of like +1 would fix it, sometimes not. Changing the size or positioning would change its thickness somewhat randomly. In your image, you can see that some lines are thicker than others:
I've managed to get a solution: on 2nd render and beyond (or when size property is defined), we use a simple <Path/> SVG component to exactly paint the internal of the shadow.
<Path fill={startColor} d={`M0,${topLeft} v${height - bottomLeft - topLeft} h${bottomLeft} v${bottomLeft} h${width - bottomLeft - bottomRight} v${-bottomRight} h${bottomRight} v${-height + bottomRight + topRight} h${-topRight} v${-topRight} h${-width + topLeft + topRight} v${topLeft} Z`}/>
I can't do this on the first render as the Path doesn't accept percentage values, only numbers.
We could do this on the first render if we smartly placed rectangles inside the hole, but it's a quite hard task, as each corner may have different radii. You can see this if you imagine a square and at each corner you remove a square of a random size. What algorithm would you use to always fill the entire hole without overlaps, as overlaps would mess the internal color, as it may have transparency? Also, doing this wouldn't give a guarantee that it wouldn't also give gaps.
On the first render, the current mask solution is still used, so the gaps will briefly show up. But, on a 60fps screen, 1px line and for something that just appeared, it isn't noticeable for common eyes.
tl;dr, Released 6.0.3 via 2f3001f!
Please, tell me if it worked for you!
from react-native-shadow-2.
If you think that those lines are noticeable on the first render, I could really use a hand on that rectangles algorithm. I am really out of time to do it right now.
from react-native-shadow-2.
This was recently merged on react-native-svg on 12.3.0: software-mansion/react-native-svg#1658
As it both mentions iOS mask and pixel-density, it probably fixes this issue on the first render, working nicely as it does on Android.
I will it later try without my fix and with this new svg version.
If it fixes this issue, I think I will leave my fix anyway as it's simpler and certainly improves the paintInside performance and memory usage on 2nd render and beyond.
from react-native-shadow-2.
Related Issues (20)
- How to convert Figma design with box-shadow HOT 4
- Web can't support more than 1 shadow. HOT 2
- Not able to apply shadow on Pressable HOT 4
- Bug: The argument must be a React element, but you passed null with & weird behavior in corners - newest version HOT 17
- Support multiple children and follow shape of SVG HOT 1
- 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
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.