From e16ffb1f1816dd1b4f70f85c79b0c2b315ad17bd Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@meta.com>
Date: Thu, 12 Feb 2026 09:46:55 -0800
Subject: [PATCH 1/2] [docs] Replace useRef with useAnimatedValue in Animated
 example

The example was reading ref.current during render, which violates
React's rules for refs. Use useAnimatedValue instead, which is the
hook React Native provides for this use case.
---
 docs/animated.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/animated.md b/docs/animated.md
index a3039215ca1..19668c21ff4 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -16,13 +16,13 @@ Don't modify the animated value directly. You can use the [`useRef` Hook](https:
 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 React from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import {Animated, Text, View, StyleSheet, Button} from 'react-native';
+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

From 5dfdd968c4f83a5c0955e8fe50f6c9fc87636638 Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@meta.com>
Date: Thu, 12 Feb 2026 10:01:52 -0800
Subject: [PATCH 2/2] Fix prettier lint: break long import across multiple
 lines

---
 docs/animated.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/animated.md b/docs/animated.md
index 19668c21ff4..d4ba867028b 100644
--- a/docs/animated.md
+++ b/docs/animated.md
@@ -18,7 +18,14 @@ The following example contains a `View` which will fade in and fade out based on
 ```SnackPlayer name=Animated%20Example
 import React from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
-import {Animated, Text, View, StyleSheet, Button, useAnimatedValue} from 'react-native';
+import {
+  Animated,
+  Text,
+  View,
+  StyleSheet,
+  Button,
+  useAnimatedValue,
+} from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0