React Native Redash
AnimationsArraysColorsCoordinatesGesturesHooksMathReadmeRun Animationstiming()decay()spring()delay()loop()SVGStringsTransformationsTransitionsVectors

Run Animations

timing()

interface TimingParams {
    clock?: Animated.Clock;
    from?: Animated.Adaptable<number>;
    to?: Animated.Adaptable<number>;
    duration?: Animated.Adaptable<number>;
    easing?: Animated.EasingFunction;
}
const timing: (params: TimingParams) => Animated.Node<number>;

Convenience function to run a timing animation. Example usage:

timing({
  duration: 10 * 1000,
  from: 0,
  to: 1,
  easing: Easing.linear,
});

decay()

export interface DecayParams {
    clock?: Animated.Clock;
    from?: Animated.Adaptable<number>;
    velocity?: Animated.Value<number>;
    deceleration?: Animated.Adaptable<number>;
}
const decay: (params: DecayParams) => Animated.Node<number>;

Convenience function to run a decay animation.

spring()

interface SpringParams {
    clock?: Animated.Clock;
    from?: Animated.Adaptable<number>;
    to: Animated.Adaptable<number>;
    velocity?: Animated.Value<number>;
    config?: SpringConfig;
}
const spring: (params: SpringParams) => Animated.Node<number>;

Convenience function to run a spring animation.

delay()

const delay: (node: Animated.Node<number>, duration: number) => Animated.Node<number>;

Evaluate an animation node after a certain amount of time. duration is in milliseconds. Example usage:

delay(set(value, 1), 250);

loop()

interface LoopProps {
    clock?: Animated.Clock;
    easing?: Animated.EasingFunction;
    duration?: number;
    boomerang?: boolean;
    autoStart?: boolean;
}
const loop: (loopConfig: LoopProps) => Animated.Node<number>;

Returns an animated node that goes from 0 to 1 during the time set by duration continuously. If the boomerang option is set to true, the animation goes from 0 to 1 and then from 1 to 0 in the next cycle. Example usage:

const progress = new Value(0);
set(progress, loop({ duration: 400, easing: Easing.linear }));