React Native Driver

React Native's Animated library is the animation library that comes built into React Native and React Native Web.

Installation

yarn add @hanzogui/animations-react-native

Configuration

Add it to your Gui config:

import { createAnimations } from '@hanzogui/animations-react-native'
import { createGui } from '@hanzo/gui'

export default createGui({
  animations: createAnimations({
    fast: {
      damping: 20,
      mass: 1.2,
      stiffness: 250,
    },
    medium: {
      damping: 10,
      mass: 0.9,
      stiffness: 100,
    },
    slow: {
      damping: 20,
      stiffness: 60,
    },
  }),
  // ...
})

Animation Configuration

React Native animations use spring physics with these parameters:

Spring Parameters

damping - How quickly the spring settles. Higher = less bouncy
mass - Mass of the object attached to the spring. Higher = more inertia
stiffness - Spring stiffness coefficient. Higher = faster animation

createAnimations({
  bouncy: {
    damping: 10,
    mass: 0.9,
    stiffness: 100,
  },
  quick: {
    damping: 20,
    mass: 1.2,
    stiffness: 250,
  },
})

Delay

You can add animation delays using the array syntax:

<Square transition={['bouncy', { delay: 200 }]} />

The delay is specified in milliseconds and uses Animated.delay() internally to sequence animations.

When to Use

Advantages:

Cross-platform - Works on web and React Native
Built-in - No additional animation library needed
Spring physics - Natural, physics-based motion
Mature - Battle-tested in React Native ecosystem

Limitations:

Larger bundle than CSS driver
Less advanced than Reanimated
Web-only apps might prefer lighter alternatives

Platform-Specific Configuration

You can use different drivers on web vs native using platform-specific file extensions:

// animations.ts (web)
import { createAnimations } from '@hanzogui/animations-css'

export const animations = createAnimations({
  quick: 'ease-out 150ms',
})

// animations.native.ts (native)
import { createAnimations } from '@hanzogui/animations-react-native'

export const animations = createAnimations({
  quick: {
    damping: 20,
    stiffness: 250,
  },
})

Then import without the extension:

import { animations } from './animations'

Your bundler will automatically pick the right file based on the platform.

Example

import { createAnimations } from '@hanzogui/animations-react-native'
import { YStack, createGui } from '@hanzo/gui'

const animations = createAnimations({
  bouncy: {
    damping: 10,
    mass: 0.9,
    stiffness: 100,
  },
  quick: {
    damping: 20,
    mass: 1.2,
    stiffness: 250,
  },
})

export default createGui({
  animations,
  // ... rest of config
})

// Usage in components
export const MyComponent = () => (
  <YStack
    transition="bouncy"
    enterStyle={{
      opacity: 0,
      scale: 0.9,
    }}
  />
)