diff --git a/packages/rn-tester/js/examples/Animated/AnimatedIndex.js b/packages/rn-tester/js/examples/Animated/AnimatedIndex.js
index f12795a2b3db8c..dbe87a824826c8 100644
--- a/packages/rn-tester/js/examples/Animated/AnimatedIndex.js
+++ b/packages/rn-tester/js/examples/Animated/AnimatedIndex.js
@@ -19,6 +19,7 @@ import ComposeAnimationsWithEasingExample from './ComposeAnimationsWithEasingExa
import TransformBounceExample from './TransformBounceExample';
import ComposingExample from './ComposingExample';
import TransformStylesExample from './TransformStylesExample';
+import ColorStylesExample from './ColorStylesExample';
export default ({
framework: 'React',
@@ -31,6 +32,7 @@ export default ({
showIndividualExamples: true,
examples: [
TransformStylesExample,
+ ColorStylesExample,
FadeInViewExample,
ComposingExample,
EasingExample,
diff --git a/packages/rn-tester/js/examples/Animated/ColorStylesExample.js b/packages/rn-tester/js/examples/Animated/ColorStylesExample.js
new file mode 100644
index 00000000000000..7fa9577da1809d
--- /dev/null
+++ b/packages/rn-tester/js/examples/Animated/ColorStylesExample.js
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import * as React from 'react';
+import {Animated, View, StyleSheet} from 'react-native';
+import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
+import RNTesterButton from '../../components/RNTesterButton';
+import ToggleNativeDriver from './utils/ToggleNativeDriver';
+
+function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) {
+ const animations = [];
+
+ const animatedViewStyle = {
+ backgroundColor: new Animated.Color('blue'),
+ borderColor: new Animated.Color('orange'),
+ };
+ animations.push(
+ Animated.timing(animatedViewStyle.backgroundColor, {
+ toValue: new Animated.Color('red'),
+ duration: 1000,
+ useNativeDriver,
+ }),
+ );
+ animations.push(
+ Animated.timing(animatedViewStyle.borderColor, {
+ toValue: new Animated.Color('purple'),
+ duration: 1000,
+ useNativeDriver,
+ }),
+ );
+
+ const animatedTextStyle = {
+ color: new Animated.Color('blue'),
+ };
+ animations.push(
+ Animated.timing(animatedTextStyle.color, {
+ toValue: new Animated.Color('red'),
+ duration: 1000,
+ useNativeDriver,
+ }),
+ );
+
+ const animatedImageStyle = {
+ tintColor: new Animated.Color('blue'),
+ };
+ animations.push(
+ Animated.timing(animatedImageStyle.tintColor, {
+ toValue: new Animated.Color('red'),
+ duration: 1000,
+ useNativeDriver,
+ }),
+ );
+
+ const animation = Animated.parallel(animations);
+
+ return (
+ <>
+ {
+ animation.reset();
+ animation.start();
+ }}>
+ Press to animate
+
+
+
+ Hello World
+
+
+ >
+ );
+}
+
+function AnimatedColorStyleExample(): React.Node {
+ const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ animatedView: {
+ height: 100,
+ width: 100,
+ borderWidth: 10,
+ },
+ animatedText: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ },
+ animatedImage: {
+ height: 100,
+ width: 100,
+ },
+});
+
+export default ({
+ title: 'Color Styles',
+ name: 'colorStyles',
+ description: 'Animations of color styles.',
+ render: () => ,
+}: RNTesterModuleExample);