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

Summary:

## Changelog:

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

Reviewed By: javache

Differential Revision: D86255713

Author: zeyap

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 {...}

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 {

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);

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<1eb51bd683ea578d108218d5a48c42ec>>
+ * @generated SignedSource<<8907cb13f6d6798b38a019f18b769637>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -1453,7 +1453,7 @@ declare class AnimatedEvent {
   )
 }
 declare class AnimatedInterpolation_default<
-  OutputT extends number | string,
+  OutputT extends NativeColorValue | number | string,
 > extends AnimatedWithChildren_default {
   constructor(
     parent: AnimatedNode_default,
@@ -1534,7 +1534,7 @@ declare class AnimatedValue_default extends AnimatedWithChildren_default {
   constructor(value: number, config?: AnimatedValueConfig | null | undefined)
   extractOffset(): void
   flattenOffset(): void
-  interpolate<OutputT extends number | string>(
+  interpolate<OutputT extends NativeColorValue | number | string>(
     config: InterpolationConfigType<OutputT>,
   ): AnimatedInterpolation_default<OutputT>
   removeAllListeners(): void
@@ -2766,17 +2766,18 @@ declare type InternalTextInput = (
     ref?: React.Ref<TextInputInstance>
   },
 ) => React.ReactNode
-declare type InterpolationConfigType<OutputT extends number | string> =
-  Readonly<
-    AnimatedNodeConfig & {
-      extrapolate?: ExtrapolateType
-      extrapolateLeft?: ExtrapolateType
-      extrapolateRight?: ExtrapolateType
-      inputRange: ReadonlyArray<number>
-      outputRange: ReadonlyArray<OutputT>
-      easing?: (input: number) => number
-    }
-  >
+declare type InterpolationConfigType<
+  OutputT extends NativeColorValue | number | string,
+> = Readonly<
+  AnimatedNodeConfig & {
+    extrapolate?: ExtrapolateType
+    extrapolateLeft?: ExtrapolateType
+    extrapolateRight?: ExtrapolateType
+    inputRange: ReadonlyArray<number>
+    outputRange: ReadonlyArray<OutputT>
+    easing?: (input: number) => number
+  }
+>
 declare type IOSKeyboardEvent = Readonly<
   BaseKeyboardEvent & {
     isEventFromThisApp: boolean
@@ -5417,6 +5418,7 @@ declare type TimingAnimationConfig = Readonly<
       | AnimatedInterpolation_default<number>
       | AnimatedValue_default
       | AnimatedValueXY_default
+      | NativeColorValue
       | number
       | RgbaValue
       | {
@@ -5899,6 +5901,7 @@ declare type WithAnimatedValue<T> = T extends Builtin | Nullable
         | AnimatedAddition_default
         | AnimatedDiffClamp_default
         | AnimatedDivision_default
+        | AnimatedInterpolation_default<NativeColorValue>
         | AnimatedInterpolation_default<number | string>
         | AnimatedInterpolation_default<number>
         | AnimatedInterpolation_default<string>
@@ -5940,7 +5943,7 @@ export {
   AlertOptions, // a0cdac0f
   AlertType, // 5ab91217
   AndroidKeyboardEvent, // e03becc8
-  Animated, // 6b6a0b2e
+  Animated, // 1b188caf
   AppConfig, // ebddad4b
   AppRegistry, // 6cdee1d6
   AppState, // f7097b1b
@@ -5986,8 +5989,8 @@ export {
   EventSubscription, // b8d084aa
   ExtendedExceptionData, // 5a6ccf5a
   FilterFunction, // bf24c0e3
-  FlatList, // cbb48cbe
-  FlatListProps, // 451be810
+  FlatList, // 977c3d2d
+  FlatListProps, // 86e2dcab
   FocusEvent, // 529b43eb
   FontVariant, // 7c7558bb
   GestureResponderEvent, // b466f6d6
@@ -6120,14 +6123,14 @@ export {
   ScrollToLocationParamsType, // d7ecdad1
   ScrollView, // 7fb7c469
   ScrollViewImperativeMethods, // eb20aa46
-  ScrollViewProps, // 27986ff5
+  ScrollViewProps, // 912ae116
   ScrollViewPropsAndroid, // 84e2134b
   ScrollViewPropsIOS, // d83c9733
   ScrollViewScrollToOptions, // 3313411e
   SectionBase, // b376bddc
-  SectionList, // ff1193b2
+  SectionList, // 5b815722
   SectionListData, // 119baf83
-  SectionListProps, // c9ac8e07
+  SectionListProps, // b97e7451
   SectionListRenderItem, // 1fad0435
   SectionListRenderItemInfo, // 745e1992
   Separators, // 6a45f7e3
@@ -6176,7 +6179,7 @@ export {
   TouchableNativeFeedback, // aaa5b42c
   TouchableNativeFeedbackProps, // 372d3213
   TouchableOpacity, // 7e33acfd
-  TouchableOpacityProps, // ba6c0ba4
+  TouchableOpacityProps, // 80b3a106
   TouchableWithoutFeedback, // 7363a906
   TouchableWithoutFeedbackProps, // 68e3d87f
   TransformsStyle, // 65e70f18
@@ -6192,17 +6195,17 @@ export {
   ViewStyle, // c2db0e6e
   VirtualViewMode, // 85a69ef6
   VirtualizedList, // 4d513939
-  VirtualizedListProps, // a99d36db
+  VirtualizedListProps, // 1e67a9a5
   VirtualizedSectionList, // 446ba0df
-  VirtualizedSectionListProps, // 6cd4b378
+  VirtualizedSectionListProps, // b1ad0bbb
   WrapperComponentProvider, // 9cf3844c
   codegenNativeCommands, // e16d62f7
   codegenNativeComponent, // ed4c8103
   findNodeHandle, // c6b08494
   processColor, // 00453092
   registerCallableModule, // 86b65226
   requireNativeComponent, // e659aa32
-  useAnimatedValue, // 2c80bbc2
+  useAnimatedValue, // 125eb11a
   useColorScheme, // c216d6f7
   useWindowDimensions, // bb4b683f
 }

packages/react-native/src/private/animated/NativeAnimatedValidation.js

@@ -9,16 +9,17 @@
  */
 
 import type {InterpolationConfigType} from '../../../Libraries/Animated/nodes/AnimatedInterpolation';
+import type {NativeColorValue} from '../../../Libraries/StyleSheet/StyleSheetTypes';
 
 import {
   isSupportedInterpolationParam,
   isSupportedStyleProp,
   isSupportedTransformProp,
 } from '../../../Libraries/Animated/NativeAnimatedAllowlist';
 
-export function validateInterpolation<OutputT: number | string>(
-  config: InterpolationConfigType<OutputT>,
-): void {
+export function validateInterpolation<
+  OutputT: number | string | NativeColorValue,
+>(config: InterpolationConfigType<OutputT>): void {
   for (const key in config) {
     if (key !== 'debugID' && !isSupportedInterpolationParam(key)) {
       console.error(