fix(🐛): fix v15 release

README.md

@@ -11,6 +11,20 @@ The React Native Reanimated and Gesture Handler Toolbelt. As seen on the [“Can
 yarn add react-native-redash
 ```
 
+## ⚠️ v1 Users ⚠️
+
+To access functions that work with Reanimated v1 nodes, use the following import:
+
+```ts
+import {mix} from  "react-native-redash/lib/module/v1";
+```
+
+To add TypeScript support for the v1 functions, add the following type to your `tsconfig`:
+
+```json
+  "include": ["node_modules/react-native-redash/lib/typescript/v1/index.d.ts"]
+```
+
 ## Documentation
 
 [https://wcandillon.gitbook.io/redash/](https://wcandillon.gitbook.io/redash/)

src/index.d.ts

@@ -1,3 +1,4 @@
 declare module "parse-svg-path";
 declare module "abs-svg-path";
 declare module "normalize-svg-path";
+declare module "react-native-reanimated/src/derived/interpolate";

src/index.ts

@@ -2,4 +2,6 @@ export * from "./Animations";
 export * from "./Coordinates";
 export * from "./Transitions";
 export * from "./Math";
+export * from "./Vector";
 export { default as ReText } from "./ReText";
+export * as v1 from "./v1";

src/v1/AnimationRunners.ts

@@ -1,4 +1,4 @@
-import Animated, { Easing } from "react-native-reanimated";
+import Animated, { add } from "react-native-reanimated";
 
 import { SpringConfig } from "./Animations";
 
@@ -74,16 +74,16 @@ export interface TimingParams {
   from?: Animated.Adaptable<number>;
   to?: Animated.Adaptable<number>;
   duration?: Animated.Adaptable<number>;
-  easing?: Animated.EasingFunction;
+  easing?: (v: Animated.Adaptable<number>) => Animated.Node<number>;
 }
 
 export const timing = (params: TimingParams) => {
   const { clock, easing, duration, from, to } = {
     clock: new Clock(),
-    easing: Easing.linear,
     duration: 250,
     from: 0,
     to: 1,
+    easing: (v: Animated.Adaptable<number>) => add(v, 0),
     ...params,
   };
 
@@ -208,7 +208,7 @@ export const delay = (node: Animated.Node<number>, duration: number) => {
 
 export interface LoopProps {
   clock?: Animated.Clock;
-  easing?: Animated.EasingFunction;
+  easing?: (v: Animated.Adaptable<number>) => Animated.Node<number>;
   duration?: number;
   boomerang?: boolean;
   autoStart?: boolean;
@@ -217,10 +217,10 @@ export interface LoopProps {
 export const loop = (loopConfig: LoopProps) => {
   const { clock, easing, duration, boomerang, autoStart } = {
     clock: new Clock(),
-    easing: Easing.linear,
     duration: 250,
     boomerang: false,
     autoStart: true,
+    easing: (v: Animated.Adaptable<number>) => add(v, 0),
     ...loopConfig,
   };
   const state = {

src/v1/Colors.ts

@@ -1,5 +1,6 @@
 import Animated from "react-native-reanimated";
 import { processColor } from "react-native";
+import interpolateNode from "react-native-reanimated/src/derived/interpolate";
 
 import { mix } from "./Animations";
 import { clamp, fract } from "./Math";
@@ -9,11 +10,9 @@ const {
   multiply,
   abs,
   round,
-  interpolateNode,
   sub,
   proc,
   color,
-  Extrapolate,
   greaterThan,
   cond,
 } = Animated;
@@ -119,17 +118,14 @@ const interpolateColorsHSV = (
   const h = interpolateNode(animationValue, {
     inputRange,
     outputRange: colorsAsHSV.map((c) => c.h),
-    extrapolate: Extrapolate.CLAMP,
   });
   const s = interpolateNode(animationValue, {
     inputRange,
     outputRange: colorsAsHSV.map((c) => c.s),
-    extrapolate: Extrapolate.CLAMP,
   });
   const v = interpolateNode(animationValue, {
     inputRange,
     outputRange: colorsAsHSV.map((c) => c.v),
-    extrapolate: Extrapolate.CLAMP,
   });
   return hsv2color(h, s, v);
 };
@@ -143,27 +139,23 @@ const interpolateColorsRGB = (
     interpolateNode(animationValue, {
       inputRange,
       outputRange: colors.map((c) => red(c)),
-      extrapolate: Extrapolate.CLAMP,
     })
   );
   const g = round(
     interpolateNode(animationValue, {
       inputRange,
       outputRange: colors.map((c) => green(c)),
-      extrapolate: Extrapolate.CLAMP,
     })
   );
   const b = round(
     interpolateNode(animationValue, {
       inputRange,
       outputRange: colors.map((c) => blue(c)),
-      extrapolate: Extrapolate.CLAMP,
     })
   );
   const a = interpolateNode(animationValue, {
     inputRange,
     outputRange: colors.map((c) => opacity(c)),
-    extrapolate: Extrapolate.CLAMP,
   });
 
   return color(r, g, b, a);

src/v1/SVG.ts

@@ -2,6 +2,7 @@ import Animated from "react-native-reanimated";
 import parseSVG from "parse-svg-path";
 import absSVG from "abs-svg-path";
 import normalizeSVG from "normalize-svg-path";
+import interpolateNode from "react-native-reanimated/src/derived/interpolate";
 
 import { get } from "./Array";
 import { string } from "./String";
@@ -15,7 +16,6 @@ const {
   greaterOrEq,
   and,
   cond,
-  interpolate,
   multiply,
   lessThan,
   concat,
@@ -153,7 +153,7 @@ export const getPointAtLength = (
   const p1y = get(path.p1y, index);
   const p2y = get(path.p2y, index);
   const p3y = get(path.p3y, index);
-  const t = interpolate(length, {
+  const t = interpolateNode(length, {
     inputRange: [start, end],
     outputRange: [0, 1],
   });
@@ -173,7 +173,7 @@ export const interpolatePath = (
   const [path] = paths;
   const commands = path.segments.map((_, index) => {
     const interpolatePoint = (point: BezierPoint) =>
-      interpolate(value, {
+      interpolateNode(value, {
         inputRange,
         outputRange: paths.map((p) => p[point][index]),
         ...config,

src/v1/Transitions.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useEffect } from "react";
-import Animated, { Easing, not } from "react-native-reanimated";
+import Animated, { not, add } from "react-native-reanimated";
 
 import { SpringConfig, TimingConfig } from "./Animations";
 import { useConst } from "./Hooks";
@@ -36,7 +36,7 @@ export const withTransition = (
   const config = {
     toValue: new Value(0),
     duration: 150,
-    easing: Easing.linear,
+    easing: (v: Animated.Adaptable<number>) => add(v, 0),
     ...timingConfig,
   };
   return block([

src/v1/__tests__/index.ts

@@ -1,6 +1,5 @@
 import "./Coordinates.test";
 import "./Math.test";
-import "./Colors.test";
 import "./Vectors.test";
 import "./Matrix.test";
 import "./Animations.test";