1/**
2 * Sample React Native App
3 * https://github.com/facebook/react-native
4 *
5 * @format
6 * @flow strict-local
7 */
8
9import React, {Node, useEffect, useState} from 'react';
10import {Animated, StyleSheet} from 'react-native';
11
12const styles = StyleSheet.create({
13  container: {
14    flex: 1,
15    alignItems: 'center',
16    justifyContent: 'center',
17  },
18  box: {
19    height: 100,
20    width: 100,
21  },
22});
23
24const App: () => Node = () => {
25  const [animation, setAnimation] = useState(new Animated.Value(0));
26
27  useEffect(() => {
28    Animated.timing(animation, {
29      toValue: 1,
30      duration: 5000,
31      useNativeDriver: false,
32    }).start();
33  }, []);
34
35  const bgStyle = {
36    backgroundColor: animation.interpolate({
37      inputRange: [0, 1],
38      outputRange: ['rgba(255,99,71, 1)', 'rgba(255,99,71, 0)'],
39    }),
40  };
41  const boxStyle = {
42    backgroundColor: animation.interpolate({
43      inputRange: [0, 1],
44      outputRange: ['rgb(99,71,255)', 'rgb(255,99,71)'],
45    }),
46  };
47
48  return (
49    <Animated.View style={[styles.container, bgStyle]}>
50      <Animated.View style={[styles.box, boxStyle]} />
51    </Animated.View>
52  );
53};
54
55export default App;