diff --git a/packages/rn-tester/js/examples/Animated/AnimatedIndex.js b/packages/rn-tester/js/examples/Animated/AnimatedIndex.js index f12795a2b3..dbe87a8248 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 0000000000..7fa9577da1 --- /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);