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

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Native Redash

Name: tessl/npm-react-native-redash
Author: tessl

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