React Native Driver

Spring-based animations using React Native Animated

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

Installation

yarn
npm
bun
pnpm
yarn add @tamagui/animations-react-native

Configuration

Add it to your Tamagui config:

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

export default createTamagui({
  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 '@tamagui/animations-css'

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

// animations.native.ts (native)
import { createAnimations } from '@tamagui/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 '@tamagui/animations-react-native'
import { YStack, createTamagui } from 'tamagui'

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

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

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

Pro