fix(🐛): Fix support for reanimated 2.1.0 (#430)

package.json

@@ -42,7 +42,7 @@
     "react": "^16.8.6",
     "react-native": "^0.61.0",
     "react-native-gesture-handler": "~1.5.0",
-    "react-native-reanimated": "2.0.0-rc.0",
+    "react-native-reanimated": "2.1.0",
     "semantic-release": "^15.13.3",
     "semantic-release-cli": "^4.1.2",
     "typescript": "4.0.3"

src/ReText.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  TextStyle,
-  TextProps as RNTextProps,
-  StyleSheet,
-  TextInput,
-} from "react-native";
+import { TextProps as RNTextProps, StyleSheet, TextInput } from "react-native";
 import Animated, { useAnimatedProps } from "react-native-reanimated";
 
 const styles = StyleSheet.create({
@@ -16,16 +11,19 @@ Animated.addWhitelistedNativeProps({ text: true });
 
 interface TextProps {
   text: Animated.SharedValue<string>;
-  style?: Animated.AnimateProps<TextStyle, RNTextProps>["style"];
+  style?: Animated.AnimateProps<RNTextProps>["style"];
 }
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
 const ReText = (props: TextProps) => {
   const { text, style } = { style: {}, ...props };
   const animatedProps = useAnimatedProps(() => {
     return {
       text: text.value,
-    };
+      // Here we use any because the text prop is not available in the type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
   });
   return (
     <AnimatedTextInput

src/index.d.ts

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

src/v1/Colors.ts

@@ -1,8 +1,8 @@
-import Animated from "react-native-reanimated";
-import { processColor } from "react-native";
-import interpolateNode, {
+import Animated, {
+  interpolateNode,
   Extrapolate,
-} from "react-native-reanimated/src/derived/interpolate";
+} from "react-native-reanimated";
+import { processColor } from "react-native";
 
 import { mix } from "./Animations";
 import { clamp, fract } from "./Math";

src/v1/SVG.ts

@@ -1,8 +1,7 @@
-import Animated from "react-native-reanimated";
+import Animated, { interpolateNode } 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";

yarn.lock

@@ -7704,6 +7704,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.5, mkdirp@~0.5.0:
   dependencies:
     minimist "^1.2.5"
 
+mockdate@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.5.tgz#789be686deb3149e7df2b663d2bc4392bc3284fb"
+  integrity sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -9052,13 +9057,14 @@ react-native-gesture-handler@~1.5.0:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-reanimated@2.0.0-rc.0:
-  version "2.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.0.0-rc.0.tgz#7a1b0bfd48e3de9dfa985a524463b6a216531358"
-  integrity sha512-v+SMpeSxQ8kO116B5q3/D6VlFSot4eIRASw0nxxU+6zh9wb4W8shMyQi7/ag/gt246FvjBZOPwxsBS2iTcw8Zg==
+react-native-reanimated@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.1.0.tgz#b9ad04aee490e1e030d0a6cdaa43a14895d9a54d"
+  integrity sha512-tlPvvcdf+X7HGQ7g/7npBFhwMznfdk7MHUc9gUB/kp2abSscXNe/kOVKlrNEOO4DS11rNOXc+llFxVFMuNk0zA==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.10.4"
     fbjs "^3.0.0"
+    mockdate "^3.0.2"
     string-hash-64 "^1.0.3"
 
 react-native@^0.61.0: