Reanimated Driver

Advanced off-thread animations with Reanimated

Reanimated provides spring and timing animations for React Native and React Native Web, with off-thread execution on native.

Installation

yarnnpmbunpnpm
yarn add @tamagui/animations-reanimated react-native-reanimated

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

Configuration

Add your animations to your Tamagui config:

import { createAnimations } from '@tamagui/animations-reanimated'
import { createTamagui } from 'tamagui'

export default createTamagui({
  animations: createAnimations({
    fast: { duration: 160, bounce: 0.25 },
    medium: { duration: 300, bounce: 0.15 },
    slow: { duration: 450, bounce: 0.1 },
  }),
  // ...
})

The config format is the same for all four drivers, so a name means the same motion whichever driver renders it.

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

{
  duration: 400,  // the spring's undamped period, in milliseconds
  bounce: 0.5,    // 0 is critically damped, toward 1 is loose, negative is sluggish
}

stiffness, damping, and mass still work for a config already tuned against them, and Reanimated’s velocity, overshootClamping, and rest thresholds pass through.

Timing animations

{
  type: 'timing',
  duration: 300,      // Duration in milliseconds
  easing: 'ease-out', // any css timing function
}

A plain CSS string means the same thing: '300ms ease-out'.

Delay

<Square transition={{ preset: '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: highest performance on native platforms

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 '@tamagui/animations-reanimated'

export const animations = createAnimations({
  bouncy: { duration: 400, bounce: 0.5 },
})

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

export const animations = createAnimations({
  bouncy: { duration: 400, bounce: 0.5 },
})

Then import without the extension:

import { animations } from './animations'

Example

import { createAnimations } from '@tamagui/animations-reanimated'
import { YStack, createTamagui } from 'tamagui'

const animations = createAnimations({
  bouncy: { duration: 400, bounce: 0.5 },
  quick: { duration: 220, bounce: 0.3 },
})

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

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

Zero re-renders

The Reanimated driver works with Tamagui to bypass all internal style changes and hand off directly 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.