From 201f355479cafbcece3d9eb40a52bae003da3e5c Mon Sep 17 00:00:00 2001
From: Genki Kondo <gkondo@fb.com>
Date: Thu, 10 Feb 2022 17:39:42 -0800
Subject: [PATCH] Allow color styles to be animated with native driver

Summary:
Now that animating color styles using native driver is supported on both Android and iOS, add color styles to the allowlist in NativeAnimatedHelper.

Changelog:
[General][Added] - Allow color styles to be animated using native driver

Reviewed By: mdvacca

Differential Revision: D34148038

fbshipit-source-id: c20dc149b805ec691a3936a77ab130fb4477a4c3
---
 Libraries/Animated/NativeAnimatedHelper.js | 28 ++++++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/Libraries/Animated/NativeAnimatedHelper.js b/Libraries/Animated/NativeAnimatedHelper.js
index 76aa0612088..363a4e05b30 100644
--- a/Libraries/Animated/NativeAnimatedHelper.js
+++ b/Libraries/Animated/NativeAnimatedHelper.js
@@ -234,22 +234,36 @@ const API = {
 /**
  * Styles allowed by the native animated implementation.
  *
- * In general native animated implementation should support any numeric property that doesn't need
- * to be updated through the shadow view hierarchy (all non-layout properties).
+ * In general native animated implementation should support any numeric or color property that
+ * doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
  */
+const SUPPORTED_COLOR_STYLES = {
+  backgroundColor: true,
+  borderBottomColor: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderStartColor: true,
+  borderTopColor: true,
+  color: true,
+  tintColor: true,
+};
+
 const SUPPORTED_STYLES = {
-  opacity: true,
-  transform: true,
-  borderRadius: true,
+  ...SUPPORTED_COLOR_STYLES,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
+  borderRadius: true,
   borderTopEndRadius: true,
   borderTopLeftRadius: true,
   borderTopRightRadius: true,
   borderTopStartRadius: true,
   elevation: true,
+  opacity: true,
+  transform: true,
   zIndex: true,
   /* ios styles */
   shadowOpacity: true,
@@ -397,6 +411,10 @@ function transformDataType(value: number | string): number | string {
 
 module.exports = {
   API,
+  SUPPORTED_STYLES,
+  SUPPORTED_COLOR_STYLES,
+  SUPPORTED_TRANSFORMS,
+  SUPPORTED_INTERPOLATION_PARAMS,
   addWhitelistedStyleProp,
   addWhitelistedTransformProp,
   addWhitelistedInterpolationParam,