From 617c156ba500ba72434bc3b8b2530f06549e211b Mon Sep 17 00:00:00 2001 From: Dhruv Date: Fri, 11 Jul 2025 12:44:47 +0100 Subject: [PATCH 1/3] fix(animations): update FadeInView example to use Animated.Value --- docs/animations.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/animations.md b/docs/animations.md index d07e9c7bf8f..bf789fe3b9b 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -22,10 +22,10 @@ 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'; +import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = new Animated.Value(0); // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { From b3b2b53ea64c11ca7c44ddbac9f1f58f566939fa Mon Sep 17 00:00:00 2001 From: Dhruv Date: Fri, 11 Jul 2025 13:08:53 +0100 Subject: [PATCH 2/3] Update animations.md --- docs/animations.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/animations.md b/docs/animations.md index bf789fe3b9b..5024b0c06c7 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&supportedPlatforms=ios,android -import React, {useEffect} from 'react'; +import React, {useRef, useEffect} from 'react'; import {Animated, Text, View} from 'react-native'; const FadeInView = props => { - const fadeAnim = new Animated.Value(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, { From 45fbad22a2d6a736d31d332240828572aee446e5 Mon Sep 17 00:00:00 2001 From: Dhruv Date: Fri, 11 Jul 2025 14:14:37 +0100 Subject: [PATCH 3/3] fix: mistakenly changed JS example instead of fixing TypeScript animation example Accidentally changed JS code snippet --- docs/animations.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/animations.md b/docs/animations.md index 5024b0c06c7..60193a47a9e 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&supportedPlatforms=ios,android -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, {useEffect} from 'react'; -import {Animated, Text, View, useAnimatedValue} from 'react-native'; +import React, {useRef, useEffect} from 'react'; +import {Animated, Text, View} 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 = useAnimatedValue(0); // Initial value for opacity: 0 + const fadeAnim = useRef(new Animated.Value(0)).current // Initial value for opacity: 0 useEffect(() => { Animated.timing(fadeAnim, {