Support platform color with AnimatedColor on Android

Summary:
Adds support for platform colors in AnimatedColor.
Passes the processed native color object to the native ColorAnimatedNode via the native config; ColorAnimatedNode then uses ColorPropConverter.getColor to resolve the resource path.

Note: setting a platform color via setValue on an existing AnimatedColor is not supported yet

Changelog:
[Android][Added] - Support platform color with AnimatedColor

Reviewed By: yungsters

Differential Revision: D33922266

fbshipit-source-id: 04d39a5ce0872b31d06ffbd4639d2f2213cf3314

Author: genkikondo

Libraries/Animated/nodes/AnimatedColor.js

@@ -91,6 +91,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
   g: AnimatedValue;
   b: AnimatedValue;
   a: AnimatedValue;
+  nativeColor: Object;
   _listeners: {
     [key: string]: {
       r: string,
@@ -105,8 +106,16 @@ export default class AnimatedColor extends AnimatedWithChildren {
   constructor(valueIn?: ?(RgbaValue | RgbaAnimatedValue | ColorValue)) {
     super();
     let value: RgbaValue | RgbaAnimatedValue | ColorValue =
-      valueIn || defaultColor;
+      valueIn ?? defaultColor;
+    this.setValue(value);
+    this._listeners = {};
+  }
 
+  /**
+   * Directly set the value. This will stop any animations running on the value
+   * and update all the bound properties.
+   */
+  setValue(value: RgbaValue | RgbaAnimatedValue | ColorValue): void {
     if (isRgbaAnimatedValue(value)) {
       // $FlowIgnore[incompatible-cast] - Type is verified above
       const rgbaAnimatedValue: RgbaAnimatedValue = (value: RgbaAnimatedValue);
@@ -118,37 +127,58 @@ export default class AnimatedColor extends AnimatedWithChildren {
       // Handle potential parsable string color or platform color object
       if (!isRgbaValue(value)) {
         // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-        value = processColor((value: ColorValue)) || {r: 0, g: 0, b: 0, a: 1.0};
-        // TODO: support platform color
+        value = processColor((value: ColorValue)) ?? defaultColor;
       }
 
-      // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
-      const rgbaValue: RgbaValue = (value: RgbaValue);
-      this.r = new AnimatedValue(rgbaValue.r);
-      this.g = new AnimatedValue(rgbaValue.g);
-      this.b = new AnimatedValue(rgbaValue.b);
-      this.a = new AnimatedValue(rgbaValue.a);
-    }
-    this._listeners = {};
-  }
+      if (!isRgbaValue(value)) {
+        // We are using a platform color
+        this.nativeColor = value;
+        value = defaultColor;
+      }
 
-  /**
-   * Directly set the value. This will stop any animations running on the value
-   * and update all the bound properties.
-   */
-  setValue(value: {r: number, g: number, b: number, a: number, ...}): void {
-    this.r.setValue(value.r);
-    this.g.setValue(value.g);
-    this.b.setValue(value.b);
-    this.a.setValue(value.a);
+      if (isRgbaValue(value)) {
+        // $FlowIgnore[incompatible-cast] - Type is verified via conditionals
+        const rgbaValue: RgbaValue = (value: RgbaValue);
+
+        if (this.r) {
+          this.r.setValue(rgbaValue.r);
+        } else {
+          this.r = new AnimatedValue(rgbaValue.r);
+        }
+
+        if (this.g) {
+          this.g.setValue(rgbaValue.g);
+        } else {
+          this.g = new AnimatedValue(rgbaValue.g);
+        }
+
+        if (this.b) {
+          this.b.setValue(rgbaValue.b);
+        } else {
+          this.b = new AnimatedValue(rgbaValue.b);
+        }
+
+        if (this.a) {
+          this.a.setValue(rgbaValue.a);
+        } else {
+          this.a = new AnimatedValue(rgbaValue.a);
+        }
+      }
+
+      if (this.nativeColor) {
+        this.__makeNative();
+        // TODO (T111170195): In order to support setValue() with a platform color, update the
+        // native AnimatedNode (if it exists) with a new config.
+      }
+    }
   }
 
   /**
    * Sets an offset that is applied on top of whatever value is set, whether
    * via `setValue`, an animation, or `Animated.event`. Useful for compensating
    * things like the start of a pan gesture.
    */
-  setOffset(offset: {r: number, g: number, b: number, a: number, ...}): void {
+  setOffset(offset: RgbaValue): void {
     this.r.setOffset(offset.r);
     this.g.setOffset(offset.g);
     this.b.setOffset(offset.b);
@@ -280,6 +310,7 @@ export default class AnimatedColor extends AnimatedWithChildren {
       g: this.g.__getNativeTag(),
       b: this.b.__getNativeTag(),
       a: this.a.__getNativeTag(),
+      nativeColor: this.nativeColor,
     };
   }
 }

ReactAndroid/src/main/java/com/facebook/react/animated/ColorAnimatedNode.java

@@ -7,28 +7,34 @@
 
 package com.facebook.react.animated;
 
+import android.graphics.Color;
+import com.facebook.react.bridge.ColorPropConverter;
+import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.views.view.ColorUtil;
 
 /** Animated node that represents a color. */
 /*package*/ class ColorAnimatedNode extends AnimatedNode {
 
   private final NativeAnimatedNodesManager mNativeAnimatedNodesManager;
+  private final ReactApplicationContext mReactApplicationContext;
   private final int mRNodeId;
   private final int mGNodeId;
   private final int mBNodeId;
   private final int mANodeId;
   private int mColor;
 
   public ColorAnimatedNode(
-      ReadableMap config, NativeAnimatedNodesManager nativeAnimatedNodesManager) {
+      ReadableMap config,
+      NativeAnimatedNodesManager nativeAnimatedNodesManager,
+      ReactApplicationContext reactApplicationContext) {
     mNativeAnimatedNodesManager = nativeAnimatedNodesManager;
+    mReactApplicationContext = reactApplicationContext;
     mRNodeId = config.getInt("r");
     mGNodeId = config.getInt("g");
     mBNodeId = config.getInt("b");
     mANodeId = config.getInt("a");
-
-    // TODO (T110930421): Support platform color
+    setNativeColor(config.getMap("nativeColor"));
   }
 
   public int getColor() {
@@ -37,15 +43,15 @@ public int getColor() {
 
   @Override
   public void update() {
-    AnimatedNode rNode = mNativeAnimatedNodesManager.getNodeById(mRNodeId);
-    AnimatedNode gNode = mNativeAnimatedNodesManager.getNodeById(mGNodeId);
-    AnimatedNode bNode = mNativeAnimatedNodesManager.getNodeById(mBNodeId);
-    AnimatedNode aNode = mNativeAnimatedNodesManager.getNodeById(mANodeId);
+    ValueAnimatedNode rNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mRNodeId);
+    ValueAnimatedNode gNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mGNodeId);
+    ValueAnimatedNode bNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mBNodeId);
+    ValueAnimatedNode aNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mANodeId);
 
-    double r = ((ValueAnimatedNode) rNode).getValue();
-    double g = ((ValueAnimatedNode) gNode).getValue();
-    double b = ((ValueAnimatedNode) bNode).getValue();
-    double a = ((ValueAnimatedNode) aNode).getValue();
+    double r = rNode.getValue();
+    double g = gNode.getValue();
+    double b = bNode.getValue();
+    double a = aNode.getValue();
 
     mColor = ColorUtil.normalize(r, g, b, a);
   }
@@ -63,4 +69,25 @@ public String prettyPrint() {
         + " a: "
         + mANodeId;
   }
+
+  private void setNativeColor(ReadableMap nativeColor) {
+    if (nativeColor == null) {
+      return;
+    }
+
+    int color =
+        ColorPropConverter.getColor(nativeColor, mReactApplicationContext.getCurrentActivity());
+
+    ValueAnimatedNode rNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mRNodeId);
+    ValueAnimatedNode gNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mGNodeId);
+    ValueAnimatedNode bNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mBNodeId);
+    ValueAnimatedNode aNode = (ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(mANodeId);
+
+    rNode.mValue = Color.red(color);
+    gNode.mValue = Color.green(color);
+    bNode.mValue = Color.blue(color);
+    aNode.mValue = Color.alpha(color) / 255.0;
+
+    update();
+  }
 }

ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedNodesManager.java

@@ -130,7 +130,7 @@ public void createAnimatedNode(int tag, ReadableMap config) {
     } else if ("value".equals(type)) {
       node = new ValueAnimatedNode(config);
     } else if ("color".equals(type)) {
-      node = new ColorAnimatedNode(config, this);
+      node = new ColorAnimatedNode(config, this, mReactApplicationContext);
     } else if ("props".equals(type)) {
       node = new PropsAnimatedNode(config, this);
     } else if ("interpolation".equals(type)) {