1 second render issue

[alalfakawma]

I have a modal that slides up from the bottom and stops halfway through the screen, I have a Shadow element wrapping the View of the modal, so it shows a backdrop shadow on the top, showing that the View is on top of the screen. Thing is, i'm seeing the shadow render in after a second, or 9/10th of a second, which makes the sliding/shadow animation really not fluid. Idk if this would be faster in a prod build, cause I have not been able to do it, but in my emulator it does look real slow. Is this a preexisting issue or it's just cause it's in an emulator? Or is there a way to optimize it?

[ftzi]

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.

[alalfakawma]

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.

[ftzi]

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.

[ftzi]

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!

[alalfakawma]

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.

[ftzi]

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

[ftzi]

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.

[ftzi]

Implemented in #11, version 3.0.0! Please, read the new README, try it out and report any bug!