Spring Presets

Five spring configurations tuned for specific interaction types. Each preset is a WithSpringConfig — pass it directly to Reanimated's withSpring.

Import

typescript

import {
  SPRING_SNAPPY,
  SPRING_LIQUID,
  SPRING_REVEAL,
  SPRING_BOUNCE,
  SPRING_PRECISE,
} from 'reactnatively';
// or from 'reactnatively/animations'

Preset reference

SPRING_SNAPPY{ damping: 28, stiffness: 340 }

Fast and decisive. Snaps into place.

Best for: Press/release interactions, toggles, quick UI feedback

SPRING_LIQUID{ damping: 24, stiffness: 260 }

Smooth and organic. Feels like fluid motion.

Best for: Floating panels, glass surfaces, page transitions

SPRING_REVEAL{ damping: 22, stiffness: 200 }

Deliberate arrival with slight settle.

Best for: Entrance animations, modals appearing, content reveal

SPRING_BOUNCE{ damping: 14, stiffness: 280 }

Bouncy overshoot. Expressive and fun.

Best for: Playful UI elements, celebration states, FAB press

SPRING_PRECISE{ damping: 36, stiffness: 400 }

Near-instant, minimal overshoot. Very controlled.

Best for: Value sliders, precise positioning, charts

Usage with withSpring

typescript

1import { useSharedValue, withSpring } from 'react-native-reanimated';2import { SPRING_LIQUID, SPRING_SNAPPY } from 'reactnatively';34const scale = useSharedValue(1);5const opacity = useSharedValue(1);67function onPressIn() {8  'worklet';9  scale.value   = withSpring(0.96, SPRING_SNAPPY);10  opacity.value = withSpring(0.88, SPRING_SNAPPY);11}1213function onReveal() {14  'worklet';15  scale.value = withSpring(1, SPRING_LIQUID);16}

useSpring — reduced-motion aware

Use the useSpring hook instead of importing a preset directly when you want reduced-motion handling — it returns a collapsed spring when the OS setting is on:

typescript

import { useSpring } from 'reactnatively';

// Returns reducedMotion-safe spring
const springConfig = useSpring('liquid');

Custom springs

Create your own spring configs by extending a preset:

typescript

import { SPRING_LIQUID } from 'reactnatively';
import type { WithSpringConfig } from 'react-native-reanimated';

// Slower, heavier liquid — for large panels
const SPRING_HEAVY: WithSpringConfig = {
  ...SPRING_LIQUID,
  damping: 30,
  stiffness: 200,
};