gluestack-style offers a plugin that supports animation properties, utilizing animation libraries such as @legendapp/motion, framer-motion, and moti. We will use @legendapp/motion in this example.
# using npm
# using yarn
How to use:
Initialization of the plugin:
You can initialize the Animation plugin by creating a new instance of the AnimationResolver class and pass it inside config. The AnimationResolver takes an optional styledUtils object that maps the styled utils object. Here's an example:
By default, the plugin aliases @legendapp/motion properties.
In this example, we are creating a new instance of the AnimationResolver class, passing an object with the 'aliases' property as an argument. The aliases object maps the aliases :initial, :animate, and :exit to their corresponding animation props.
Example of creating a styled component:
Once the plugin is initialized, you can use the styled function to create styled components with animation props. Here's an example:
The final internal styled object that will be resolved is:
The Animation plugin provides a AnimatePresence component. Internally, it utilizes AnimatePresence from activated animation driver to check if any component is removed from the React tree, aiding in exit animations. Here's an example:
We used the styled component below to create the above example:
In this example, we're using the AnimatePresence, provided by the animation resolver, to wrap the Box component. Internally, it uses AnimatePresence from activated animation driver.