React Native Driver

Spring-based animations using React Native Animated

This native-only driver connects Tamagui to React Native’s Animated library.

Web applications should use the CSS, Motion, or Reanimated driver.

Installation

yarnnpmbunpnpm
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: { 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.

Animation configuration

React Native animations are springs, written as a duration and a bounce:

Spring parameters

duration: the spring’s undamped period in milliseconds, defining how fast the animation feels. It is not a fixed cutoff: a bouncy spring continues oscillating past it.
bounce: 0 is critically damped, values toward 1 oscillate, and negative values produce an overdamped spring.

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

stiffness, damping, and mass still work for a config already tuned against them, and velocity, overshootClamping, and the rest thresholds pass through to Animated.spring.

Delay

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

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

When to use

Advantages on native:

Built-in: no additional external animation library needed
Spring physics: natural, physics-based motion
Reliable: uses core React Native Animated

Limitations:

Less advanced than Reanimated
Not available on web

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: { duration: 220, bounce: 0.3 },
})

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

export const animations = createAnimations({
  quick: { duration: 220, bounce: 0.3 },
})

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: { 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"
  />
)