feat(✨): allow using hex strings (#137)

README.md

@@ -368,6 +368,21 @@ interpolateColor(
 );
 ```
 
+HEX colors will be automatically converted to RGB:
+
+```js
+interpolateColor(node, {
+  inputRange: [0, 100],
+  outputRange: ["#c52c27", "#e1b044"]
+});
+
+// with alpha
+interpolateColor(node, {
+  inputRange: [0, 100],
+  outputRange: ["#c52c2700", "#c52c27ff"]
+});
+```
+
 ### `bInterpolateColor(node, color1, color2, [colorSpace = "rgb"])`
 
 Interpolate the node from 0 to 1 without clamping.

package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.4.1",
+    "@types/color": "^3.0.0",
     "@types/react": "*",
     "@types/react-native": "^0.60.25",
     "eslint": "^6.7.2",
@@ -57,6 +58,7 @@
   },
   "dependencies": {
     "abs-svg-path": "^0.1.1",
+    "color": "^3.1.2",
     "normalize-svg-path": "^1.0.1",
     "parse-svg-path": "^0.1.2",
     "use-memo-one": "^1.1.1"

src/Colors.ts

@@ -1,4 +1,5 @@
 import Animated from "react-native-reanimated";
+import Color from "color";
 
 const {
   cond,
@@ -19,8 +20,11 @@ interface RGBColor {
   r: number;
   g: number;
   b: number;
+  a?: number;
 }
 
+type ColorParam = string | RGBColor;
+
 function match(
   condsAndResPairs: readonly Animated.Node<number>[],
   offset = 0
@@ -159,29 +163,45 @@ const interpolateColorsRGB = (
       extrapolate: Extrapolate.CLAMP
     })
   );
-  return color(r, g, b);
+  const a = round(
+    interpolate(animationValue, {
+      inputRange,
+      outputRange: colors.map(c => (c.a !== undefined ? c.a : 1)),
+      extrapolate: Extrapolate.CLAMP
+    })
+  );
+  return color(r, g, b, a);
 };
 
 interface ColorInterpolationConfig {
   inputRange: number[];
-  outputRange: RGBColor[];
+  outputRange: ColorParam[];
 }
 
 export const interpolateColor = (
   value: Animated.Adaptable<number>,
   config: ColorInterpolationConfig,
   colorSpace: "hsv" | "rgb" = "rgb"
 ): Animated.Node<number> => {
-  const { inputRange, outputRange } = config;
+  const { inputRange } = config;
+  const outputRange = config.outputRange.map(c => {
+    const outputColor = new Color(c);
+    return {
+      r: outputColor.red(),
+      g: outputColor.green(),
+      b: outputColor.blue(),
+      a: outputColor.alpha()
+    };
+  });
   if (colorSpace === "hsv")
     return interpolateColorsHSV(value, inputRange, outputRange);
   return interpolateColorsRGB(value, inputRange, outputRange);
 };
 
 export const bInterpolateColor = (
   value: Animated.Adaptable<number>,
-  color1: RGBColor,
-  color2: RGBColor,
+  color1: ColorParam,
+  color2: ColorParam,
   colorSpace: "hsv" | "rgb" = "rgb"
 ) =>
   interpolateColor(

yarn.lock

@@ -1003,11 +1003,25 @@
     lodash "^4.17.4"
     read-pkg-up "^7.0.0"
 
-"@types/color-name@^1.1.1":
+"@types/color-convert@*":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d"
+  integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*", "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/color@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.0.tgz#40f8a6bf2fd86e969876b339a837d8ff1b0a6e30"
+  integrity sha512-5qqtNia+m2I0/85+pd2YzAXaTyKO8j+svirO5aN+XaQJ5+eZ8nx0jPtEWZLxCi50xwYsX10xUHetFzfb1WEs4Q==
+  dependencies:
+    "@types/color-convert" "*"
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -2650,7 +2664,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -2669,16 +2683,32 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 colorette@^1.0.7:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.1.0.tgz#1f943e5a357fac10b4e0f5aaef3b14cdc1af6ec7"
@@ -4820,6 +4850,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -8527,6 +8562,13 @@ simple-plist@^1.0.0:
     bplist-parser "0.2.0"
     plist "^3.0.1"
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"