Looking for documentation on gluestack-ui v2 with NativeWind? Refer to this link.

Animations

gluestack-ui leverages the power of the Animation plugin from gluestack.io/style to provide animations for a more engaging user experience. By default, all of our animated components are built using the @legendapp/motion, which provides declarative animations for React Native.

Usage:

By default, gluestack-ui/themed comes with with animation plugin plugin installed with @legendapp/motion animation driver. You can use the Animatable Components from @gluestack-style/animation-resolver and from them you can create your own animated components.

import { AnimatedView } from "@gluestack-style/animation-resolver"
import { styled } from "@gluestack-style/react"

const AnimatedBox = styled(AnimatedView, {
  ":initial": {
    opacity: 0,
  },
  ":animate": {
    opacity: 1,
  },
  ":exit": {
    opacity: 0,
  },
})

or You can also extend the style of the animated components and customize it.

const componentTheme = createComponents({
  ...defaultConfig.components,
  ModalContent: {
    theme: {
      ":initial": {
        bg: "white",
      },
    },
  },
})

// Pass this componentTheme in the provider.

Overlay components:

gluestack-ui also provides a set of overlay components that can be used to create a modal-like experience. All the animation props works out of the box with these components. However, to animate component on exit you need to pass AnimatePresence while creating component.

If you can use AnimatePresence from @gluestack-style/animation-resolver, which internally uses AnimatePresence from your chosen driver.

Example:

import { AnimatePresence } from "@gluestack-style/animation-resolver"

export const Tooltip = createTooltip({
  Root,
  Content,
  AnimatePresence, // Can be AnimatePresence from the library you are using
})

Advanced concepts for animations in gluestack-ui

However, you are not limited to use only @legendapp/motion. You can use any declarative animation library you prefer, such as framer-motion, and moti, or others. You can add your own animation driver to the animation-resolver plugin and use it with gluestack-ui. Currently we only provide 2 drivers, @legendapp/motion and moti.

You can refer to customizing animations section's documentation for more details on customizing the Animation Components.