Fix thin red circle around Like button on iOS

[khuddite]

Fixes #6118

Summary: We display an animation when the post is liked on the Post screen around Like button. However, when the post is already liked, we still display the animation UI with 0 opacity without an animation. That seems problematic on iOS because there is a noticeable thin red circle displayed even though its opacity is set to zero. I think it has something to do with how iOS handles UI rendering or how react-native-reanimated library handles keyframes.

Solution: The animation is completely removed from DOM tree when unnecessary. When necessary, it gets mounted and displays the animation as usual. It results in the reported issue being fixed while not impacting the current animation implementation.

Updated behavior:

Simulator.Screen.Recording.-.iPhone.16.Plus.-.2024-11-05.at.14.07.50.mp4

[layeredstrange]

It's not just iOS.

This is visible on 3 of my Android devices.

[haileyok]

@khuddite Thank you! Some of the var names were a bit confusing, took me a bit to understand what was going on here. So I adjusted those and pushed into this branch. Appreciate you digging into this!

[khuddite]

It's not just iOS.

This is visible on 3 of my Android devices.

Thanks for confirming that. I confirmed it's fixed on Android as well.

[khuddite]

@khuddite Thank you! Some of the var names were a bit confusing, took me a bit to understand what was going on here. So I adjusted those and pushed into this branch. Appreciate you digging into this!

@haileyok Thanks, new var names make more sense.

[surfdude29]

Thank you so much @khuddite and @haileyok for looking into and fixing this! 🙏

A tiny thing but it was kind of annoying me lol