React Native Redash
AnimationsArraysColorsCoordinatesGesturesHooksMathbin()fract()inc()dec()toRad()toDeg()min()max()clamp()between()approximates()atan2()round()cubicBezier()ReadmeRun AnimationsSVGStringsTransformationsTransitionsVectors

Math

bin()

const bin: (value: boolean) => 0 | 1

Convert a boolean value into a number. This can be useful in reanimated since 0 and 1 are used for conditional statements.

fract()

const fract: (x: Animated.Adaptable<number>) => Animated.Node<number>;

fract returns the fractional part of x. This is calculated as x - floor(x).

inc()

const inc: (value: Animated.Value<number>) => Animated.Node<number>

Increment value by one.

dec()

const dec: (value: Animated.Value<number>) => Animated.Node<number>;

Decrement value by one.

toRad()

const toRad: (deg: Animated.Adaptable<number>) => Animated.Node<number>;

Transforms an angle from degrees to radians.

toDeg()

const toDeg: (rad: Animated.Adaptable<number>) => Animated.Node<number>;

Transforms an angle from radians to degrees.

min()

const min: (...args: Animated.Adaptable<number>[]) => Animated.Adaptable<number>;

Takes one or more nodes as input and returns the minimum of all the node's values. This is equivalent to Animated.min but with support for more than two parameters.

max()

const max: (...args: Animated.Adaptable<number>[]) => Animated.Adaptable<number>;

Takes one or more nodes as input and returns the maximum of all the node's values. This is equivalent to Animated.min but with support for more than two parameters.

clamp()

const clamp: (value: Animated.Adaptable<number>, lowerBound: Animated.Adaptable<number>, upperBound: Animated.Adaptable<number>) => Animated.Node<number>;

Clamps a node with a lower and upper bound.

clamp(new Value(-1), 0, 100); // 0
clamp(new Value(1), 0, 100); // 1
clamp(new Value(101), 0, 100); // 100

between()

const between: (value: Animated.Node<number>, lowerBound: Animated.Adaptable<number>, upperBound: Animated.Adaptable<number>, inclusive?: boolean) => Animated.Node<0 | 1>;

Returns true if node is within lowerBound and upperBound.

approximates()

const approximates: (a: Animated.Adaptable<number>, b: Animated.Adaptable<number>, precision?: Animated.Adaptable<number>) => Animated.Node<0 | 1>;

Returns 1 if the difference between the two values is less than precision. Otherwise returns 0. Default value for the precision is 0.001.

atan2()

const atan2: (y: Animated.Adaptable<number>, x: Animated.Adaptable<number>) => Animated.Node<number>;

Returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), atan2(y,x).

round()

const round = (value: Animated.Adaptable<number>, precision: Animated.Adaptable<number> = 0)  => Animated.Node<number>;

Computes animation node rounded to precision.

cubicBezier()

const cubicBezier: (t: Animated.Adaptable<number>, p0: Animated.Adaptable<number>, p1: Animated.Adaptable<number>, p2: Animated.Adaptable<number>, p3: Animated.Adaptable<number>) => Animated.Node<number>;

Returns the coordinate of a cubic bezier curve. t is the length of the curve from 0 to 1. cubicBezier(0, p0, p1, p2, p3) equals p0 and cubicBezier(1, p0, p1, p2, p3) equals p3. p0 and p3 are respectively the starting and ending point of the curve. p1 and p2 are the control points.