Skip to main content
Version: 3.x

withDecay

withDecay lets you create animations that mimic objects in motion with friction. 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;
reduceMotion?: ReduceMotion;
}

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

enum ReduceMotion {
System = 'system',
Always = 'always',
Never = 'never',
}

Arguments

config

The decay animation configuration.

Loading...

Available properties:

NameTypeDefaultDescription
velocity
Optional
number0Initial velocity of the animation.
deceleration
Optional
number0.998The 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.
*Required when rubberBandEffect is set to true.
velocityFactor
Optional
number1Velocity multiplier.
rubberBandEffect
Optional
booleanfalseMakes the animation bounce over the limit specified in clamp.
rubberBandFactor
Optional
number0.6Strength of the rubber band effect.
reduceMotion
Optional
ReduceMotionReduceMotion.SystemA parameter that determines how the animation responds to the device's reduced motion accessibility setting.

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 which holds the current state of the animation. 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

Platform compatibility

AndroidiOSWeb