From c2705464da5d6b7e02cd7563111220daa7bd27b9 Mon Sep 17 00:00:00 2001 From: Luna Wei Date: Fri, 13 Feb 2026 11:39:07 -0800 Subject: [PATCH] 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 --- .../js/examples/Animated/EasingExample.js | 11 ++++++----- .../js/examples/Animated/MovingBoxExample.js | 16 ++++++---------- .../Animated/PressabilityWithNativeDrivers.js | 6 +++--- .../js/examples/AnimatedGratuitousApp/AnExSet.js | 13 ++++++++++--- .../examples/AnimatedGratuitousApp/AnExTilt.js | 15 ++++++++++----- .../CompatibilityAnimatedPointerMove.js | 8 ++++---- .../js/examples/Filter/FilterExample.js | 12 ++++++++++-- .../js/examples/Transform/TransformExample.js | 13 ++++++++++--- 8 files changed, 59 insertions(+), 35 deletions(-) diff --git a/packages/rn-tester/js/examples/Animated/EasingExample.js b/packages/rn-tester/js/examples/Animated/EasingExample.js index 46db230695c2..ad2c7500024d 100644 --- a/packages/rn-tester/js/examples/Animated/EasingExample.js +++ b/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({ { - opacityAndScale.current.setValue(0); + opacityAndScale.setValue(0); animation.current.start(); }}> Animate diff --git a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js b/packages/rn-tester/js/examples/Animated/MovingBoxExample.js index 56e9fc88925a..84c8e0c48c44 100644 --- a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js +++ b/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 ? ( ) : ( The box view is not being rendered diff --git a/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js b/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js index 2b92ca80a273..1b76cf8e3a2f 100644 --- a/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js index 4df8cfb69144..a4fec8a10c5b 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js +++ b/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, diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js index af3130e8d98e..80760d8fdaa0 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js +++ b/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, diff --git a/packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js b/packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js index a05925d42deb..bb3458e48edd 100644 --- a/packages/rn-tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Filter/FilterExample.js b/packages/rn-tester/js/examples/Filter/FilterExample.js index d1d9b0a83078..8df9767911d1 100644 --- a/packages/rn-tester/js/examples/Filter/FilterExample.js +++ b/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; const AnimatedBlurExample = () => { - const animatedValue = React.useRef(new Animated.Value(0)).current; + const animatedValue = useAnimatedValue(0); const [isBlurred, setIsBlurred] = React.useState(false); const onPress = () => { diff --git a/packages/rn-tester/js/examples/Transform/TransformExample.js b/packages/rn-tester/js/examples/Transform/TransformExample.js index c3b1501a9bc7..262206a9c0e9 100644 --- a/packages/rn-tester/js/examples/Transform/TransformExample.js +++ b/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(