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
-
- Hello World
-
+
+ The
+ quick
+ brown
+ fox
+ jumps over the lazy dog
+