withSpring

withSpring lets you create spring-based animations.

Loading...

Reference

import { withSpring } from 'react-native-reanimated';

function App() {
  sv.value = withSpring(0);
  // ...
}

Type definitions

type AnimatableValue = number | string | number[];

interface WithSpringConfig {
  damping?: number;
  mass?: number;
  stiffness?: number;
  overshootClamping?: boolean;
  restSpeedThreshold?: number;
  restDisplacementThreshold?: number;
  velocity?: number;
}

function withSpring<T extends AnimatableValue>(
  toValue: T,
  config?: WithSpringConfig,
  callback?: (finished?: boolean, current?: AnimatableValue) => void
): T;

Arguments

toValue

The value at which the animation will come to rest.

config

Optional

The spring animation configuration.

Loading...

Available properties:

Name	Type	Default	Description
mass	number	1	The weight of the spring. Reducing this value makes the animation faster.
damping	number	10	How quickly a spring slows down. Higher damping means the spring will come to rest faster.
duration	number	2000	Length of the animation (in milliseconds).
dampingRatio	number	0.5	How damped the spring is. Value 1 means the spring is critically damped, and value >1 means the spring is overdamped.
stiffness	number	100	How bouncy the spring is.
velocity	number	0	Initial velocity applied to the spring equation.
overshootClamping	boolean	false	Whether a spring can bounce over the toValue.
restDisplacementThreshold	number	0.01	The displacement below which the spring will snap to toValue without further oscillations.
restSpeedThreshold	number	2	The speed in pixels per second from which the spring will snap to toValue without further oscillations.

info

The mass and damping (physics-based) properties can't be used at the same time as duration and dampingRatio (duration-based).

When used together duration and dampingRatio overrides mass and damping props.

callback

Optional

A function called upon animation completion. If the animation is cancelled, the callback will receive false as the argument; otherwise, it will receive true.

Returns

withSpring returns an animation object. It can be either assigned directly to a shared value or can be used as a value for a style object returned from useAnimatedStyle.

Example

Loading...

Remarks

• The callback passed to the 3rd argument is automatically workletized and ran on the UI thread.

Platform compatibility

Android	iOS	Web
✅	✅	✅