fix(🐛): Fix semantic of useTranstion() (#80)

package.json

@@ -4,7 +4,7 @@
   "description": "Utility library for React Native Reanimated",
   "main": "lib/module/index.js",
   "scripts": {
-    "lint": "eslint src/**/*",
+    "lint": "eslint --ext .ts,.tsx src",
     "tsc": "tsc --noEmit",
     "test": "npm run lint && npm run",
     "prepare": "bob build",
@@ -31,7 +31,7 @@
     "@types/react": "^16.8.15",
     "@types/react-native": "^0.57.51",
     "eslint": "^5.16.0",
-    "eslint-config-react-native-wcandillon": "2.0.0",
+    "eslint-config-react-native-wcandillon": "2.0.4",
     "react": "^16.8.6",
     "react-native": "^0.59.5",
     "react-native-gesture-handler": "^1.2.1",
@@ -57,6 +57,7 @@
   "dependencies": {
     "abs-svg-path": "^0.1.1",
     "normalize-svg-path": "^1.0.1",
-    "parse-svg-path": "^0.1.2"
+    "parse-svg-path": "^0.1.2",
+    "use-memo-one": "^1.1.1"
   }
 }

src/AnimationRunners.ts

@@ -1,5 +1,5 @@
 import Animated from "react-native-reanimated";
-import {Platform} from "react-native";
+import { Platform } from "react-native";
 
 const {
   Value,
@@ -77,6 +77,7 @@ export function runSpring(
       set(state.time, 0),
       set(state.position, value),
       set(state.velocity, 0),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       set(config.toValue as any, dest),
       startClock(clock)
     ]),
@@ -88,7 +89,7 @@ export function runSpring(
 
 export function runTiming(
   clock: Animated.Clock,
-  value: Animated.Adaptable<any>,
+  value: Animated.Adaptable<number>,
   config: Animated.TimingConfig
 ) {
   const state = {

src/Animations.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import Animated, { Easing } from "react-native-reanimated";
+import { useMemoOne } from "use-memo-one";
 
 import { TransformsStyle } from "react-native";
 import { min } from "./Math";
@@ -68,8 +69,8 @@ export const transformOrigin = (
   { translateY: multiply(y, -1) }
 ];
 
-export const useTransition = (
-  state: any,
+export const useTransition = <T>(
+  state: T,
   src: Animated.Adaptable<number>,
   dest: Animated.Adaptable<number>,
   duration: number = 400,
@@ -85,7 +86,7 @@ export const useTransition = (
       "useCode() is only available in Reanimated 1.0.0 or higher"
     );
   }
-  const { transitionVal, clock } = React.useMemo(
+  const { transitionVal, clock } = useMemoOne(
     () => ({
       transitionVal: new Value(0),
       clock: new Clock()

src/Array.ts

@@ -5,8 +5,12 @@ const { Value, cond, eq, or } = Animated;
 export const get = (
   array: Animated.Adaptable<number>[],
   index: Animated.Adaptable<number>,
-  notFound: Animated.Node<any> = new Value()
-) => array.reduce((acc, v, i) => cond(eq(i, index), v, acc), notFound);
+  notFound: Animated.Node<number> = new Value()
+): Animated.Node<number> =>
+  array.reduce(
+    (acc, v, i) => cond(eq(i, index), v, acc),
+    notFound
+  ) as Animated.Node<number>;
 
 export const contains = (
   values: Animated.Node<number>[],
@@ -20,5 +24,5 @@ export const contains = (
 export const find = (
   values: Animated.Node<number>[],
   fn: (v: Animated.Node<number>) => Animated.Node<number>,
-  notFound: Animated.Node<any> = new Value()
+  notFound: Animated.Node<number> = new Value()
 ) => values.reduce((acc, v) => cond(fn(v), v, acc), notFound);

src/Colors.ts

@@ -22,9 +22,9 @@ interface RGBColor {
 }
 
 function match(
-  condsAndResPairs: Animated.Adaptable<number>[],
+  condsAndResPairs: readonly Animated.Adaptable<number>[],
   offset = 0
-): any {
+): Animated.Adaptable<number> | undefined | Animated.Node<number> {
   if (condsAndResPairs.length - offset === 1) {
     return condsAndResPairs[offset];
   }
@@ -84,7 +84,7 @@ const rgbToHsv = (c: RGBColor) => {
 
   const ma = Math.max(r, g, b);
   const mi = Math.min(r, g, b);
-  let h: number = 0;
+  let h = 0;
   const v = ma;
 
   const d = ma - mi;

src/Interactable.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/sort-comp */
+/* eslint-disable react/sort-comp, @typescript-eslint/no-explicit-any */
 import React from "react";
 import Animated from "react-native-reanimated";
 import { PanGestureHandler, State } from "react-native-gesture-handler";
@@ -286,9 +286,7 @@ export interface InteractableProps {
   boundaries?: Boundaries;
 }
 
-export class Interactable extends React.PureComponent<
-  InteractableProps
-> {
+export class Interactable extends React.PureComponent<InteractableProps> {
   static defaultProps = {
     dragToss: 0.1,
     dragEnabled: true,

src/Math.ts

@@ -42,10 +42,6 @@ export const toRad = (deg: Animated.Adaptable<number>): Animated.Node<number> =>
 export const toDeg = (rad: Animated.Adaptable<number>): Animated.Node<number> =>
   multiply(rad, 180 / Math.PI);
 
-// https://developer.download.nvidia.com/cg/atan.html
-export const atan = (x: Animated.Adaptable<number>): Animated.Node<number> =>
-  atan2(x, 1);
-
 // https://developer.download.nvidia.com/cg/atan2.html
 export const atan2 = (
   y: Animated.Adaptable<number>,
@@ -78,6 +74,10 @@ export const atan2 = (
   ]);
 };
 
+// https://developer.download.nvidia.com/cg/atan.html
+export const atan = (x: Animated.Adaptable<number>): Animated.Node<number> =>
+  atan2(x, 1);
+
 // https://developer.download.nvidia.com/cg/acos.html
 export const acos = (x1: Animated.Adaptable<number>) => {
   const negate: Animated.Value<number> = new Value();

src/SVG.ts

@@ -57,8 +57,8 @@ interface BezierCubicCurve {
 }
 
 export interface PathInterpolationConfig {
-  inputRange: ReadonlyArray<Animated.Adaptable<number>>;
-  outputRange: ReadonlyArray<ReanimatedPath | string>;
+  inputRange: readonly Animated.Adaptable<number>[];
+  outputRange: readonly (ReanimatedPath | string)[];
   extrapolate?: Animated.Extrapolate;
   extrapolateLeft?: Animated.Extrapolate;
   extrapolateRight?: Animated.Extrapolate;
@@ -222,12 +222,14 @@ export const getLengthAtX = (
   const p3 = get(path.p3x, index);
   const t = cubicBezierSolve(p0, p1, p2, p3);
   const length = get(path.length, index);
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   const start = add(
     ...(path.length.map((l, i) => cond(lessThan(i, index), l, 0)) as [
       any,
       any,
       ...any[]
     ])
   );
+  /* eslint-enable @typescript-eslint/no-explicit-any */
   return add(start, multiply(t, length));
 };

src/String.tsx

@@ -13,5 +13,6 @@ export const string = (
   if (values.length > strings.length) {
     result.push(values[values.length - 1]);
   }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return concat(...(result as [any, any, ...any[]]));
 };

yarn.lock

@@ -2679,9 +2679,9 @@ eslint-config-prettier@^4.3.0:
   dependencies:
     get-stdin "^6.0.0"
 
-[email protected].0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-native-wcandillon/-/eslint-config-react-native-wcandillon-2.0.0.tgz#a397e6813eb26270450f197543aeda5b2d9176be"
+[email protected].4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-native-wcandillon/-/eslint-config-react-native-wcandillon-2.0.4.tgz#78736e4eb6b7dcc6372150fc68c5314c1b2f7df4"
   dependencies:
     "@typescript-eslint/eslint-plugin" "1.11.0"
     "@typescript-eslint/parser" "1.11.0"
@@ -7725,6 +7725,10 @@ url-template@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21"
 
+use-memo-one@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"