Fade-in/Fade-out animation

[leo-bo]

Dear @stephenkopylov ,

Once again, thanks for your great job on this library.

This issue is rather a feature request. I would like to implement a fade-in/fade-out animation of the overlay on the UI thread, but wrapping <RNHoleView /> into <AnimatedView /> in order to set useNativeDriver to true does not seem to work. I wonder if you have any plans on adding native fade-in/fade-out animation of the entire overlay in addition to the animation of the holes which is already there.

If I missed something and it's already possible to fade the overlay in natively, please point me in the right direction.

Thank you in advance.

Kind regards, Leo

[stephenkopylov]

Hi @leo-bo!

Let me clarify one detail: Do you mean alpha/opacity fade in/out?

If so - it's not so difficult to implement on our side

[stephenkopylov]

@leo-bo Bud have you tried to put <AnimatedView> as nested view into <RNHoleView> and set the RNHoleView's background color to fully transparent one?

[leo-bo]

Dear @stephenkopylov ,

Thanks a lot for reacting so quickly, highly appreciated!

Bud have you tried to put as nested view into and set the RNHoleView's background color to fully transparent one?

I have not thought of that, thanks for the hint! I wonder whether that was mentioned somewhere in the examples/documentation and I simply missed it.

I believe your library is a great solution for implementing onboarding for new users of an app. At least that's what our company uses it for. In such a use case revealing the overlay smoothly is a must, hence my feature request.

Here's an example of a screen that I needed to overlay in the onboarding in our app:

Surely I needed a smooth and eased transition between those two states. For now I have solved the task by animating the RGBA value of backgroundColor in the style of <RNHoleView> via requestAnimationFrame() + an easing formula. The solution is performant enough but I'll try the approach you suggested as well since it probably is even better.

I believe I am not the only one who might want to use your library in such a way. Perhaps some explicit documentation on how fade-in and fade-out effects of <RNHoleView> should be achieved could be very helpful.

Once again, thank you for your time!

KR, Leo

[stephenkopylov]

@leo-bo

I wonder whether that was mentioned somewhere in the examples/documentation and I simply missed it

We mentioned this here:

It means that you can put any kind of view inside <RNHoleView> without loosing it's features (yes, including <Animated.View> too) =)

We are trying to keep this library lightest possible to prevent creating the monster. So if the workaround with putting <AnimatedView> into the <RNHoleView> works for your case - I'd prefer to leave it as it is.

But if you'll face any problems - let us know, we'll try to fix it!

[leo-bo]

@stephenkopylov Thanks for your reply!

We are trying to keep this library lightest possible to prevent creating the monster.

I can only support that approach. Have a great day!

KR, Leo