withDecay

withDecay lets you create animations that mimic objects in motion. The animation will start with the provided velocity and slow down over time according to the given deceleration rate until it stops.

Loading...

Reference

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

function App() {
  sv.value = withDecay({ velocity: 1 });
  // ...
}

Type definitions

type AnimatableValue = number | string | number[];

interface WithDecayConfig {
  deceleration?: number;
  velocity?: number;
  clamp?: [number, number];
  velocityFactor?: number;
  rubberBandEffect?: boolean;
  rubberBandFactor?: number;
}

function withDecay(
  userConfig: WithDecayConfig,
  callback?: (finished?: boolean, current?: AnimatableValue) => void
): number;

Arguments

config

The decay animation configuration.

Available properties:

Name	Type	Default	Description
velocity Optional	number	0	Initial velocity of the animation.
deceleration Optional	number	0.998	The rate at which the velocity decreases over time.
clamp Optional	[number, number]	[]	Array of two numbers which restricts animation's range. Animation stops when either bound is reached unless the rubberBandEffect option is set to true.
velocityFactor Optional	number	1	Velocity multiplier.
rubberBandEffect Optional	boolean	false	Makes the animation bounce over the limit specified in clamp.
rubberBandFactor Optional	number	0.6	Strength of the rubber band effect.

callback

Optional

A function called on animation complete. In case the animation is cancelled, the callback will receive false as the argument, otherwise it will receive true.

Returns

withDecay 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 2nd argument is automatically workletized and ran on the UI thread.

Platform compatibility

Android	iOS	Web
✅	✅	✅