1 second render issue about react-native-shadow-2 HOT 8 CLOSED

I found out the reason of your issue. As your view was getting re-rendered, so was the shadow. The problem wasn't the onLayout, but it was setting a new state, and this new state was causing the onMemo to be recalculated, even for the same dimensions.

Anyway, after some tinkering, I discovered a really promising way that will fix all those issues, and the size won't ever be a optional property anymore - it won't exist! onLayout isn't also used. Shadow applied on the same render!! This can turn to be an awesome improvement for RN/Expo.

Will keep you in touch!

from react-native-shadow-2.

Done! Tomorrow I will release it. More than 3 weeks to have everything working fine.

from react-native-shadow-2.

I found another pixel-gap bug 😞 trying to find another workaround... :/

Edit: That doesn't meant a entire workaround! In fact, I got this bug fixed! :)) Finishing README and will release it asap.

from react-native-shadow-2.

Hi!

Very related: #7

Also, as in the README:
size ([width: number, height: number]) - It isn't required, as it is with react-native-shadow. If you do not pass the size, it will automatically get your component size with onLayout and on the next render apply the shadow properly. So, if not declaring the size, it won't have a shadow on the first render. Looks like I found a way to apply it on the first render automatically, but requires further research. You may open an issue about it so I may feel more motivated to do it hehe

The prod app env is indeed way faster than emulator dev. But the quick frame without the shadow may still be noticeable for more experienced/dev eyes.

If you specify the view size on the prop above, the shadow will be applied at the same frame.

Also, maybe your animated view may be triggering the onLayout multiple times. Read the first paragraph of the linked issue above. Add a console.log to this onLayout of this package and see if it's being called multiple times. If so, I can quickly update the package to add an option to only trigger that onLayout once.

from react-native-shadow-2.

I get what you're saying. I haven't set the size of the shadow. I'm only setting the width and height in percent in containerViewStyle prop. I see that the size prop only takes in a tuple of numbers for width and height, is there a way to have a percentage value? To span the whole screen? Or do I have to get the dimensions of the screen to set the width?

EDIT: I have solved the delay issue of the shadow rendering by applying the size, using Dimensions. But it would be cool if there is a better, more intuitive way of doing it.

from react-native-shadow-2.

I get what you're saying. I haven't set the size of the shadow. I'm only setting the width and height in percent in containerViewStyle prop. I see that the size prop only takes in a tuple of numbers for width and height, is there a way to have a percentage value? To span the whole screen? Or do I have to get the dimensions of the screen to set the width?

EDIT: I have solved the delay issue of the shadow rendering by applying the size, using Dimensions. But it would be cool if there is a better, more intuitive way of doing it.

Hmmm... I haven't tried setting %. I don't know if that would work. Passing a % in the Shadow prop certainly wouldn't work, but maybe in the internals mechanisms it could be done. Still related to #7.

What do you suggest as a more intuitive way? I can only think about #7. There are the SVG limitations I wrote on that linked issue. Could be done, but I need some help there to find a good hack.

from react-native-shadow-2.

Oh wow. That sounds great. Sorry I was not really paying attention to my github notifications as I had manually gotten the width of the screen like I said in the previous comment. Can't wait for you to implement it, would be updating as soon as you push the update.

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.