or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animations.mdcolors.mdcomponents.mdcoordinates.mdindex.mdmath.mdmatrices.mdpaths.mdtransforms.mdtransitions.mdutilities.mdvectors.md
tile.json

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-redash@18.1.x

To install, run

npx @tessl/cli install tessl/npm-react-native-redash@18.1.0

index.mddocs/

React Native Redash

React Native Redash is a comprehensive utility library for React Native Reanimated and Gesture Handler. It provides a collection of mathematical functions, animations, transformations, and helper utilities specifically designed for building complex gesture-driven animations in React Native applications.

Package Information

  • Package Name: react-native-redash
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-native-redash
  • Dependencies: Requires react-native-reanimated >= 2.0.0 and react-native-gesture-handler

Core Imports

import {
  // Animation utilities
  withPause,
  withBouncing,
  
  // Mathematical operations
  mix,
  clamp,
  bin,
  
  // Vector operations
  Vector,
  useVector,
  vec2,
  
  // Path operations
  Path,
  parse,
  interpolatePath,
  
  // Matrix operations
  Matrix3,
  Matrix4,
  processTransform2d,
  
  // Color utilities
  mixColor,
  hsv2rgb,
  
  // Coordinate transformations
  canvas2Cartesian,
  polar2Canvas,
  
  // Component
  ReText
} from "react-native-redash";

For CommonJS:

const {
  withPause,
  withBouncing,
  mix,
  clamp,
  Vector,
  ReText
} = require("react-native-redash");

Basic Usage

import {
  mix,
  clamp,
  useVector,
  withSpring,
  Vector,
  ReText
} from "react-native-redash";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  useDerivedValue
} from "react-native-reanimated";

// Mathematical utilities
const progress = useSharedValue(0);
const interpolated = useDerivedValue(() => mix(progress.value, 0, 100));
const clamped = useDerivedValue(() => clamp(progress.value, 0, 1));

// Vector operations
const position = useVector(0, 0);
const animatedStyle = useAnimatedStyle(() => ({
  transform: [
    { translateX: position.x.value },
    { translateY: position.y.value }
  ]
}));

// Animated text
const text = useSharedValue("Hello");
return <ReText text={text} style={{ fontSize: 20 }} />;

Architecture

React Native Redash is organized into several key modules:

  • Animation Utilities: Higher-order animation functions for creating complex behaviors
  • Mathematical Functions: Core mathematical operations optimized for animations
  • Vector Operations: 2D vector math with SharedValue support
  • Path Operations: SVG path parsing and manipulation with Bézier curve support
  • Matrix Operations: 2D and 3D matrix transformations for complex animations
  • Color Utilities: Color manipulation and interpolation functions
  • Coordinate Systems: Conversions between different coordinate systems
  • Physics Utilities: Physics-based calculations for natural animations
  • UI Components: Animated components like ReText for dynamic content

All functions are marked with @worklet and can run on the UI thread for optimal performance.

Capabilities

Animation Utilities

Advanced animation behaviors including pausable animations and physics-based bouncing effects.

function withPause(
  nextAnimation: any,
  paused: Animated.SharedValue<boolean>
): number;

function withBouncing(
  nextAnimation: any,
  lowerBound: number,
  upperBound: number
): number;

Animation Utilities

Mathematical Operations

Core mathematical functions for animations including interpolation, clamping, and angle conversions.

function mix(value: number, x: number, y: number): number;
function clamp(value: number, lowerBound: number, upperBound: number): number;
function bin(value: boolean): 0 | 1;
function toDeg(rad: number): number;
function toRad(deg: number): number;

Mathematical Operations

Vector Operations

2D vector mathematics with support for React Native Reanimated SharedValues.

interface Vector<T = number> {
  x: T;
  y: T;
}

function useVector(
  x1?: number,
  y1?: number
): Vector<Animated.SharedValue<number>>;

function vec2<T>(x?: T, y?: T): Vector<T>;

Vector Operations

Path Operations

SVG path parsing, manipulation, and animation with cubic Bézier curve support.

interface Path {
  move: Vector;
  curves: Curve[];
  close: boolean;
}

function parse(d: string): Path;
function interpolatePath(
  value: number,
  inputRange: number[],
  outputRange: Path[],
  extrapolate?: Extrapolation
): string;

enum Extrapolation {
  CLAMP = "clamp",
  EXTEND = "extend", 
  IDENTITY = "identity"
}

Path Operations

Matrix Operations

2D and 3D matrix transformations for complex animation effects.

type Matrix3 = readonly [
  number, number, number,
  number, number, number,
  number, number, number
];

type Matrix4 = readonly [
  number, number, number, number,
  number, number, number, number,
  number, number, number, number,
  number, number, number, number
];

function processTransform2d(transforms: Transforms2d): Matrix3;
function processTransform3d(transforms: Transforms3d): Matrix4;

Matrix Operations

Color Utilities

Color manipulation, interpolation, and conversion functions.

type AnimatedColor = string | number;

function mixColor(
  value: number,
  color1: AnimatedColor,
  color2: AnimatedColor,
  colorSpace?: "RGB" | "HSV"
): AnimatedColor;

function hsv2rgb(h: number, s: number, v: number): { r: number; g: number; b: number };

Color Utilities

Coordinate Transformations

Coordinate system conversions between canvas, cartesian, and polar coordinates.

interface PolarPoint {
  theta: number;
  radius: number;
}

function canvas2Cartesian(v: Vector, center: Vector): Vector;
function cartesian2Polar(v: Vector): PolarPoint;
function polar2Canvas(p: PolarPoint, center: Vector): Vector;

Coordinate Transformations

Transition Hooks

React hooks for creating smooth transitions with spring and timing animations.

function useSpring(
  state: boolean | number,
  config?: WithSpringConfig
): Animated.DerivedValue<number>;

function useTiming(
  state: boolean | number,
  config?: WithTimingConfig
): Animated.DerivedValue<number>;

Transition Hooks

Animated Components

React components optimized for displaying animated values.

interface TextProps {
  text: Animated.SharedValue<string>;
  style?: Animated.AnimateProps<TextProps>["style"];
}

function ReText(props: TextProps): React.ReactElement;

Animated Components

Transform Utilities

Transform utilities for applying transformations with custom origins and creating animated styles.

function transformOrigin(
  origin: Vector,
  transformations: RNTransform
): RNTransform;

function useTranslation(
  vector: Vector<Animated.SharedValue<number>>
): { transform: { translateX: number; translateY: number }[] };

Transform Utilities

Utility Functions

Additional utility functions for physics calculations and array manipulations.

function snapPoint(
  value: number,
  velocity: number,
  points: ReadonlyArray<number>
): number;

function move<T>(input: T[], from: number, to: number): T[];

Utility Functions