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
This commit is contained in:
Genki Kondo
2022-02-01 16:12:30 -08:00
committed by Facebook GitHub Bot
parent 3552ff0562
commit cb42049e0a
3 changed files with 92 additions and 34 deletions
@@ -7,6 +7,9 @@
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;
@@ -14,6 +17,7 @@ import com.facebook.react.views.view.ColorUtil;
/*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;
@@ -21,14 +25,16 @@ import com.facebook.react.views.view.ColorUtil;
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 @@ import com.facebook.react.views.view.ColorUtil;
@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 @@ import com.facebook.react.views.view.ColorUtil;
+ " 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();
}
}
@@ -130,7 +130,7 @@ import java.util.Queue;
} 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)) {