From c23355d31ac56e655accbc9147ce90180bcc4239 Mon Sep 17 00:00:00 2001 From: Simek Date: Mon, 11 Aug 2025 17:28:29 +0200 Subject: [PATCH] fix Animation examples - port changes to versioned docs --- .../versioned_docs/version-0.73/animations.md | 54 +++++++++---------- .../versioned_docs/version-0.74/animations.md | 54 +++++++++---------- .../versioned_docs/version-0.75/animations.md | 54 +++++++++---------- .../versioned_docs/version-0.76/animations.md | 54 +++++++++---------- .../versioned_docs/version-0.77/animated.md | 5 +- .../versioned_docs/version-0.77/animations.md | 54 +++++++++---------- website/versioned_docs/version-0.77/easing.md | 10 ++-- .../versioned_docs/version-0.77/transforms.md | 5 +- .../versioned_docs/version-0.78/animated.md | 5 +- .../versioned_docs/version-0.78/animations.md | 54 +++++++++---------- website/versioned_docs/version-0.78/easing.md | 10 ++-- .../versioned_docs/version-0.78/transforms.md | 5 +- .../versioned_docs/version-0.79/animated.md | 5 +- .../versioned_docs/version-0.79/animations.md | 54 +++++++++---------- website/versioned_docs/version-0.79/easing.md | 10 ++-- .../versioned_docs/version-0.79/transforms.md | 5 +- .../versioned_docs/version-0.80/animated.md | 5 +- .../versioned_docs/version-0.80/animations.md | 54 +++++++++---------- website/versioned_docs/version-0.80/easing.md | 10 ++-- .../versioned_docs/version-0.80/transforms.md | 5 +- 20 files changed, 232 insertions(+), 280 deletions(-) diff --git a/website/versioned_docs/version-0.73/animations.md b/website/versioned_docs/version-0.73/animations.md index 7065be643b9..f427800a83c 100644 --- a/website/versioned_docs/version-0.73/animations.md +++ b/website/versioned_docs/version-0.73/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -592,7 +590,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -607,32 +605,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.74/animations.md b/website/versioned_docs/version-0.74/animations.md index 552a62a6a82..8381c883d8d 100644 --- a/website/versioned_docs/version-0.74/animations.md +++ b/website/versioned_docs/version-0.74/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -591,7 +589,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -606,32 +604,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.75/animations.md b/website/versioned_docs/version-0.75/animations.md index 552a62a6a82..8381c883d8d 100644 --- a/website/versioned_docs/version-0.75/animations.md +++ b/website/versioned_docs/version-0.75/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -591,7 +589,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -606,32 +604,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.76/animations.md b/website/versioned_docs/version-0.76/animations.md index 4410f773bc5..3b3632035b7 100644 --- a/website/versioned_docs/version-0.76/animations.md +++ b/website/versioned_docs/version-0.76/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -595,7 +593,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -610,32 +608,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.77/animated.md b/website/versioned_docs/version-0.77/animated.md index dacbb306d79..bc8b57ecff9 100644 --- a/website/versioned_docs/version-0.77/animated.md +++ b/website/versioned_docs/version-0.77/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%20Example&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; import { Animated, @@ -22,12 +22,11 @@ import { View, StyleSheet, Button, - useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useAnimatedValue(0); + const fadeAnim = useRef(new Animated.Value(0)).current; const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds diff --git a/website/versioned_docs/version-0.77/animations.md b/website/versioned_docs/version-0.77/animations.md index d07e9c7bf8f..74cb7650287 100644 --- a/website/versioned_docs/version-0.77/animations.md +++ b/website/versioned_docs/version-0.77/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -595,7 +593,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -610,32 +608,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.77/easing.md b/website/versioned_docs/version-0.77/easing.md index 712595b4bac..9202bd6b550 100644 --- a/website/versioned_docs/version-0.77/easing.md +++ b/website/versioned_docs/version-0.77/easing.md @@ -49,7 +49,7 @@ The following helpers are used to modify other easing functions. ```SnackPlayer name=Easing%20Demo&ext=js&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -59,12 +59,11 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = easing => { opacity.setValue(0); @@ -210,7 +209,7 @@ export default App; ```SnackPlayer name=Easing%20Demo&ext=tsx -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -220,13 +219,12 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, type EasingFunction, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = (easing: EasingFunction) => { opacity.setValue(0); diff --git a/website/versioned_docs/version-0.77/transforms.md b/website/versioned_docs/version-0.77/transforms.md index 77e72bec67c..c1fc1fc04b6 100644 --- a/website/versioned_docs/version-0.77/transforms.md +++ b/website/versioned_docs/version-0.77/transforms.md @@ -212,18 +212,17 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; +import React, {useEffect, useRef} from 'react'; import { Animated, View, StyleSheet, Easing, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const rotateAnim = useAnimatedValue(0); + const rotateAnim = useRef(new Animated.Value(0)).current; useEffect(() => { Animated.loop( diff --git a/website/versioned_docs/version-0.78/animated.md b/website/versioned_docs/version-0.78/animated.md index dacbb306d79..bc8b57ecff9 100644 --- a/website/versioned_docs/version-0.78/animated.md +++ b/website/versioned_docs/version-0.78/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%20Example&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; import { Animated, @@ -22,12 +22,11 @@ import { View, StyleSheet, Button, - useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useAnimatedValue(0); + const fadeAnim = useRef(new Animated.Value(0)).current; const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds diff --git a/website/versioned_docs/version-0.78/animations.md b/website/versioned_docs/version-0.78/animations.md index d07e9c7bf8f..74cb7650287 100644 --- a/website/versioned_docs/version-0.78/animations.md +++ b/website/versioned_docs/version-0.78/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -595,7 +593,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -610,32 +608,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.78/easing.md b/website/versioned_docs/version-0.78/easing.md index 712595b4bac..9202bd6b550 100644 --- a/website/versioned_docs/version-0.78/easing.md +++ b/website/versioned_docs/version-0.78/easing.md @@ -49,7 +49,7 @@ The following helpers are used to modify other easing functions. ```SnackPlayer name=Easing%20Demo&ext=js&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -59,12 +59,11 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = easing => { opacity.setValue(0); @@ -210,7 +209,7 @@ export default App; ```SnackPlayer name=Easing%20Demo&ext=tsx -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -220,13 +219,12 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, type EasingFunction, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = (easing: EasingFunction) => { opacity.setValue(0); diff --git a/website/versioned_docs/version-0.78/transforms.md b/website/versioned_docs/version-0.78/transforms.md index 77e72bec67c..c1fc1fc04b6 100644 --- a/website/versioned_docs/version-0.78/transforms.md +++ b/website/versioned_docs/version-0.78/transforms.md @@ -212,18 +212,17 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; +import React, {useEffect, useRef} from 'react'; import { Animated, View, StyleSheet, Easing, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const rotateAnim = useAnimatedValue(0); + const rotateAnim = useRef(new Animated.Value(0)).current; useEffect(() => { Animated.loop( diff --git a/website/versioned_docs/version-0.79/animated.md b/website/versioned_docs/version-0.79/animated.md index dacbb306d79..bc8b57ecff9 100644 --- a/website/versioned_docs/version-0.79/animated.md +++ b/website/versioned_docs/version-0.79/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%20Example&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; import { Animated, @@ -22,12 +22,11 @@ import { View, StyleSheet, Button, - useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useAnimatedValue(0); + const fadeAnim = useRef(new Animated.Value(0)).current; const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds diff --git a/website/versioned_docs/version-0.79/animations.md b/website/versioned_docs/version-0.79/animations.md index d07e9c7bf8f..74cb7650287 100644 --- a/website/versioned_docs/version-0.79/animations.md +++ b/website/versioned_docs/version-0.79/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -595,7 +593,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -610,32 +608,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.79/easing.md b/website/versioned_docs/version-0.79/easing.md index 712595b4bac..9202bd6b550 100644 --- a/website/versioned_docs/version-0.79/easing.md +++ b/website/versioned_docs/version-0.79/easing.md @@ -49,7 +49,7 @@ The following helpers are used to modify other easing functions. ```SnackPlayer name=Easing%20Demo&ext=js&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -59,12 +59,11 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = easing => { opacity.setValue(0); @@ -210,7 +209,7 @@ export default App; ```SnackPlayer name=Easing%20Demo&ext=tsx -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -220,13 +219,12 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, type EasingFunction, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = (easing: EasingFunction) => { opacity.setValue(0); diff --git a/website/versioned_docs/version-0.79/transforms.md b/website/versioned_docs/version-0.79/transforms.md index 77e72bec67c..c1fc1fc04b6 100644 --- a/website/versioned_docs/version-0.79/transforms.md +++ b/website/versioned_docs/version-0.79/transforms.md @@ -212,18 +212,17 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; +import React, {useEffect, useRef} from 'react'; import { Animated, View, StyleSheet, Easing, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const rotateAnim = useAnimatedValue(0); + const rotateAnim = useRef(new Animated.Value(0)).current; useEffect(() => { Animated.loop( diff --git a/website/versioned_docs/version-0.80/animated.md b/website/versioned_docs/version-0.80/animated.md index dacbb306d79..bc8b57ecff9 100644 --- a/website/versioned_docs/version-0.80/animated.md +++ b/website/versioned_docs/version-0.80/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%20Example&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; import { Animated, @@ -22,12 +22,11 @@ import { View, StyleSheet, Button, - useAnimatedValue, } from 'react-native'; const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 - const fadeAnim = useAnimatedValue(0); + const fadeAnim = useRef(new Animated.Value(0)).current; const fadeIn = () => { // Will change fadeAnim value to 1 in 5 seconds diff --git a/website/versioned_docs/version-0.80/animations.md b/website/versioned_docs/version-0.80/animations.md index d07e9c7bf8f..74cb7650287 100644 --- a/website/versioned_docs/version-0.80/animations.md +++ b/website/versioned_docs/version-0.80/animations.md @@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi -```SnackPlayer ext=js&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +```SnackPlayer ext=js +import React, {useEffect, useRef} from 'react'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -74,15 +74,13 @@ export default () => { ```SnackPlayer ext=tsx -import React, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; -import type {PropsWithChildren} from 'react'; -import type {ViewStyle} from 'react-native'; +import React, {useEffect, useRef, type PropsWithChildren} from 'react'; +import {Animated, Text, View, type ViewStyle} from 'react-native'; type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>; const FadeInView: React.FC = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { @@ -595,7 +593,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true); ``` ```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android -import React from 'react'; +import React, {useState} from 'react'; import { NativeModules, LayoutAnimation, @@ -610,32 +608,30 @@ const {UIManager} = NativeModules; UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); -export default class App extends React.Component { - state = { +export default function App() { + const [state, setState] = useState({ w: 100, h: 100, - }; + }); - _onPress = () => { + const onPress = () => { // Animate the update LayoutAnimation.spring(); - this.setState({w: this.state.w + 15, h: this.state.h + 15}); + setState({w: state.w + 15, h: state.h + 15}); }; - render() { - return ( - - - - - Press me! - - - - ); - } + return ( + + + + + Press me! + + + + ); } const styles = StyleSheet.create({ diff --git a/website/versioned_docs/version-0.80/easing.md b/website/versioned_docs/version-0.80/easing.md index 712595b4bac..9202bd6b550 100644 --- a/website/versioned_docs/version-0.80/easing.md +++ b/website/versioned_docs/version-0.80/easing.md @@ -49,7 +49,7 @@ The following helpers are used to modify other easing functions. ```SnackPlayer name=Easing%20Demo&ext=js&supportedPlatforms=ios,android -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -59,12 +59,11 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = easing => { opacity.setValue(0); @@ -210,7 +209,7 @@ export default App; ```SnackPlayer name=Easing%20Demo&ext=tsx -import React from 'react'; +import React, {useRef} from 'react'; import { Animated, Easing, @@ -220,13 +219,12 @@ import { Text, TouchableOpacity, View, - useAnimatedValue, type EasingFunction, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const opacity = useAnimatedValue(0); + const opacity = useRef(new Animated.Value(0)).current; const animate = (easing: EasingFunction) => { opacity.setValue(0); diff --git a/website/versioned_docs/version-0.80/transforms.md b/website/versioned_docs/version-0.80/transforms.md index 77e72bec67c..c1fc1fc04b6 100644 --- a/website/versioned_docs/version-0.80/transforms.md +++ b/website/versioned_docs/version-0.80/transforms.md @@ -212,18 +212,17 @@ The `transformOrigin` property sets the origin for a view's transformations. The # Example ```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; +import React, {useEffect, useRef} from 'react'; import { Animated, View, StyleSheet, Easing, - useAnimatedValue, } from 'react-native'; import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context'; const App = () => { - const rotateAnim = useAnimatedValue(0); + const rotateAnim = useRef(new Animated.Value(0)).current; useEffect(() => { Animated.loop(