Comments (8)
@alexco2 , you may pass viewStyle={{alignSelf: 'stretch'}}
for the current version (v3). Tested here and it worked. Thanks for the bug report! It's really important.
In the Shadow code, I am using alignSelf: 'flex-start' to fix another bug.
I will reopen this until I fix your case. Maybe changing that 'flex-start' to 'stretch' would also fix that other bug.
For the width but not height: no, that wouldn't increase the performance. It would still trigger a second render to apply the received onLayout size.
from react-native-shadow-2.
Implemented in #11, version 3.0.0! Please, read the new README, try it out and report any bug!
from react-native-shadow-2.
@SrBrahma wow, amazing. Thank you so much for your hard work. I will report any bugs as soon as I am able to try it out (which is definitely on my to do list).
from react-native-shadow-2.
@SrBrahma
Really interesting, thanks for the clarification.
My case was simply solved by passing a width to the child view (in my case 0.9* Screenwidth).
If I come up with a clever way to handle this issue, I will let you know :)
from react-native-shadow-2.
I am closing this as I have added this issue and its 'stretch' workaround to the FAQ and I have no idea to better handle it right now.
Once again, thanks for the bug report and feel free to comment here! :)
from react-native-shadow-2.
About onLayout: the issue is if the view changes its size. Maybe I could add a prop like onlyOnceOnLayout, and it would simply use a useState to only allow the onLayout prop if the state isn't set yet . Can you manually test if it would really increase your performance? Also, do you know about useMemo? Maybe it can also increase the performance.
About the same render shadow, this was my test of it when I was developing this package, as seen in the end of the index.tsx:
{/* Experimental: This below allows overflowing the children size.
However, can't find a way to set the viewBox with this approach, so the gaps would probably happen.
Would it sucessfuly use the style width and height as viewBox without gap?
Maybe could use this on first render, then use the childLayout to set the viewBox sizing. The gaps would
only happen on first render, but being it barely noticeable wouldn't be an issue. Better than no shadow on 1st render.
*/}
<Svg style={{ position: 'absolute', width: '110%', height: '100%', left: -10 }}>
<Rect height={10} width={'100%'} fill={'#0f0'} y={'50%'}/>
</Svg>
I don't remember exactly the reasons of the magic values there, but I think the 110% was an increased View size to allow the shadow size in the SVG bounds, and the -10 was the shadow distance.
That may be problematic: e.g: Your view is 100px width, and you want a giant 50px shadow. The 110% would only allow a 10px shadow for one side. So, either the % would be great by default (potentially resource consuming, as if I understand the functioning of the SVG, it will render a big image), or maybe manually changeable by the dev. Like, you know 140% would always fit for your case.
IIRC, it worked but between each shadow piece (4 sides and 4 corners), there might be a pixel wide gap or an overlap of the shadows. As after the first render it would use the onLayout, only trained and quick eyes would notice that.
I probably won't work on that right now, as I am engaged in another project and have some other requested stuff on another ones in my queue. However, it shouldn't be too difficult for you to find good solutions. I would, and surely the other devs, appreciate a lot a good PR :-)
from react-native-shadow-2.
@SrBrahma
I now tested the library thoroughly and implemented with it neumorphism in my app. The first render issue from other libraries are not visible. So far it works really well, thank you! 😄
One issue I came across was in rare cases regarding the dimensions of a component which is wrapped with <Shadow>
I made a snack showing the problem:
https://snack.expo.dev/@expoco2/shadow-2
The first component shows the width I would expect the component to have. The second component shows the issue I came across. The width "shrinks". Did I perhaps miss something in the documentation?
Also, is it possible to pass a width but not a height to <Shadow>
? Would this increases performance for cases where just the height is dynamic?
from react-native-shadow-2.
No, setting the default as 'stretch' also causes the bug.
This is the bug in question:
(having the shadow child component a fixed size)
This happens when you have:
<View>
<Shadow ...>
{component}
</Shadow>
<aLongSiblingComponent/>
</View
I will leave a tip in the README about this stretch workaround.
Edit: For future references, in your case, alignSelf: undefined would do the same. Maybe I can create a new prop, stretch
or grow
to have all the available size or not. I don't know what default value would be the best. The best case would be if that wasn't necessary at all. It could check if the child has a fixed size, and if so, use the flex-start. Else, undefined to use all available space. As I am without time right now for further research, will leave it to be done.
Suggestions are welcome.
from react-native-shadow-2.
Related Issues (20)
- 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
- 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
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.