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"