CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-redash

Utility library for React Native Reanimated and Gesture Handler providing mathematical functions, animations, transformations, and helper utilities for building complex gesture-driven animations.

Pending
Overview
Eval results
Files

math.mddocs/

Mathematical Operations

Core mathematical functions optimized for React Native Reanimated animations, including interpolation, clamping, trigonometry, and utility functions.

Capabilities

Constants

Mathematical constants frequently used in animations.

/** Math.PI constant */
const PI: number;

/** 2 * PI constant (full circle in radians) */
const TAU: number;

Boolean and Interpolation

/**
 * 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
);

Comparison and Clamping

/**
 * 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;

Angle Operations

/**
 * 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;

Array Operations

/**
 * Calculate average of number array
 * @param values - Array of numbers
 * @returns Average value
 */
function avg(values: number[]): number;

Cubic Bézier Operations

/**
 * 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;

Utility Functions

/**
 * 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

docs

animations.md

colors.md

components.md

coordinates.md

index.md

math.md

matrices.md

paths.md

transforms.md

transitions.md

utilities.md

vectors.md

tile.json