useAnimatedValue in react-native-github

Summary:
Changelog: [Internal] -  Migrated 8 files in
`xplat/js/react-native-github/packages/rn-tester/` from the manual `useRef(new Animated.Value(x))` pattern to the `useAnimatedValue(x)` hook.

Reviewed By: fabriziocucci

Differential Revision: D93258352

Author: lunaleaps

packages/rn-tester/js/examples/Animated/EasingExample.js

@@ -23,6 +23,7 @@ import {
   StyleSheet,
   Text,
   View,
+  useAnimatedValue,
 } from 'react-native';
 
 type Props = Readonly<{}>;
@@ -87,9 +88,9 @@ function EasingItem({
   item: EasingListItem,
   useNativeDriver: boolean,
 }): React.Node {
-  const opacityAndScale = useRef(new Animated.Value(1));
+  const opacityAndScale = useAnimatedValue(1);
   const animation = useRef(
-    Animated.timing(opacityAndScale.current, {
+    Animated.timing(opacityAndScale, {
       toValue: 1,
       duration: 1200,
       easing: item.easing,
@@ -100,8 +101,8 @@ function EasingItem({
   const animatedStyles = [
     styles.box,
     {
-      opacity: opacityAndScale.current,
-      transform: [{scale: opacityAndScale.current}],
+      opacity: opacityAndScale,
+      transform: [{scale: opacityAndScale}],
     },
   ];
 
@@ -115,7 +116,7 @@ function EasingItem({
         </Text>
         <RNTesterButton
           onPress={() => {
-            opacityAndScale.current.setValue(0);
+            opacityAndScale.setValue(0);
             animation.current.start();
           }}>
           Animate

packages/rn-tester/js/examples/Animated/MovingBoxExample.js

@@ -14,8 +14,8 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
 import ToggleNativeDriver from './utils/ToggleNativeDriver';
 import * as React from 'react';
-import {useRef, useState} from 'react';
-import {Animated, StyleSheet, Text, View} from 'react-native';
+import {useState} from 'react';
+import {Animated, StyleSheet, Text, View, useAnimatedValue} from 'react-native';
 
 const containerWidth = 200;
 const boxSize = 50;
@@ -59,12 +59,12 @@ const styles = StyleSheet.create({
 type Props = Readonly<{}>;
 
 function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) {
-  const x = useRef(new Animated.Value(0));
+  const x = useAnimatedValue(0);
   const [update, setUpdate] = useState(0);
   const [boxVisible, setBoxVisible] = useState(true);
 
   const moveTo = (pos: number) => {
-    Animated.timing(x.current, {
+    Animated.timing(x, {
       toValue: pos,
       duration: 1000,
       useNativeDriver,
@@ -76,7 +76,7 @@ function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) {
   };
   const toggleText = boxVisible ? 'Hide' : 'Show';
   const onReset = () => {
-    x.current.resetAnimation();
+    x.resetAnimation();
     setUpdate(update + 1);
   };
   return (
@@ -85,11 +85,7 @@ function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) {
         {boxVisible ? (
           <Animated.View
             testID="moving-view"
-            style={[
-              styles.content,
-              styles.box,
-              {transform: [{translateX: x.current}]},
-            ]}
+            style={[styles.content, styles.box, {transform: [{translateX: x}]}]}
           />
         ) : (
           <Text>The box view is not being rendered</Text>

packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js

@@ -11,13 +11,13 @@
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import * as React from 'react';
-import {useRef, useState} from 'react';
-import {Animated, Button, Text, View} from 'react-native';
+import {useState} from 'react';
+import {Animated, Button, Text, View, useAnimatedValue} from 'react-native';
 
 const componentList: number[] = Array.from({length: 100}, (_, i) => i + 1);
 
 function PressableWithNativeDriver() {
-  const currScroll = useRef(new Animated.Value(0)).current;
+  const currScroll = useAnimatedValue(0);
   const [count, setCount] = useState(0);
 
   return (

packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js

@@ -14,8 +14,15 @@ import AnExBobble from './AnExBobble';
 import AnExChained from './AnExChained';
 import AnExScroll from './AnExScroll';
 import AnExTilt from './AnExTilt';
-import React, {useRef, useState} from 'react';
-import {Animated, PanResponder, StyleSheet, Text, View} from 'react-native';
+import React, {useState} from 'react';
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  Text,
+  View,
+  useAnimatedValue,
+} from 'react-native';
 
 const randColor = () => {
   const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
@@ -39,7 +46,7 @@ const AnExSet = ({
 }: AnExSetProps): React.Node => {
   const [closeColor] = useState(randColor());
   const [openColor] = useState(randColor());
-  const dismissY = useRef(new Animated.Value(0)).current;
+  const dismissY = useAnimatedValue(0);
 
   const dismissResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => isActive,

packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js

@@ -10,13 +10,18 @@
 
 'use strict';
 
-import React, {useCallback, useEffect, useRef} from 'react';
-import {Animated, PanResponder, StyleSheet} from 'react-native';
+import React, {useCallback, useEffect} from 'react';
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  useAnimatedValue,
+} from 'react-native';
 
 const AnExTilt = (): React.Node => {
-  const panX = useRef(new Animated.Value(0)).current;
-  const opacity = useRef(new Animated.Value(1)).current;
-  const burns = useRef(new Animated.Value(1.15)).current;
+  const panX = useAnimatedValue(0);
+  const opacity = useAnimatedValue(1);
+  const burns = useAnimatedValue(1.15);
 
   const tiltPanResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => true,

packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js

@@ -12,8 +12,8 @@ import type {RNTesterModuleExample} from '../../../types/RNTesterTypes';
 
 import ToggleNativeDriver from '../../Animated/utils/ToggleNativeDriver';
 import * as React from 'react';
-import {useRef, useState} from 'react';
-import {Animated, StyleSheet, Text} from 'react-native';
+import {useState} from 'react';
+import {Animated, StyleSheet, Text, useAnimatedValue} from 'react-native';
 
 const WIDTH = 200;
 const HEIGHT = 250;
@@ -39,8 +39,8 @@ const styles = StyleSheet.create({
 });
 
 function CompatibilityAnimatedPointerMove(): React.Node {
-  const xCoord = useRef(new Animated.Value(0)).current;
-  const yCoord = useRef(new Animated.Value(0)).current;
+  const xCoord = useAnimatedValue(0);
+  const yCoord = useAnimatedValue(0);
   const [useNativeDriver, setUseNativeDriver] = useState(true);
 
   return (

packages/rn-tester/js/examples/Filter/FilterExample.js

@@ -15,7 +15,15 @@ import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import React from 'react';
 import {useState} from 'react';
-import {Animated, Button, Image, StyleSheet, Text, View} from 'react-native';
+import {
+  Animated,
+  Button,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+  useAnimatedValue,
+} from 'react-native';
 
 const alphaHotdog = require('../../assets/alpha-hotdog.png');
 const hotdog = require('../../assets/hotdog.jpg');
@@ -278,7 +286,7 @@ exports.examples = [
 ] as Array<RNTesterModuleExample>;
 
 const AnimatedBlurExample = () => {
-  const animatedValue = React.useRef(new Animated.Value(0)).current;
+  const animatedValue = useAnimatedValue(0);
   const [isBlurred, setIsBlurred] = React.useState(false);
 
   const onPress = () => {

packages/rn-tester/js/examples/Transform/TransformExample.js

@@ -12,8 +12,15 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import type {AnimatedNode} from 'react-native/Libraries/Animated/AnimatedExports';
 
 import * as React from 'react';
-import {useEffect, useRef, useState} from 'react';
-import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
+import {useEffect, useState} from 'react';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  Text,
+  View,
+  useAnimatedValue,
+} from 'react-native';
 
 function AnimateTransformSingleProp() {
   const [theta] = useState(new Animated.Value(45));
@@ -53,7 +60,7 @@ function AnimateTransformSingleProp() {
 }
 
 function TransformOriginExample() {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
+  const rotateAnim = useAnimatedValue(0);
 
   useEffect(() => {
     Animated.loop(