Reanimated Driver

Reanimated is an animation library that targets React Native and React Native Web. It runs animations off-thread and provides smooth spring and timing animations.

Installation

yarn add @hanzogui/animations-reanimated react-native-reanimated

Follow the Reanimated installation guide to complete setup for your platform.

Configuration

Add your animations to your Gui config:

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

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

How it Works

At runtime, this driver parses animatable style properties and hands them over to Reanimated using worklets. Animations run on the UI thread for smooth 60fps performance.

Animation Configuration

Reanimated animations support both spring and timing (tween) animations:

Spring Animations

{
  type: 'spring',
  damping: 10,     // Higher = less bouncy
  mass: 0.9,       // Higher = more inertia
  stiffness: 100,  // Higher = faster
}

Timing Animations

{
  type: 'timing',
  duration: 300,   // Duration in milliseconds
}

Delay

You can add animation delays using the array syntax:

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

The delay is specified in milliseconds.

When to Use

Advantages:

Off-thread animations - Runs on UI thread for 60fps performance
Cross-platform - Works on web and React Native
Advanced features - Worklets, gesture integration, shared values
React Native optimized - Best performance on native platforms
Powerful - Most feature-rich animation driver

Considerations:

Larger bundle size
Requires Reanimated setup and configuration
More complex than simpler drivers
Web-only apps might prefer Motion or CSS drivers

Platform-Specific Configuration

You can use Reanimated on native and a lighter driver on web:

// animations.native.ts
import { createAnimations } from '@hanzogui/animations-reanimated'

export const animations = createAnimations({
  bouncy: {
    type: 'spring',
    damping: 10,
    stiffness: 100,
  },
})

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

export const animations = createAnimations({
  bouncy: {
    type: 'spring',
    damping: 10,
    stiffness: 100,
  },
})

Then import without the extension:

import { animations } from './animations'

Example

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

const animations = createAnimations({
  bouncy: {
    type: 'spring',
    damping: 10,
    mass: 0.9,
    stiffness: 100,
  },
  quick: {
    type: 'spring',
    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,
    }}
  />
)

Zero Re-renders

The Reanimated driver now works with Hanzo GUI to bypasses all internal style changes to instead directly hand off to Reanimated worklets.

Advanced Features

Reanimated provides advanced features:

Gesture integration - Animate based on gesture values
Shared values - Share animated values between components
Worklets - JavaScript functions that run on the UI thread
Custom animations - Full control over animation curves

See the Reanimated documentation for more details.