Bug: The argument must be a React element, but you passed null with & weird behavior in corners - newest version

[srbrahma]

Bug: The argument must be a React element, but you passed null with & weird behavior in corners - newest version

[SrBrahma]

Many thanks for the report. I will fix this asap.

[SrBrahma]

@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!

[SrBrahma]

Yup, having the same issue on Android, thanks for pointing it out. I will fix it asap.

[SrBrahma]

@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)

[alexco2]

@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.

[alexco2]

Hello @SrBrahma thank you for your excellent support. Maybe you should open a way to sponsor a coffee ;)

[SrBrahma]

Indeed! I have though about it on the past a few times. Maybe the time has come! Hehe.

Have a great Sunday!

[SrBrahma]

Just added my humble Buy me a Coffee badge to the Readme ☕😋

Thanks for your contribution!

[alexco2]

@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

[alexco2]

@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

[SrBrahma]

Hmmm. Strange. Will again fix it asap. Thanks for the report.

[SrBrahma]

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.

[alexco2]

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 :)

[SrBrahma]

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.

[alexco2]

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

[nguyenhoanglam]

@SrBrahma I still have this issue. v7.0.5 does not work!

[SrBrahma]

@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.