feat: Add a missing useAnimatedValue hook

packages/react-native-web-examples/pages/animated/index.js

@@ -1,19 +1,19 @@
-import React, { useRef } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { Animated, Pressable, StyleSheet, Text, View, useAnimatedValue } from 'react-native';
 import Example from '../../shared/example';
 
 export default function AnimatedPage() {
-  const anim = useRef(new Animated.Value(0));
+  const anim = useAnimatedValue(0);
 
   const animateBox = () => {
-    Animated.timing(anim.current, {
+    Animated.timing(anim, {
       toValue: 1,
       duration: 1000,
       useNativeDriver: false
     }).start();
   };
 
-  const transform = anim.current.interpolate({
+  const transform = anim.interpolate({
     inputRange: [0, 1],
     outputRange: ['rotate(0deg)', 'rotate(45deg)']
   });

packages/react-native-web/src/exports/Animated/useAnimatedValue.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Davyd Narciso.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use client';
+
+import useAnimatedValue from '../../vendor/react-native/Animated/useAnimatedValue';
+export default useAnimatedValue;

packages/react-native-web/src/index.js

@@ -68,3 +68,4 @@ export { default as DeviceEventEmitter } from './exports/DeviceEventEmitter';
 export { default as useColorScheme } from './exports/useColorScheme';
 export { default as useLocaleContext } from './exports/useLocaleContext';
 export { default as useWindowDimensions } from './exports/useWindowDimensions';
+export { default as useAnimatedValue } from './exports/Animated/useAnimatedValue';

packages/react-native-web/src/vendor/react-native/Animated/useAnimatedValue.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 {AnimatedValueConfig} from './nodes/AnimatedValue';
+
+import Animated from './Animated';
+import {useRef} from 'react';
+
+export default function useAnimatedValue(
+  initialValue: number,
+  config?: ?AnimatedValueConfig,
+): Animated.Value {
+  const ref = useRef<null | Animated.Value>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.Value(initialValue, config);
+  }
+  return ref.current;
+}