From 67733f998cdbafcf20645b9a56018d16407626a0 Mon Sep 17 00:00:00 2001 From: lauren Date: Thu, 29 Aug 2024 10:43:49 -0400 Subject: [PATCH] Remove ref in render antipattern in animated docs Reading or writing to a ref in render is a [rule of React violation](https://react.dev/reference/react/useRef). This PR updates the docs for animated to use the `useAnimatedValue` hook instead, which does use a ref under the hood but isolates the rule of React violation to just that hook. This allows users that follow code examples for animated to have their components and hooks be compilable by React Compiler. This hook was added in [0.71](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#:~:text=Introduce%20useAnimatedValue%20hook%20to%20make%20it%20easier%20working%20with%20Animated.Values%20in%20function%20components.%20(e22217fe8b%20by%20%40fabriziocucci)) so I'm also updating versioned docs from 0.71 onwards. --- docs/animated.md | 15 ++++-- docs/animatedvalue.md | 2 +- docs/animations.md | 17 ++++--- docs/easing.md | 6 ++- docs/interactionmanager.md | 10 ++-- docs/transforms.md | 12 +++-- .../version-0.70/interactionmanager.md | 5 +- .../versioned_docs/version-0.71/animated.md | 7 +-- .../version-0.71/animatedvalue.md | 2 +- .../versioned_docs/version-0.71/animations.md | 15 +++--- website/versioned_docs/version-0.71/easing.md | 6 ++- .../version-0.71/interactionmanager.md | 10 ++-- .../versioned_docs/version-0.72/animated.md | 7 +-- .../version-0.72/animatedvalue.md | 2 +- .../versioned_docs/version-0.72/animations.md | 15 +++--- .../version-0.72/interactionmanager.md | 10 ++-- .../versioned_docs/version-0.73/animated.md | 7 +-- .../version-0.73/animatedvalue.md | 2 +- .../versioned_docs/version-0.73/animations.md | 17 ++++--- .../version-0.73/interactionmanager.md | 10 ++-- .../versioned_docs/version-0.73/transforms.md | 6 +-- .../versioned_docs/version-0.74/animated.md | 7 +-- .../version-0.74/animatedvalue.md | 2 +- .../versioned_docs/version-0.74/animations.md | 17 ++++--- .../version-0.74/interactionmanager.md | 10 ++-- .../versioned_docs/version-0.74/transforms.md | 6 +-- .../versioned_docs/version-0.75/animated.md | 7 +-- .../version-0.75/animatedvalue.md | 2 +- .../versioned_docs/version-0.75/animations.md | 17 ++++--- .../version-0.75/interactionmanager.md | 10 ++-- .../versioned_docs/version-0.75/transforms.md | 6 +-- yarn.lock | 50 +++---------------- 32 files changed, 162 insertions(+), 155 deletions(-) diff --git a/docs/animated.md b/docs/animated.md index 8eee7843170..606ee976e7c 100644 --- a/docs/animated.md +++ b/docs/animated.md @@ -14,13 +14,20 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` ```SnackPlayer name=Animated%20Example -import React, {useRef} from 'react'; -import {Animated, Text, View, StyleSheet, Button} from 'react-native'; +import React from 'react'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; +import { + Animated, + Text, + View, + StyleSheet, + Button, + useAnimatedValue, +} from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useRef(new Animated.Value(0)).current; + const fadeAnim = useAnimatedValue(0); const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds @@ -495,7 +502,7 @@ Stops any running animation and resets the value to its original. ### `Value` -Standard value class for driving animations. Typically initialized with `new Animated.Value(0);` +Standard value class for driving animations. Typically initialized with `useAnimatedValue(0);` or `new Animated.Value(0);` in class components. You can read more about `Animated.Value` API on the separate [page](animatedvalue). diff --git a/docs/animatedvalue.md b/docs/animatedvalue.md index f6caa7ba422..189df398ec0 100644 --- a/docs/animatedvalue.md +++ b/docs/animatedvalue.md @@ -5,7 +5,7 @@ title: Animated.Value Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. -Typically initialized with `new Animated.Value(0);` +Typically initialized with `useAnimatedValue(0);` or `new Animated.Value(0);` in class components. --- diff --git a/docs/animations.md b/docs/animations.md index cd298a9164b..283718b0664 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -21,11 +21,11 @@ For example, a container view that fades in when it is mounted may look like thi ```SnackPlayer ext=js -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; const FadeInView = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,15 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; import type {PropsWithChildren} from 'react'; import type {ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -311,7 +311,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example ```SnackPlayer name=Animated&supportedPlatforms=ios,android -import React, {useRef} from 'react'; +import React from 'react'; import { ScrollView, Text, @@ -320,6 +320,7 @@ import { ImageBackground, Animated, useWindowDimensions, + useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -328,7 +329,7 @@ const images = new Array(6).fill( ); const App = () => { - const scrollX = useRef(new Animated.Value(0)).current; + const scrollX = useAnimatedValue(0); const {width: windowWidth} = useWindowDimensions(); diff --git a/docs/easing.md b/docs/easing.md index 25eda066740..23449a9a6af 100644 --- a/docs/easing.md +++ b/docs/easing.md @@ -59,11 +59,12 @@ import { Text, TouchableOpacity, View, + useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - let opacity = new Animated.Value(0); + const opacity = useAnimatedValue(0); const animate = easing => { opacity.setValue(0); @@ -219,12 +220,13 @@ import { Text, TouchableOpacity, View, + useAnimatedValue, type EasingFunction, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - let opacity = new Animated.Value(0); + const opacity = useAnimatedValue(0); const animate = (easing: EasingFunction) => { opacity.setValue(0); diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md index d0916603260..f9265e7db16 100644 --- a/docs/interactionmanager.md +++ b/docs/interactionmanager.md @@ -47,7 +47,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -55,6 +55,7 @@ import { Platform, StyleSheet, Text, + useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -66,7 +67,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { @@ -128,7 +129,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -136,6 +137,7 @@ import { Platform, StyleSheet, Text, + useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; @@ -147,7 +149,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { diff --git a/docs/transforms.md b/docs/transforms.md index cfb51f6949f..5de35ef2fc7 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -212,12 +212,18 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin%20Example -import React, {useRef, useEffect} from 'react'; -import {Animated, View, StyleSheet, Easing} from 'react-native'; +import React, {useEffect} from 'react'; +import { + Animated, + View, + StyleSheet, + Easing, + useAnimatedValue, +} from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const rotateAnim = useRef(new Animated.Value(0)).current; + const rotateAnim = useAnimatedValue(0); useEffect(() => { Animated.loop( diff --git a/website/versioned_docs/version-0.70/interactionmanager.md b/website/versioned_docs/version-0.70/interactionmanager.md index e75be3001b7..718b0ad7cd3 100644 --- a/website/versioned_docs/version-0.70/interactionmanager.md +++ b/website/versioned_docs/version-0.70/interactionmanager.md @@ -42,7 +42,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ### Basic ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android -import React, { useState, useEffect } from "react"; +import React, { useEffect } from "react"; import { Alert, Animated, @@ -51,6 +51,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from "react-native"; const instructions = Platform.select({ @@ -63,7 +64,7 @@ const instructions = Platform.select({ const useMount = func => useEffect(() => func(), []); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useMount(() => { diff --git a/website/versioned_docs/version-0.71/animated.md b/website/versioned_docs/version-0.71/animated.md index 9e010641df4..d15fd36cf6a 100644 --- a/website/versioned_docs/version-0.71/animated.md +++ b/website/versioned_docs/version-0.71/animated.md @@ -30,7 +30,7 @@ The following example contains a `View` which will fade in and fade out based on ```SnackPlayer name=Animated -import React, {useRef} from 'react'; +import React from 'react'; import { Animated, Text, @@ -38,11 +38,12 @@ import { StyleSheet, Button, SafeAreaView, + useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useRef(new Animated.Value(0)).current; + const fadeAnim = useAnimatedValue(0); const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds @@ -601,7 +602,7 @@ Stops any running animation and resets the value to its original. ### `Value` -Standard value class for driving animations. Typically initialized with `new Animated.Value(0);` +Standard value class for driving animations. Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. You can read more about `Animated.Value` API on the separate [page](animatedvalue). diff --git a/website/versioned_docs/version-0.71/animatedvalue.md b/website/versioned_docs/version-0.71/animatedvalue.md index f6caa7ba422..99bac62b86e 100644 --- a/website/versioned_docs/version-0.71/animatedvalue.md +++ b/website/versioned_docs/version-0.71/animatedvalue.md @@ -5,7 +5,7 @@ title: Animated.Value Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. -Typically initialized with `new Animated.Value(0);` +Typically initialized with `useAnimatedValue(0) or `new Animated.Value(0);` in class components. --- diff --git a/website/versioned_docs/version-0.71/animations.md b/website/versioned_docs/version-0.71/animations.md index c9bf85dce70..a6a424b3240 100644 --- a/website/versioned_docs/version-0.71/animations.md +++ b/website/versioned_docs/version-0.71/animations.md @@ -21,11 +21,11 @@ For example, a container view that fades in when it is mounted may look like thi ```SnackPlayer ext=js -import React, {useRef, useEffect} from 'react'; +import React, {useEffect, useAnimatedValue} from 'react'; import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,15 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; import type {PropsWithChildren} from 'react'; import type {ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -314,7 +314,7 @@ The following example implements a horizontal scrolling carousel where the scrol ```SnackPlayer name=Animated&supportedPlatforms=ios,android -import React, {useRef} from 'react'; +import React from 'react'; import { SafeAreaView, ScrollView, @@ -324,6 +324,7 @@ import { ImageBackground, Animated, useWindowDimensions, + useAnimatedValue, } from 'react-native'; const images = new Array(6).fill( @@ -331,7 +332,7 @@ const images = new Array(6).fill( ); const App = () => { - const scrollX = useRef(new Animated.Value(0)).current; + const scrollX = useAnimatedValue(0); const {width: windowWidth} = useWindowDimensions(); diff --git a/website/versioned_docs/version-0.71/easing.md b/website/versioned_docs/version-0.71/easing.md index b701ca5df13..ce94c5fc114 100644 --- a/website/versioned_docs/version-0.71/easing.md +++ b/website/versioned_docs/version-0.71/easing.md @@ -59,10 +59,11 @@ import { Text, TouchableOpacity, View, + useAnimatedValue, } from 'react-native'; const App = () => { - let opacity = new Animated.Value(0); + let opacity = useAnimatedValue(0); const animate = easing => { opacity.setValue(0); @@ -214,11 +215,12 @@ import { Text, TouchableOpacity, View, + useAnimatedValue, } from 'react-native'; import type {EasingFunction} from 'react-native'; const App = () => { - let opacity = new Animated.Value(0); + let opacity = useAnimatedValue(0); const animate = (easing: EasingFunction) => { opacity.setValue(0); diff --git a/website/versioned_docs/version-0.71/interactionmanager.md b/website/versioned_docs/version-0.71/interactionmanager.md index 20ffdd50fe8..2353145fe75 100644 --- a/website/versioned_docs/version-0.71/interactionmanager.md +++ b/website/versioned_docs/version-0.71/interactionmanager.md @@ -47,7 +47,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -56,6 +56,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -66,7 +67,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { @@ -126,7 +127,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -135,6 +136,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -145,7 +147,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { diff --git a/website/versioned_docs/version-0.72/animated.md b/website/versioned_docs/version-0.72/animated.md index 0fe745664ed..86c5a19bb36 100644 --- a/website/versioned_docs/version-0.72/animated.md +++ b/website/versioned_docs/version-0.72/animated.md @@ -14,7 +14,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` ```SnackPlayer name=Animated -import React, {useRef} from 'react'; +import React from 'react'; import { Animated, Text, @@ -22,11 +22,12 @@ import { StyleSheet, Button, SafeAreaView, + useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useRef(new Animated.Value(0)).current; + const fadeAnim = useAnimatedValue(0); const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds @@ -499,7 +500,7 @@ Stops any running animation and resets the value to its original. ### `Value` -Standard value class for driving animations. Typically initialized with `new Animated.Value(0);` +Standard value class for driving animations. Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. You can read more about `Animated.Value` API on the separate [page](animatedvalue). diff --git a/website/versioned_docs/version-0.72/animatedvalue.md b/website/versioned_docs/version-0.72/animatedvalue.md index f6caa7ba422..00990c42f2c 100644 --- a/website/versioned_docs/version-0.72/animatedvalue.md +++ b/website/versioned_docs/version-0.72/animatedvalue.md @@ -5,7 +5,7 @@ title: Animated.Value Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. -Typically initialized with `new Animated.Value(0);` +Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. --- diff --git a/website/versioned_docs/version-0.72/animations.md b/website/versioned_docs/version-0.72/animations.md index 086c27e881d..af79765750f 100644 --- a/website/versioned_docs/version-0.72/animations.md +++ b/website/versioned_docs/version-0.72/animations.md @@ -21,11 +21,11 @@ For example, a container view that fades in when it is mounted may look like thi ```SnackPlayer ext=js -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; const FadeInView = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,15 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; import type {PropsWithChildren} from 'react'; import type {ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -321,6 +321,7 @@ import { ImageBackground, Animated, useWindowDimensions, + useAnimatedValue, } from 'react-native'; const images = new Array(6).fill( @@ -328,7 +329,7 @@ const images = new Array(6).fill( ); const App = () => { - const scrollX = useRef(new Animated.Value(0)).current; + const scrollX = useAnimatedValue(0); const {width: windowWidth} = useWindowDimensions(); diff --git a/website/versioned_docs/version-0.72/interactionmanager.md b/website/versioned_docs/version-0.72/interactionmanager.md index 1d799ec5eac..a0bf4272182 100644 --- a/website/versioned_docs/version-0.72/interactionmanager.md +++ b/website/versioned_docs/version-0.72/interactionmanager.md @@ -47,7 +47,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -56,6 +56,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -66,7 +67,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { @@ -126,7 +127,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -135,6 +136,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -145,7 +147,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { diff --git a/website/versioned_docs/version-0.73/animated.md b/website/versioned_docs/version-0.73/animated.md index fcf94c7801c..5fdc5a841d7 100644 --- a/website/versioned_docs/version-0.73/animated.md +++ b/website/versioned_docs/version-0.73/animated.md @@ -14,7 +14,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` ```SnackPlayer name=Animated -import React, {useRef} from 'react'; +import React from 'react'; import { Animated, Text, @@ -22,11 +22,12 @@ import { StyleSheet, Button, SafeAreaView, + useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useRef(new Animated.Value(0)).current; + const fadeAnim = useAnimatedValue(0); const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds @@ -499,7 +500,7 @@ Stops any running animation and resets the value to its original. ### `Value` -Standard value class for driving animations. Typically initialized with `new Animated.Value(0);` +Standard value class for driving animations. Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. You can read more about `Animated.Value` API on the separate [page](animatedvalue). diff --git a/website/versioned_docs/version-0.73/animatedvalue.md b/website/versioned_docs/version-0.73/animatedvalue.md index f6caa7ba422..00990c42f2c 100644 --- a/website/versioned_docs/version-0.73/animatedvalue.md +++ b/website/versioned_docs/version-0.73/animatedvalue.md @@ -5,7 +5,7 @@ title: Animated.Value Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. -Typically initialized with `new Animated.Value(0);` +Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. --- diff --git a/website/versioned_docs/version-0.73/animations.md b/website/versioned_docs/version-0.73/animations.md index 086c27e881d..a79ea43f985 100644 --- a/website/versioned_docs/version-0.73/animations.md +++ b/website/versioned_docs/version-0.73/animations.md @@ -21,11 +21,11 @@ For example, a container view that fades in when it is mounted may look like thi ```SnackPlayer ext=js -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; const FadeInView = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,15 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; import type {PropsWithChildren} from 'react'; import type {ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -311,7 +311,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example ```SnackPlayer name=Animated&supportedPlatforms=ios,android -import React, {useRef} from 'react'; +import React from 'react'; import { SafeAreaView, ScrollView, @@ -321,6 +321,7 @@ import { ImageBackground, Animated, useWindowDimensions, + useAnimatedValue, } from 'react-native'; const images = new Array(6).fill( @@ -328,7 +329,7 @@ const images = new Array(6).fill( ); const App = () => { - const scrollX = useRef(new Animated.Value(0)).current; + const scrollX = useAnimatedValue(0); const {width: windowWidth} = useWindowDimensions(); diff --git a/website/versioned_docs/version-0.73/interactionmanager.md b/website/versioned_docs/version-0.73/interactionmanager.md index 1d799ec5eac..a0bf4272182 100644 --- a/website/versioned_docs/version-0.73/interactionmanager.md +++ b/website/versioned_docs/version-0.73/interactionmanager.md @@ -47,7 +47,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -56,6 +56,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -66,7 +67,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { @@ -126,7 +127,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -135,6 +136,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -145,7 +147,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { diff --git a/website/versioned_docs/version-0.73/transforms.md b/website/versioned_docs/version-0.73/transforms.md index 07295b70bf7..b41cd8c0471 100644 --- a/website/versioned_docs/version-0.73/transforms.md +++ b/website/versioned_docs/version-0.73/transforms.md @@ -209,11 +209,11 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin -import React, {useRef, useEffect} from 'react'; -import {Animated, View, StyleSheet, SafeAreaView, Easing} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, View, StyleSheet, SafeAreaView, Easing, useAnimatedValue} from 'react-native'; const App = () => { - const rotateAnim = useRef(new Animated.Value(0)).current; + const rotateAnim = useAnimatedValue(0); useEffect(() => { Animated.loop( diff --git a/website/versioned_docs/version-0.74/animated.md b/website/versioned_docs/version-0.74/animated.md index fcf94c7801c..5fdc5a841d7 100644 --- a/website/versioned_docs/version-0.74/animated.md +++ b/website/versioned_docs/version-0.74/animated.md @@ -14,7 +14,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` ```SnackPlayer name=Animated -import React, {useRef} from 'react'; +import React from 'react'; import { Animated, Text, @@ -22,11 +22,12 @@ import { StyleSheet, Button, SafeAreaView, + useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useRef(new Animated.Value(0)).current; + const fadeAnim = useAnimatedValue(0); const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds @@ -499,7 +500,7 @@ Stops any running animation and resets the value to its original. ### `Value` -Standard value class for driving animations. Typically initialized with `new Animated.Value(0);` +Standard value class for driving animations. Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. You can read more about `Animated.Value` API on the separate [page](animatedvalue). diff --git a/website/versioned_docs/version-0.74/animatedvalue.md b/website/versioned_docs/version-0.74/animatedvalue.md index f6caa7ba422..00990c42f2c 100644 --- a/website/versioned_docs/version-0.74/animatedvalue.md +++ b/website/versioned_docs/version-0.74/animatedvalue.md @@ -5,7 +5,7 @@ title: Animated.Value Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. -Typically initialized with `new Animated.Value(0);` +Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. --- diff --git a/website/versioned_docs/version-0.74/animations.md b/website/versioned_docs/version-0.74/animations.md index 30ff5297bfb..5dd052865b1 100644 --- a/website/versioned_docs/version-0.74/animations.md +++ b/website/versioned_docs/version-0.74/animations.md @@ -21,11 +21,11 @@ For example, a container view that fades in when it is mounted may look like thi ```SnackPlayer ext=js -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; const FadeInView = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,15 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; import type {PropsWithChildren} from 'react'; import type {ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -311,7 +311,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example ```SnackPlayer name=Animated&supportedPlatforms=ios,android -import React, {useRef} from 'react'; +import React from 'react'; import { SafeAreaView, ScrollView, @@ -321,6 +321,7 @@ import { ImageBackground, Animated, useWindowDimensions, + useAnimatedValue, } from 'react-native'; const images = new Array(6).fill( @@ -328,7 +329,7 @@ const images = new Array(6).fill( ); const App = () => { - const scrollX = useRef(new Animated.Value(0)).current; + const scrollX = useAnimatedValue(0); const {width: windowWidth} = useWindowDimensions(); diff --git a/website/versioned_docs/version-0.74/interactionmanager.md b/website/versioned_docs/version-0.74/interactionmanager.md index 1d799ec5eac..a0bf4272182 100644 --- a/website/versioned_docs/version-0.74/interactionmanager.md +++ b/website/versioned_docs/version-0.74/interactionmanager.md @@ -47,7 +47,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -56,6 +56,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -66,7 +67,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { @@ -126,7 +127,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -135,6 +136,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -145,7 +147,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { diff --git a/website/versioned_docs/version-0.74/transforms.md b/website/versioned_docs/version-0.74/transforms.md index 07295b70bf7..b41cd8c0471 100644 --- a/website/versioned_docs/version-0.74/transforms.md +++ b/website/versioned_docs/version-0.74/transforms.md @@ -209,11 +209,11 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin -import React, {useRef, useEffect} from 'react'; -import {Animated, View, StyleSheet, SafeAreaView, Easing} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, View, StyleSheet, SafeAreaView, Easing, useAnimatedValue} from 'react-native'; const App = () => { - const rotateAnim = useRef(new Animated.Value(0)).current; + const rotateAnim = useAnimatedValue(0); useEffect(() => { Animated.loop( diff --git a/website/versioned_docs/version-0.75/animated.md b/website/versioned_docs/version-0.75/animated.md index fcf94c7801c..528f0895540 100644 --- a/website/versioned_docs/version-0.75/animated.md +++ b/website/versioned_docs/version-0.75/animated.md @@ -14,7 +14,7 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim` ```SnackPlayer name=Animated -import React, {useRef} from 'react'; +import React from 'react'; import { Animated, Text, @@ -22,11 +22,12 @@ import { StyleSheet, Button, SafeAreaView, + useAnimatedValue(0), } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useRef(new Animated.Value(0)).current; + const fadeAnim = useAnimatedValue(0); const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds @@ -499,7 +500,7 @@ Stops any running animation and resets the value to its original. ### `Value` -Standard value class for driving animations. Typically initialized with `new Animated.Value(0);` +Standard value class for driving animations. Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components. You can read more about `Animated.Value` API on the separate [page](animatedvalue). diff --git a/website/versioned_docs/version-0.75/animatedvalue.md b/website/versioned_docs/version-0.75/animatedvalue.md index f6caa7ba422..d7950c1c531 100644 --- a/website/versioned_docs/version-0.75/animatedvalue.md +++ b/website/versioned_docs/version-0.75/animatedvalue.md @@ -5,7 +5,7 @@ title: Animated.Value Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. -Typically initialized with `new Animated.Value(0);` +Typically initialized with `useAnimatedValue(0)` or `new Animated.Value(0);` in class components.` --- diff --git a/website/versioned_docs/version-0.75/animations.md b/website/versioned_docs/version-0.75/animations.md index 30ff5297bfb..5dd052865b1 100644 --- a/website/versioned_docs/version-0.75/animations.md +++ b/website/versioned_docs/version-0.75/animations.md @@ -21,11 +21,11 @@ For example, a container view that fades in when it is mounted may look like thi ```SnackPlayer ext=js -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; const FadeInView = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,15 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useRef, useEffect} from 'react'; -import {Animated, Text, View} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, Text, View, useAnimatedValue} from 'react-native'; import type {PropsWithChildren} from 'react'; import type {ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 + const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -311,7 +311,7 @@ The following example implements a horizontal scrolling carousel where the scrol #### ScrollView with Animated Event Example ```SnackPlayer name=Animated&supportedPlatforms=ios,android -import React, {useRef} from 'react'; +import React from 'react'; import { SafeAreaView, ScrollView, @@ -321,6 +321,7 @@ import { ImageBackground, Animated, useWindowDimensions, + useAnimatedValue, } from 'react-native'; const images = new Array(6).fill( @@ -328,7 +329,7 @@ const images = new Array(6).fill( ); const App = () => { - const scrollX = useRef(new Animated.Value(0)).current; + const scrollX = useAnimatedValue(0); const {width: windowWidth} = useWindowDimensions(); diff --git a/website/versioned_docs/version-0.75/interactionmanager.md b/website/versioned_docs/version-0.75/interactionmanager.md index 1d799ec5eac..a0bf4272182 100644 --- a/website/versioned_docs/version-0.75/interactionmanager.md +++ b/website/versioned_docs/version-0.75/interactionmanager.md @@ -47,7 +47,7 @@ By default, queued tasks are executed together in a loop in one `setImmediate` b ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=js -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -56,6 +56,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -66,7 +67,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { @@ -126,7 +127,7 @@ export default App; ```SnackPlayer name=InteractionManager%20Function%20Component%20Basic%20Example&supportedPlatforms=ios,android&ext=tsx -import React, {useState, useEffect} from 'react'; +import React, {useEffect} from 'react'; import { Alert, Animated, @@ -135,6 +136,7 @@ import { StyleSheet, Text, View, + useAnimatedValue, } from 'react-native'; const instructions = Platform.select({ @@ -145,7 +147,7 @@ const instructions = Platform.select({ }); const useFadeIn = (duration = 5000) => { - const [opacity] = useState(new Animated.Value(0)); + const opacity = useAnimatedValue(0); // Running the animation when the component is mounted useEffect(() => { diff --git a/website/versioned_docs/version-0.75/transforms.md b/website/versioned_docs/version-0.75/transforms.md index 07295b70bf7..b41cd8c0471 100644 --- a/website/versioned_docs/version-0.75/transforms.md +++ b/website/versioned_docs/version-0.75/transforms.md @@ -209,11 +209,11 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin -import React, {useRef, useEffect} from 'react'; -import {Animated, View, StyleSheet, SafeAreaView, Easing} from 'react-native'; +import React, {useEffect} from 'react'; +import {Animated, View, StyleSheet, SafeAreaView, Easing, useAnimatedValue} from 'react-native'; const App = () => { - const rotateAnim = useRef(new Animated.Value(0)).current; + const rotateAnim = useAnimatedValue(0); useEffect(() => { Animated.loop( diff --git a/yarn.lock b/yarn.lock index 46e0ccd8869..52ba7bc4410 100644 --- a/yarn.lock +++ b/yarn.lock @@ -311,7 +311,7 @@ lodash.debounce "^4.0.8" resolve "^1.14.2" -"@babel/helper-member-expression-to-functions@^7.24.8", "@babel/helper-member-expression-to-functions@^7.25.7": +"@babel/helper-member-expression-to-functions@^7.25.7": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.7.tgz#541a33b071f0355a63a0fa4bdf9ac360116b8574" integrity sha512-O31Ssjd5K6lPbTX9AAYpSKrZmLeagt9uwschJd+Ixo6QiRyfpvgtVQp8qrDR9UNFjZ8+DO34ZkdrN+BnPXemeA== @@ -337,7 +337,7 @@ "@babel/helper-validator-identifier" "^7.25.7" "@babel/traverse" "^7.25.7" -"@babel/helper-optimise-call-expression@^7.24.7", "@babel/helper-optimise-call-expression@^7.25.7": +"@babel/helper-optimise-call-expression@^7.25.7": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.7.tgz#1de1b99688e987af723eed44fa7fc0ee7b97d77a" integrity sha512-VAwcwuYhv/AT+Vfr28c9y6SHzTan1ryqrydSTFGjU0uDJHw3uZ+PduI8plCLkRsDnqK2DMEDmwrOQRsK/Ykjng== @@ -388,12 +388,12 @@ "@babel/traverse" "^7.25.7" "@babel/types" "^7.25.7" -"@babel/helper-string-parser@^7.24.8", "@babel/helper-string-parser@^7.25.7": +"@babel/helper-string-parser@^7.25.7": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz#d50e8d37b1176207b4fe9acedec386c565a44a54" integrity sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g== -"@babel/helper-validator-identifier@^7.24.7", "@babel/helper-validator-identifier@^7.25.7": +"@babel/helper-validator-identifier@^7.25.7": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz#77b7f60c40b15c97df735b38a66ba1d7c3e93da5" integrity sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg== @@ -420,7 +420,7 @@ "@babel/template" "^7.25.0" "@babel/types" "^7.25.0" -"@babel/highlight@^7.24.7", "@babel/highlight@^7.25.7": +"@babel/highlight@^7.25.7": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.25.7.tgz#20383b5f442aa606e7b5e3043b0b1aafe9f37de5" integrity sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw== @@ -1311,11 +1311,6 @@ pirates "^4.0.5" source-map-support "^0.5.16" -"@babel/regjsgen@^0.8.0": - version "0.8.0" - resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" - integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== - "@babel/runtime-corejs3@^7.22.6": version "7.22.10" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.22.10.tgz#5ecc3d32faa70009f084cc2e087d79e5f5cdcca9" @@ -1353,7 +1348,7 @@ debug "^4.3.1" globals "^11.1.0" -"@babel/traverse@^7.12.9", "@babel/traverse@^7.22.8", "@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0", "@babel/traverse@^7.25.1", "@babel/traverse@^7.25.2", "@babel/traverse@^7.25.3", "@babel/traverse@^7.25.4", "@babel/traverse@^7.25.7", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4": +"@babel/traverse@^7.12.9", "@babel/traverse@^7.22.8", "@babel/traverse@^7.25.0", "@babel/traverse@^7.25.1", "@babel/traverse@^7.25.2", "@babel/traverse@^7.25.3", "@babel/traverse@^7.25.4", "@babel/traverse@^7.25.7", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.7.tgz#83e367619be1cab8e4f2892ef30ba04c26a40fa8" integrity sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg== @@ -1366,7 +1361,7 @@ debug "^4.3.1" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.12.7", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.25.7", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0": +"@babel/types@^7.0.0", "@babel/types@^7.12.7", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.25.7", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0": version "7.25.7" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.7.tgz#1b7725c1d3a59f328cb700ce704c46371e6eef9b" integrity sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ== @@ -8520,21 +8515,11 @@ jscodeshift@^0.14.0: temp "^0.8.4" write-file-atomic "^2.3.0" -jsesc@^2.5.1: - version "2.5.2" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" - integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== - jsesc@^3.0.2, jsesc@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e" integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g== -jsesc@~0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" - integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA== - json-buffer@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898" @@ -12252,7 +12237,7 @@ redent@^4.0.0: indent-string "^5.0.0" strip-indent "^4.0.0" -regenerate-unicode-properties@^10.1.0, regenerate-unicode-properties@^10.2.0: +regenerate-unicode-properties@^10.2.0: version "10.2.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0" integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA== @@ -12290,18 +12275,6 @@ regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0, regexp.prototype.f define-properties "^1.2.0" set-function-name "^2.0.0" -regexpu-core@^5.3.1: - version "5.3.2" - resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b" - integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ== - dependencies: - "@babel/regjsgen" "^0.8.0" - regenerate "^1.4.2" - regenerate-unicode-properties "^10.1.0" - regjsparser "^0.9.1" - unicode-match-property-ecmascript "^2.0.0" - unicode-match-property-value-ecmascript "^2.1.0" - regexpu-core@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.1.1.tgz#b469b245594cb2d088ceebc6369dceb8c00becac" @@ -12340,13 +12313,6 @@ regjsparser@^0.11.0: dependencies: jsesc "~3.0.2" -regjsparser@^0.9.1: - version "0.9.1" - resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709" - integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ== - dependencies: - jsesc "~0.5.0" - rehype-parse@^8.0.0: version "8.0.4" resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-8.0.4.tgz#3d17c9ff16ddfef6bbcc8e6a25a99467b482d688"