0
# React Native Redash
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: react-native-redash
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-native-redash`
10
- **Dependencies**: Requires `react-native-reanimated` >= 2.0.0 and `react-native-gesture-handler`
11

12
## Core Imports
13

14
```typescript
15
import {
16
  // Animation utilities
17
  withPause,
18
  withBouncing,
19
  
20
  // Mathematical operations
21
  mix,
22
  clamp,
23
  bin,
24
  
25
  // Vector operations
26
  Vector,
27
  useVector,
28
  vec2,
29
  
30
  // Path operations
31
  Path,
32
  parse,
33
  interpolatePath,
34
  
35
  // Matrix operations
36
  Matrix3,
37
  Matrix4,
38
  processTransform2d,
39
  
40
  // Color utilities
41
  mixColor,
42
  hsv2rgb,
43
  
44
  // Coordinate transformations
45
  canvas2Cartesian,
46
  polar2Canvas,
47
  
48
  // Component
49
  ReText
50
} from "react-native-redash";
51
```
52

53
For CommonJS:
54

55
```javascript
56
const {
57
  withPause,
58
  withBouncing,
59
  mix,
60
  clamp,
61
  Vector,
62
  ReText
63
} = require("react-native-redash");
64
```
65

66
## Basic Usage
67

68
```typescript
69
import {
70
  mix,
71
  clamp,
72
  useVector,
73
  withSpring,
74
  Vector,
75
  ReText
76
} from "react-native-redash";
77
import Animated, {
78
  useSharedValue,
79
  useAnimatedStyle,
80
  useDerivedValue
81
} from "react-native-reanimated";
82

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

88
// Vector operations
89
const position = useVector(0, 0);
90
const animatedStyle = useAnimatedStyle(() => ({
91
  transform: [
92
    { translateX: position.x.value },
93
    { translateY: position.y.value }
94
  ]
95
}));
96

97
// Animated text
98
const text = useSharedValue("Hello");
99
return <ReText text={text} style={{ fontSize: 20 }} />;
100
```
101

102
## Architecture
103

104
React Native Redash is organized into several key modules:
105

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

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

118
## Capabilities
119

120
### Animation Utilities
121

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

124
```typescript { .api }
125
function withPause(
126
  nextAnimation: any,
127
  paused: Animated.SharedValue<boolean>
128
): number;
129

130
function withBouncing(
131
  nextAnimation: any,
132
  lowerBound: number,
133
  upperBound: number
134
): number;
135
```
136

137
[Animation Utilities](./animations.md)
138

139
### Mathematical Operations
140

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

143
```typescript { .api }
144
function mix(value: number, x: number, y: number): number;
145
function clamp(value: number, lowerBound: number, upperBound: number): number;
146
function bin(value: boolean): 0 | 1;
147
function toDeg(rad: number): number;
148
function toRad(deg: number): number;
149
```
150

151
[Mathematical Operations](./math.md)
152

153
### Vector Operations
154

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

157
```typescript { .api }
158
interface Vector<T = number> {
159
  x: T;
160
  y: T;
161
}
162

163
function useVector(
164
  x1?: number,
165
  y1?: number
166
): Vector<Animated.SharedValue<number>>;
167

168
function vec2<T>(x?: T, y?: T): Vector<T>;
169
```
170

171
[Vector Operations](./vectors.md)
172

173
### Path Operations
174

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

177
```typescript { .api }
178
interface Path {
179
  move: Vector;
180
  curves: Curve[];
181
  close: boolean;
182
}
183

184
function parse(d: string): Path;
185
function interpolatePath(
186
  value: number,
187
  inputRange: number[],
188
  outputRange: Path[],
189
  extrapolate?: Extrapolation
190
): string;
191

192
enum Extrapolation {
193
  CLAMP = "clamp",
194
  EXTEND = "extend", 
195
  IDENTITY = "identity"
196
}
197
```
198

199
[Path Operations](./paths.md)
200

201
### Matrix Operations
202

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

205
```typescript { .api }
206
type Matrix3 = readonly [
207
  number, number, number,
208
  number, number, number,
209
  number, number, number
210
];
211

212
type Matrix4 = readonly [
213
  number, number, number, number,
214
  number, number, number, number,
215
  number, number, number, number,
216
  number, number, number, number
217
];
218

219
function processTransform2d(transforms: Transforms2d): Matrix3;
220
function processTransform3d(transforms: Transforms3d): Matrix4;
221
```
222

223
[Matrix Operations](./matrices.md)
224

225
### Color Utilities
226

227
Color manipulation, interpolation, and conversion functions.
228

229
```typescript { .api }
230
type AnimatedColor = string | number;
231

232
function mixColor(
233
  value: number,
234
  color1: AnimatedColor,
235
  color2: AnimatedColor,
236
  colorSpace?: "RGB" | "HSV"
237
): AnimatedColor;
238

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

242
[Color Utilities](./colors.md)
243

244
### Coordinate Transformations
245

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

248
```typescript { .api }
249
interface PolarPoint {
250
  theta: number;
251
  radius: number;
252
}
253

254
function canvas2Cartesian(v: Vector, center: Vector): Vector;
255
function cartesian2Polar(v: Vector): PolarPoint;
256
function polar2Canvas(p: PolarPoint, center: Vector): Vector;
257
```
258

259
[Coordinate Transformations](./coordinates.md)
260

261
### Transition Hooks
262

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

265
```typescript { .api }
266
function useSpring(
267
  state: boolean | number,
268
  config?: WithSpringConfig
269
): Animated.DerivedValue<number>;
270

271
function useTiming(
272
  state: boolean | number,
273
  config?: WithTimingConfig
274
): Animated.DerivedValue<number>;
275
```
276

277
[Transition Hooks](./transitions.md)
278

279
### Animated Components
280

281
React components optimized for displaying animated values.
282

283
```typescript { .api }
284
interface TextProps {
285
  text: Animated.SharedValue<string>;
286
  style?: Animated.AnimateProps<TextProps>["style"];
287
}
288

289
function ReText(props: TextProps): React.ReactElement;
290
```
291

292
[Animated Components](./components.md)
293

294
### Transform Utilities
295

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

298
```typescript { .api }
299
function transformOrigin(
300
  origin: Vector,
301
  transformations: RNTransform
302
): RNTransform;
303

304
function useTranslation(
305
  vector: Vector<Animated.SharedValue<number>>
306
): { transform: { translateX: number; translateY: number }[] };
307
```
308

309
[Transform Utilities](./transforms.md)
310

311
### Utility Functions
312

313
Additional utility functions for physics calculations and array manipulations.
314

315
```typescript { .api }
316
function snapPoint(
317
  value: number,
318
  velocity: number,
319
  points: ReadonlyArray<number>
320
): number;
321

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

325
[Utility Functions](./utilities.md)