Utility library for React Native Reanimated and Gesture Handler providing mathematical functions, animations, transformations, and helper utilities for building complex gesture-driven animations.
—
Core mathematical functions optimized for React Native Reanimated animations, including interpolation, clamping, trigonometry, and utility functions.
Mathematical constants frequently used in animations.
/** Math.PI constant */
const PI: number;
/** 2 * PI constant (full circle in radians) */
const TAU: number;/**
* Convert boolean to number (0 or 1)
* Useful for conditional animations in Reanimated
* @param value - Boolean to convert
* @returns 0 for false, 1 for true
*/
function bin(value: boolean): 0 | 1;
/**
* Linear interpolation between two values
* @param value - Interpolation factor (0 to 1)
* @param x - Start value
* @param y - End value
* @returns Interpolated value
*/
function mix(value: number, x: number, y: number): number;Usage Example:
import { bin, mix } from "react-native-redash";
import { useSharedValue, useDerivedValue } from "react-native-reanimated";
const isVisible = useSharedValue(false);
const progress = useSharedValue(0);
// Convert boolean to number for animations
const opacity = useDerivedValue(() => bin(isVisible.value));
// Interpolate between colors or values
const animatedValue = useDerivedValue(() =>
mix(progress.value, 0, 100) // 0 to 100 based on progress
);/**
* Check if value approximately equals target
* @param value - Value to check
* @param target - Target value
* @param epsilon - Tolerance (default: 0.001)
* @returns True if values are approximately equal
*/
function approximates(
value: number,
target: number,
epsilon?: number
): boolean;
/**
* Check if value is between bounds
* @param value - Value to check
* @param lowerBound - Lower boundary
* @param upperBound - Upper boundary
* @param inclusive - Include boundaries (default: true)
* @returns True if value is between bounds
*/
function between(
value: number,
lowerBound: number,
upperBound: number,
inclusive?: boolean
): boolean;
/**
* Clamp value between bounds
* @param value - Value to clamp
* @param lowerBound - Lower boundary
* @param upperBound - Upper boundary
* @returns Clamped value
*/
function clamp(
value: number,
lowerBound: number,
upperBound: number
): number;/**
* Normalize radian value between 0 and 2PI
* @param value - Radian value to normalize
* @returns Normalized radian (0 to 2PI)
*/
function normalizeRad(value: number): number;
/**
* Convert radians to degrees
* @param rad - Radian value
* @returns Degree value
*/
function toDeg(rad: number): number;
/**
* Convert degrees to radians
* @param deg - Degree value
* @returns Radian value
*/
function toRad(deg: number): number;/**
* Calculate average of number array
* @param values - Array of numbers
* @returns Average value
*/
function avg(values: number[]): number;/**
* Calculate cubic Bézier curve coordinate
* @param t - Parameter (0 to 1)
* @param from - Start point
* @param c1 - First control point
* @param c2 - Second control point
* @param to - End point
* @returns Calculated coordinate
*/
function cubicBezier(
t: number,
from: number,
c1: number,
c2: number,
to: number
): number;
/**
* Get Y coordinate for X on cubic Bézier curve
* @param x - X coordinate
* @param a - Start vector
* @param b - First control vector
* @param c - Second control vector
* @param d - End vector
* @param precision - Decimal precision (default: 2)
* @returns Y coordinate
*/
function cubicBezierYForX(
x: number,
a: Vector,
b: Vector,
c: Vector,
d: Vector,
precision?: number
): number;/**
* Round number to specified precision
* @param value - Number to round
* @param precision - Decimal places (default: 0)
* @returns Rounded number
*/
function round(value: number, precision?: number): number;
/**
* Get fractional part of number
* @param x - Input number
* @returns Fractional part (0 to 1)
*/
function fract(x: number): number;Complete Usage Example:
import {
mix,
clamp,
bin,
toDeg,
toRad,
normalizeRad,
approximates,
between,
cubicBezier
} from "react-native-redash";
import {
useSharedValue,
useDerivedValue,
useAnimatedStyle
} from "react-native-reanimated";
const progress = useSharedValue(0);
const isActive = useSharedValue(false);
const animatedStyle = useAnimatedStyle(() => {
// Linear interpolation
const scale = mix(progress.value, 0.8, 1.2);
// Clamping
const clampedProgress = clamp(progress.value, 0, 1);
// Boolean to number conversion
const activeMultiplier = bin(isActive.value);
// Angle operations
const rotation = toDeg(normalizeRad(progress.value * Math.PI * 2));
// Cubic Bézier easing
const easedProgress = cubicBezier(
clampedProgress,
0, // start
0.25, // control point 1
0.75, // control point 2
1 // end
);
return {
transform: [
{ scale: scale * activeMultiplier },
{ rotate: `${rotation}deg` }
],
opacity: easedProgress
};
});Install with Tessl CLI
npx tessl i tessl/npm-react-native-redash