Comments (17)
Many thanks for the report. I will fix this asap.
from react-native-shadow-2.
@alexco2, I have fixed the undefined is not an object (evaluating 'd.width')
in the just published 7.0.3 (may take a while to be available on Snack). Also, that error didn't happen on Snack here, only in my RN web sandbox local setup. The error was caused by StyleSheet.flatten(false)
returning undefined, contrary to its type definition. Maybe the RN version that Expo 46 the Snack uses have this issue this fixed.
I couldn't get the The argument must be a React element, but you passed null.
error. After the above fix, the code you gave run well on RN web. Please, if you still have it after trying the 7.0.3, ensure that everything is alright in your test case and try to give me any further info that can help me to reproduce this issue.
And again, many thanks for the report!
from react-native-shadow-2.
Yup, having the same issue on Android, thanks for pointing it out. I will fix it asap.
from react-native-shadow-2.
@alexco2 Many many thanks for both reports. Just published 7.0.4 with this fix.
This error was due to react-native-svg not allowing on Android
{!paintInside && <Stop offset={radius / shadowRadius} stopOpacity={0}/>}
inside the RadialGradient
component. I changed it to
{!paintInside ? <Stop offset={radius / shadowRadius} stopOpacity={0}/> : <></>}
and it's now working.
Please do report any further issues!
(and also, beware that running your example may not show the shadow as width: 50, height: 50 may be smaller than the child, being beneath it)
from react-native-shadow-2.
@SrBrahma thank you for your quick fix!
Have you tried running the expo snack on a android emulator? I get the following error with expo go on a Samsung s21.
from react-native-shadow-2.
Hello @SrBrahma thank you for your excellent support. Maybe you should open a way to sponsor a coffee ;)
from react-native-shadow-2.
Indeed! I have though about it on the past a few times. Maybe the time has come! Hehe.
Have a great Sunday!
from react-native-shadow-2.
Just added my humble Buy me a Coffee badge to the Readme ☕😋
Thanks for your contribution!
from react-native-shadow-2.
@SrBrahma I think that is a good idea :)
I can confirm now that the bug does not appear in my case. One thing I noticed is a new and weird behavior in the corners of the shadow. I updated the snack as well. Here are screenshots of what i mean. Do you see it? If you want to I can open a new issue as well.
https://snack.expo.dev/@expoco2/weird-corners-in-react-native-shadow-2
from react-native-shadow-2.
@SrBrahma I've checked again and I am also seeing the same behaviour in one of your examples on both iOS and android. You can see it in the previously mentioned snack
from react-native-shadow-2.
Hmmm. Strange. Will again fix it asap. Thanks for the report.
from react-native-shadow-2.
Hi, sorry for the trouble you had those days.
Once again, many thanks for your reports (and for the coffee you gave me! I will make a good use of it today when I take a walk here in the city 😄).
It's fixed on 7.0.5! Tested on Web, Android and iOS. It may take some good minutes to be available on Snack.
(beware that textAlignVertical: 'center'
is an Android-only style.)
Cool nested shadow! I never tried having it before. I though it wouldn't work as the upper shadow would use the inner shadow size (using its distance), being around it and not around the children. I have an old idea of having an array of shadows, for a better performance and DX.
Please, do report any other found bugs.
from react-native-shadow-2.
Hey @SrBrahma , don't worry about the trouble. This is an open-source project and there is no need for you to meet any requirements and especially not to apologise if something does not work. I really appreciate that you're doing that though! I hope you enjoy the coffee :D
Thanks for your fix. Your library is basically the only possibility to have neumorphism on android. This is why I am using it quite a lot in my project :)
Out of interest. Have you thought about moving from react-native-svg to react-native-skia? I don't know if it has any performance improvements, but it is currently heavily in development. Although something similar could be said about react-native svg, since they are working on fabric support :)
from react-native-shadow-2.
Yes, I have this old plan of moving to skia.
They have their Shadow component but it's very property-limited. I could use their gradients as I use the SVG ones.
But, strangely the skia package weights 250MB. I don't know how much it adds to the final app size and I stopped my research when I found about this fact.
from react-native-shadow-2.
Hey @SrBrahma , I think that is because of the whole skia dependency. I've seen multiple apps that use rn-skia that are not particulary big.
That one for example had less than 10mb
https://play.google.com/store/apps/details?id=finance.pinkpanda.mobile
Reference:
https://twitter.com/margelo_io/status/1520083516201000961?t=yCC3GUSMcemZ8LwnfDK8xQ&s=19
from react-native-shadow-2.
@SrBrahma I still have this issue. v7.0.5 does not work!
from react-native-shadow-2.
@nguyenhoanglam This is strange. Did you use a previous version before 7.0.5? I would say this is a cache bug. You may want to Google on how to clear the cache for react-native/expo.
Else, please share a reproducible example.
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.