(js part) Support PlatformColor type of toValue and interpolation outputRange (facebook#54457)

zeyap · facebook-github-bot · commit 8fe5dc2da262 · 2025-11-07T13:08:19.000-08:00
Summary:

## Changelog:

[General] [Added] (js part) Support PlatformColor type of toValue and interpolation outputRange

Differential Revision: D86255713
diff --git a/packages/react-native/Libraries/Animated/AnimatedImplementation.js b/packages/react-native/Libraries/Animated/AnimatedImplementation.js
@@ -129,8 +129,10 @@ const maybeVectorAnim = function (
     const configB = {...config};
     const configA = {...config};
     for (const key in config) {
-      const {r, g, b, a} = config[key];
+      const configValue = config[key];
+      const {r, g, b, a} = configValue;
       if (
+        // is RGBA
         r !== undefined &&
         g !== undefined &&
         b !== undefined &&
@@ -140,6 +142,34 @@ const maybeVectorAnim = function (
         configG[key] = g;
         configB[key] = b;
         configA[key] = a;
+      } else if (
+        // is PlatformColor
+        typeof configValue === 'object' ||
+        (configValue instanceof AnimatedColor &&
+          configValue.nativeColor != null)
+      ) {
+        const nativeColor =
+          configValue instanceof AnimatedColor
+            ? configValue.nativeColor
+            : configValue;
+        if (nativeColor) {
+          configR[key] = {
+            nativeColor,
+            channel: 'r',
+          };
+          configG[key] = {
+            nativeColor,
+            channel: 'g',
+          };
+          configB[key] = {
+            nativeColor,
+            channel: 'b',
+          };
+          configA[key] = {
+            nativeColor,
+            channel: 'a',
+          };
+        }
       }
     }
     const aR = anim((value: AnimatedColor).r, configR);
diff --git a/packages/react-native/Libraries/Animated/animations/TimingAnimation.js b/packages/react-native/Libraries/Animated/animations/TimingAnimation.js
@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {RgbaValue} from '../nodes/AnimatedColor';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
@@ -31,16 +32,24 @@ export type TimingAnimationConfig = $ReadOnly<{
     | AnimatedValueXY
     | RgbaValue
     | AnimatedColor
-    | AnimatedInterpolation<number>,
+    | AnimatedInterpolation<number>
+    | NativeColorValue,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
   ...
 }>;
 
+type TimingAnimationConfigSingleToValue =
+  | number
+  | $ReadOnly<{
+      nativeColor: NativeColorValue,
+      channel: 'r' | 'g' | 'b' | 'a',
+    }>;
+
 export type TimingAnimationConfigSingle = $ReadOnly<{
   ...AnimationConfig,
-  toValue: number,
+  toValue: TimingAnimationConfigSingleToValue,
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
@@ -61,7 +70,7 @@ function easeInOut() {
 export default class TimingAnimation extends Animation {
   _startTime: number;
   _fromValue: number;
-  _toValue: number;
+  _toValue: TimingAnimationConfigSingleToValue;
   _duration: number;
   _delay: number;
   _easing: (value: number) => number;
@@ -83,7 +92,7 @@ export default class TimingAnimation extends Animation {
   __getNativeAnimationConfig(): $ReadOnly<{
     type: 'frames',
     frames: $ReadOnlyArray<number>,
-    toValue: number,
+    toValue: TimingAnimationConfigSingleToValue,
     iterations: number,
     platformConfig: ?PlatformConfig,
     ...
@@ -122,14 +131,20 @@ export default class TimingAnimation extends Animation {
 
       const useNativeDriver = this.__startAnimationIfNative(animatedValue);
       if (!useNativeDriver) {
-        // Animations that sometimes have 0 duration and sometimes do not
-        // still need to use the native driver when duration is 0 so as to
-        // not cause intermixed JS and native animations.
-        if (this._duration === 0) {
-          this._onUpdate(this._toValue);
-          this.__notifyAnimationEnd({finished: true});
-        } else {
-          this._animationFrame = requestAnimationFrame(() => this.onUpdate());
+        if (typeof this._toValue === 'number') {
+          // Animations that sometimes have 0 duration and sometimes do not
+          // still need to use the native driver when duration is 0 so as to
+          // not cause intermixed JS and native animations.
+          if (this._duration === 0) {
+            this._onUpdate(this._toValue);
+            this.__notifyAnimationEnd({finished: true});
+          } else {
+            this._animationFrame = requestAnimationFrame(() => this.onUpdate());
+          }
+        } else if (this._toValue.nativeColor != null) {
+          throw new Error(
+            'Cannot run TimingAnimation to nativeColor with js driver',
+          );
         }
       }
     };
@@ -141,13 +156,17 @@ export default class TimingAnimation extends Animation {
   }
 
   onUpdate(): void {
+    if (typeof this._toValue !== 'number') {
+      return;
+    }
+    const toValue: number = this._toValue;
     const now = Date.now();
     if (now >= this._startTime + this._duration) {
       if (this._duration === 0) {
-        this._onUpdate(this._toValue);
+        this._onUpdate(toValue);
       } else {
         this._onUpdate(
-          this._fromValue + this._easing(1) * (this._toValue - this._fromValue),
+          this._fromValue + this._easing(1) * (toValue - this._fromValue),
         );
       }
       this.__notifyAnimationEnd({finished: true});
@@ -157,7 +176,7 @@ export default class TimingAnimation extends Animation {
     this._onUpdate(
       this._fromValue +
         this._easing((now - this._startTime) / this._duration) *
-          (this._toValue - this._fromValue),
+          (toValue - this._fromValue),
     );
     if (this.__active) {
       // $FlowFixMe[method-unbinding] added when improving typing for this parameters
diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js
@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {NativeColorValue} from '../StyleSheet/StyleSheetTypes';
 import type AnimatedAddition from './nodes/AnimatedAddition';
 import type AnimatedDiffClamp from './nodes/AnimatedDiffClamp';
 import type AnimatedDivision from './nodes/AnimatedDivision';
@@ -46,6 +47,7 @@ export type WithAnimatedValue<+T> = T extends Builtin | Nullable
         | AnimatedInterpolation<number | string>
         | AnimatedInterpolation<number>
         | AnimatedInterpolation<string>
+        | AnimatedInterpolation<NativeColorValue>
     : T extends $ReadOnlyArray<infer P>
       ? $ReadOnlyArray<WithAnimatedValue<P>>
       : T extends {...}
diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedInterpolation.js b/packages/react-native/Libraries/Animated/nodes/AnimatedInterpolation.js
@@ -12,6 +12,7 @@
 
 'use strict';
 
+import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from './AnimatedNode';
 import type {AnimatedNodeConfig} from './AnimatedNode';
@@ -26,7 +27,9 @@ import invariant from 'invariant';
 
 type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 
-export type InterpolationConfigType<OutputT: number | string> = $ReadOnly<{
+export type InterpolationConfigType<
+  OutputT: number | string | NativeColorValue,
+> = $ReadOnly<{
   ...AnimatedNodeConfig,
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<OutputT>,
@@ -82,6 +85,23 @@ function createNumericInterpolation(
   };
 }
 
+function createPlatformColorInterpolation(
+  config: InterpolationConfigType<NativeColorValue>,
+): (input: number) => NativeColorValue {
+  const outputRange = config.outputRange;
+  const outputRangeIndices = Array.from(Array(outputRange.length).keys());
+  const interpolateIndex = createNumericInterpolation({
+    ...config,
+    inputRange: config.inputRange,
+    outputRange: outputRangeIndices,
+  });
+
+  return input => {
+    // PlatformColor interpolation should happen natively, here we just use the closest color
+    return outputRange[Math.floor(interpolateIndex(input))];
+  };
+}
+
 function interpolate(
   input: number,
   inputMin: number,
@@ -277,7 +297,7 @@ function findRange(input: number, inputRange: $ReadOnlyArray<number>) {
   return i - 1;
 }
 
-function checkValidRanges<OutputT: number | string>(
+function checkValidRanges<OutputT: number | string | NativeColorValue>(
   inputRange: $ReadOnlyArray<number>,
   outputRange: $ReadOnlyArray<OutputT>,
 ) {
@@ -304,7 +324,7 @@ function checkValidInputRange(arr: $ReadOnlyArray<number>) {
   }
 }
 
-function checkInfiniteRange<OutputT: number | string>(
+function checkInfiniteRange<OutputT: number | string | NativeColorValue>(
   name: string,
   arr: $ReadOnlyArray<OutputT>,
 ) {
@@ -322,7 +342,7 @@ function checkInfiniteRange<OutputT: number | string>(
 }
 
 export default class AnimatedInterpolation<
-  OutputT: number | string,
+  OutputT: number | string | NativeColorValue,
 > extends AnimatedWithChildren {
   _parent: AnimatedNode;
   _config: InterpolationConfigType<OutputT>;
@@ -347,6 +367,10 @@ export default class AnimatedInterpolation<
       const config = this._config;
       if (config.outputRange && typeof config.outputRange[0] === 'string') {
         this._interpolation = (createStringInterpolation((config: any)): any);
+      } else if (typeof config.outputRange[0] === 'object') {
+        this._interpolation = (createPlatformColorInterpolation(
+          (config: any),
+        ): any);
       } else {
         this._interpolation = (createNumericInterpolation((config: any)): any);
       }
@@ -403,6 +427,8 @@ export default class AnimatedInterpolation<
           return NativeAnimatedHelper.transformDataType(value);
         }
       }): any);
+    } else if (typeof outputRange[0] === 'object') {
+      outputType = 'platform_color';
     }
 
     return {
diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js b/packages/react-native/Libraries/Animated/nodes/AnimatedValue.js
@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type Animation from '../animations/Animation';
@@ -298,7 +299,7 @@ export default class AnimatedValue extends AnimatedWithChildren {
    * Interpolates the value before updating the property, e.g. mapping 0-1 to
    * 0-10.
    */
-  interpolate<OutputT: number | string>(
+  interpolate<OutputT: number | string | NativeColorValue>(
     config: InterpolationConfigType<OutputT>,
   ): AnimatedInterpolation<OutputT> {
     return new AnimatedInterpolation(this, config);
diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts
diff --git a/packages/react-native/src/private/animated/NativeAnimatedValidation.js b/packages/react-native/src/private/animated/NativeAnimatedValidation.js
