fix: Add loop animation support to PresenceTransition

[grnsmn]

Summary

This pull request adds a new feature to the PresenceTransition component in NativeBase, allowing users to create loop animations with ease. The addition of this feature enables developers to create more engaging and dynamic user interfaces without relying on external animation libraries.

Changelog

• Add a new loop prop to the PresenceTransition component, which accepts a boolean value to enable or disable loop animations.
• Modify the internal animation logic of the PresenceTransition component to handle loop animations properly when the loop prop is set to true.
• Update the documentation and examples to demonstrate the usage of the new loop prop.

Benefits:

• Provides a simple and intuitive way to create loop animations using the PresenceTransition component.
• Reduces the need for external animation libraries, making the overall application size smaller and more efficient.
• Enhances the user experience by allowing more engaging and dynamic animations in NativeBase-based applications.

Usage:

To use the new loop prop, simply set it to true when defining your PresenceTransition component:

<PresenceTransition
  loop
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.8 }}
  duration={500}
>
  {/* Your animated content goes here */}
</PresenceTransition>

By setting the loop prop to true, the animation will continuously loop between the initial, animate, and exit states.

[component] [add] - Add loop animation support to PresenceTransition

Test Plan

NB.loop.animation.mov

I hope this new feature proves useful to the NativeBase community, and I'm looking forward to your feedback!

[vercel]

@grnsmn is attempting to deploy a commit to the Geekyants Team Team on Vercel.

A member of the Team first needs to authorize it.