0
# Mathematical Operations
1

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

4
## Capabilities
5

6
### Constants
7

8
Mathematical constants frequently used in animations.
9

10
```typescript { .api }
11
/** Math.PI constant */
12
const PI: number;
13

14
/** 2 * PI constant (full circle in radians) */
15
const TAU: number;
16
```
17

18
### Boolean and Interpolation
19

20
```typescript { .api }
21
/**
22
 * Convert boolean to number (0 or 1)
23
 * Useful for conditional animations in Reanimated
24
 * @param value - Boolean to convert
25
 * @returns 0 for false, 1 for true
26
 */
27
function bin(value: boolean): 0 | 1;
28

29
/**
30
 * Linear interpolation between two values
31
 * @param value - Interpolation factor (0 to 1)
32
 * @param x - Start value
33
 * @param y - End value
34
 * @returns Interpolated value
35
 */
36
function mix(value: number, x: number, y: number): number;
37
```
38

39
**Usage Example:**
40

41
```typescript
42
import { bin, mix } from "react-native-redash";
43
import { useSharedValue, useDerivedValue } from "react-native-reanimated";
44

45
const isVisible = useSharedValue(false);
46
const progress = useSharedValue(0);
47

48
// Convert boolean to number for animations
49
const opacity = useDerivedValue(() => bin(isVisible.value));
50

51
// Interpolate between colors or values
52
const animatedValue = useDerivedValue(() => 
53
  mix(progress.value, 0, 100) // 0 to 100 based on progress
54
);
55
```
56

57
### Comparison and Clamping
58

59
```typescript { .api }
60
/**
61
 * Check if value approximately equals target
62
 * @param value - Value to check
63
 * @param target - Target value
64
 * @param epsilon - Tolerance (default: 0.001)
65
 * @returns True if values are approximately equal
66
 */
67
function approximates(
68
  value: number,
69
  target: number,
70
  epsilon?: number
71
): boolean;
72

73
/**
74
 * Check if value is between bounds
75
 * @param value - Value to check
76
 * @param lowerBound - Lower boundary
77
 * @param upperBound - Upper boundary
78
 * @param inclusive - Include boundaries (default: true)
79
 * @returns True if value is between bounds
80
 */
81
function between(
82
  value: number,
83
  lowerBound: number,
84
  upperBound: number,
85
  inclusive?: boolean
86
): boolean;
87

88
/**
89
 * Clamp value between bounds
90
 * @param value - Value to clamp
91
 * @param lowerBound - Lower boundary
92
 * @param upperBound - Upper boundary
93
 * @returns Clamped value
94
 */
95
function clamp(
96
  value: number,
97
  lowerBound: number,
98
  upperBound: number
99
): number;
100
```
101

102
### Angle Operations
103

104
```typescript { .api }
105
/**
106
 * Normalize radian value between 0 and 2PI
107
 * @param value - Radian value to normalize
108
 * @returns Normalized radian (0 to 2PI)
109
 */
110
function normalizeRad(value: number): number;
111

112
/**
113
 * Convert radians to degrees
114
 * @param rad - Radian value
115
 * @returns Degree value
116
 */
117
function toDeg(rad: number): number;
118

119
/**
120
 * Convert degrees to radians
121
 * @param deg - Degree value
122
 * @returns Radian value
123
 */
124
function toRad(deg: number): number;
125
```
126

127
### Array Operations
128

129
```typescript { .api }
130
/**
131
 * Calculate average of number array
132
 * @param values - Array of numbers
133
 * @returns Average value
134
 */
135
function avg(values: number[]): number;
136
```
137

138
### Cubic Bézier Operations
139

140
```typescript { .api }
141
/**
142
 * Calculate cubic Bézier curve coordinate
143
 * @param t - Parameter (0 to 1)
144
 * @param from - Start point
145
 * @param c1 - First control point
146
 * @param c2 - Second control point
147
 * @param to - End point
148
 * @returns Calculated coordinate
149
 */
150
function cubicBezier(
151
  t: number,
152
  from: number,
153
  c1: number,
154
  c2: number,
155
  to: number
156
): number;
157

158
/**
159
 * Get Y coordinate for X on cubic Bézier curve
160
 * @param x - X coordinate
161
 * @param a - Start vector
162
 * @param b - First control vector
163
 * @param c - Second control vector
164
 * @param d - End vector
165
 * @param precision - Decimal precision (default: 2)
166
 * @returns Y coordinate
167
 */
168
function cubicBezierYForX(
169
  x: number,
170
  a: Vector,
171
  b: Vector,
172
  c: Vector,
173
  d: Vector,
174
  precision?: number
175
): number;
176
```
177

178
### Utility Functions
179

180
```typescript { .api }
181
/**
182
 * Round number to specified precision
183
 * @param value - Number to round
184
 * @param precision - Decimal places (default: 0)
185
 * @returns Rounded number
186
 */
187
function round(value: number, precision?: number): number;
188

189
/**
190
 * Get fractional part of number
191
 * @param x - Input number
192
 * @returns Fractional part (0 to 1)
193
 */
194
function fract(x: number): number;
195
```
196

197
**Complete Usage Example:**
198

199
```typescript
200
import {
201
  mix,
202
  clamp,
203
  bin,
204
  toDeg,
205
  toRad,
206
  normalizeRad,
207
  approximates,
208
  between,
209
  cubicBezier
210
} from "react-native-redash";
211
import { 
212
  useSharedValue, 
213
  useDerivedValue,
214
  useAnimatedStyle 
215
} from "react-native-reanimated";
216

217
const progress = useSharedValue(0);
218
const isActive = useSharedValue(false);
219

220
const animatedStyle = useAnimatedStyle(() => {
221
  // Linear interpolation
222
  const scale = mix(progress.value, 0.8, 1.2);
223
  
224
  // Clamping
225
  const clampedProgress = clamp(progress.value, 0, 1);
226
  
227
  // Boolean to number conversion
228
  const activeMultiplier = bin(isActive.value);
229
  
230
  // Angle operations
231
  const rotation = toDeg(normalizeRad(progress.value * Math.PI * 2));
232
  
233
  // Cubic Bézier easing
234
  const easedProgress = cubicBezier(
235
    clampedProgress,
236
    0,      // start
237
    0.25,   // control point 1
238
    0.75,   // control point 2
239
    1       // end
240
  );
241
  
242
  return {
243
    transform: [
244
      { scale: scale * activeMultiplier },
245
      { rotate: `${rotation}deg` }
246
    ],
247
    opacity: easedProgress
248
  };
249
});
250
```