upstream useAnimatedColor and useAnimatedValueXY (#55539)

Summary:
Pull Request resolved: #55539

Move `useAnimatedValueXY` and `useAnimatedColor` hooks into react-native-github so they can be used by OSS alongside the existing `useAnimatedValue` hook which can only take number value.

## Changelog:

[General] [Added] - upstream useAnimatedColor and useAnimatedValueXY

Reviewed By: fabriziocucci

Differential Revision: D93125807

fbshipit-source-id: 74fb3925e8d495cddce7b28bdf852995854f85bb

Author: zeyap

packages/react-native/Libraries/Animated/Animated.d.ts

@@ -77,14 +77,21 @@ export namespace Animated {
     readonly useNativeDriver: boolean;
   };
 
+  type AnimatedColorInputValue =
+    | RgbaValue
+    | RgbaAnimatedValue
+    | ColorValue
+    | null
+    | undefined;
+
   class AnimatedColor extends AnimatedWithChildren {
     r: AnimatedValue;
     g: AnimatedValue;
     b: AnimatedValue;
     a: AnimatedValue;
 
     constructor(
-      valueIn?: RgbaValue | RgbaAnimatedValue | ColorValue | null,
+      valueIn?: AnimatedColorInputValue,
       config?: AnimatedConfig | null,
     );
     nativeColor: unknown; // Unsure what to do here

packages/react-native/Libraries/Animated/useAnimatedColor.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type {Animated} from './Animated';
+
+export function useAnimatedColor(
+  inputValue?: Animated.AnimatedColorInputValue,
+  config?: Animated.AnimatedConfig | null | undefined,
+): Animated.AnimatedColor;

packages/react-native/Libraries/Animated/useAnimatedColor.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {AnimatedColorConfig, InputValue} from './nodes/AnimatedColor';
+
+import Animated from './Animated';
+import {useRef} from 'react';
+
+export default function useAnimatedColor(
+  inputValue?: InputValue,
+  config?: ?AnimatedColorConfig,
+): Animated.Color {
+  const ref = useRef<null | Animated.Color>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.Color(inputValue, config);
+  }
+  return ref.current;
+}

packages/react-native/Libraries/Animated/useAnimatedValueXY.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type {Animated} from './Animated';
+
+export function useAnimatedValueXY(
+  initialValue: {x: number; y: number},
+  config?: Animated.AnimatedConfig | null | undefined,
+): Animated.ValueXY;

packages/react-native/Libraries/Animated/useAnimatedValueXY.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import Animated from './Animated';
+import {useRef} from 'react';
+
+export default function useAnimatedValueXY(
+  initialValue: {
+    x: number,
+    y: number,
+  },
+  config?: ?Animated.AnimatedConfig,
+): Animated.ValueXY {
+  const ref = useRef<null | Animated.ValueXY>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.ValueXY(initialValue, config);
+  }
+  return ref.current;
+}

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<<74ac46b82182a7d97e92c933a361f583>>
+ * @generated SignedSource<<6463b0a4f3acbeb07e6759c345b927d8>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -5651,10 +5651,21 @@ declare type UnsafeEventObject = Object
 declare type UnsafeMixed = unknown
 declare type UnsafeNativeEventObject = Object
 declare type UnsafeObject = Object
+declare function useAnimatedColor(
+  inputValue?: InputValue,
+  config?: AnimatedColorConfig | null | undefined,
+): Animated.Color
 declare function useAnimatedValue(
   initialValue: number,
   config?: Animated.AnimatedConfig | null | undefined,
 ): Animated.Value
+declare function useAnimatedValueXY(
+  initialValue: {
+    x: number
+    y: number
+  },
+  config?: Animated.AnimatedConfig | null | undefined,
+): Animated.ValueXY
 declare function useColorScheme(): ColorSchemeName | null | undefined
 declare function usePressability(
   config: null | PressabilityConfig | undefined,
@@ -6253,7 +6264,9 @@ export {
   processColor, // 6e877698
   registerCallableModule, // 839c8cfe
   requireNativeComponent, // 72c09c3d
+  useAnimatedColor, // e3511f81
   useAnimatedValue, // b18adb63
+  useAnimatedValueXY, // c7ee2332
   useColorScheme, // c216d6f7
   usePressability, // fe1f27d8
   useWindowDimensions, // bb4b683f

packages/react-native/index.js

@@ -341,6 +341,12 @@ module.exports = {
   get useAnimatedValue() {
     return require('./Libraries/Animated/useAnimatedValue').default;
   },
+  get useAnimatedValueXY() {
+    return require('./Libraries/Animated/useAnimatedValueXY').default;
+  },
+  get useAnimatedColor() {
+    return require('./Libraries/Animated/useAnimatedColor').default;
+  },
   get useColorScheme() {
     return require('./Libraries/Utilities/useColorScheme').default;
   },

packages/react-native/index.js.flow

@@ -407,6 +407,8 @@ export * as TurboModuleRegistry from './Libraries/TurboModule/TurboModuleRegistr
 export {default as UIManager} from './Libraries/ReactNative/UIManager';
 export {unstable_batchedUpdates} from './Libraries/ReactNative/RendererProxy';
 export {default as useAnimatedValue} from './Libraries/Animated/useAnimatedValue';
+export {default as useAnimatedValueXY} from './Libraries/Animated/useAnimatedValueXY';
+export {default as useAnimatedColor} from './Libraries/Animated/useAnimatedColor';
 export type {
   PressabilityConfig,
   EventHandlers as PressabilityEventHandlers,

packages/react-native/types/index.d.ts

@@ -75,6 +75,8 @@ export * from '../Libraries/Alert/Alert';
 export * from '../Libraries/Animated/Animated';
 export * from '../Libraries/Animated/Easing';
 export * from '../Libraries/Animated/useAnimatedValue';
+export * from '../Libraries/Animated/useAnimatedValueXY';
+export * from '../Libraries/Animated/useAnimatedColor';
 export * from '../Libraries/AppState/AppState';
 export * from '../Libraries/BatchedBridge/NativeModules';
 export * from '../Libraries/Components/AccessibilityInfo/AccessibilityInfo';