From d82cd3cbce1597512bb2868fde49b5b3850892a0 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@fb.com>
Date: Tue, 12 Jul 2022 13:48:18 -0700
Subject: [PATCH] Add Nested Text Animated Color RNTester Example

Summary:
This change replaces the text in `ColorStylesExample` with two different spans of nested text, which requires special attention with the native driver.

Changelog:
[Internal][Added] - Add Nested Text Animated Color RNTester Example

Reviewed By: genkikondo

Differential Revision: D37762708

fbshipit-source-id: 755e6dd922432781645cd84749a77f29ec57665d
---
 .../examples/Animated/ColorStylesExample.js   | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/rn-tester/js/examples/Animated/ColorStylesExample.js b/packages/rn-tester/js/examples/Animated/ColorStylesExample.js
index 7fa9577da18..3da510586e4 100644
--- a/packages/rn-tester/js/examples/Animated/ColorStylesExample.js
+++ b/packages/rn-tester/js/examples/Animated/ColorStylesExample.js
@@ -10,7 +10,7 @@
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import * as React from 'react';
-import {Animated, View, StyleSheet} from 'react-native';
+import {Animated, View, StyleSheet, Text} from 'react-native';
 import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
 import RNTesterButton from '../../components/RNTesterButton';
 import ToggleNativeDriver from './utils/ToggleNativeDriver';
@@ -37,17 +37,28 @@ function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) {
     }),
   );
 
-  const animatedTextStyle = {
+  const animatedFirstSpanTextStyle = {
     color: new Animated.Color('blue'),
   };
   animations.push(
-    Animated.timing(animatedTextStyle.color, {
+    Animated.timing(animatedFirstSpanTextStyle.color, {
       toValue: new Animated.Color('red'),
       duration: 1000,
       useNativeDriver,
     }),
   );
 
+  const animatedSecondSpanTextStyle = {
+    color: new Animated.Color('orange'),
+  };
+  animations.push(
+    Animated.timing(animatedSecondSpanTextStyle.color, {
+      toValue: new Animated.Color('purple'),
+      duration: 1000,
+      useNativeDriver,
+    }),
+  );
+
   const animatedImageStyle = {
     tintColor: new Animated.Color('blue'),
   };
@@ -71,9 +82,13 @@ function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) {
         Press to animate
       </RNTesterButton>
       <Animated.View style={[styles.animatedView, animatedViewStyle]} />
-      <Animated.Text style={[styles.animatedText, animatedTextStyle]}>
-        Hello World
-      </Animated.Text>
+      <Text style={styles.animatedText}>
+        <Text>The </Text>
+        <Animated.Text style={animatedFirstSpanTextStyle}>quick</Animated.Text>
+        <Text> brown </Text>
+        <Animated.Text style={animatedSecondSpanTextStyle}>fox</Animated.Text>
+        <Text> jumps over the lazy dog</Text>
+      </Text>
       <Animated.Image
         style={[styles.animatedImage, animatedImageStyle]}
         source={require('../../assets/bunny.png')}