/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, {Node, useEffect, useState} from 'react';
import {Animated, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
height: 100,
width: 100,
},
});
const App: () => Node = () => {
const [animation, setAnimation] = useState(new Animated.Value(0));
useEffect(() => {
Animated.timing(animation, {
toValue: 1,
duration: 5000,
useNativeDriver: false,
}).start();
}, []);
const bgStyle = {
backgroundColor: animation.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(255,99,71, 1)', 'rgba(255,99,71, 0)'],
}),
};
const boxStyle = {
backgroundColor: animation.interpolate({
inputRange: [0, 1],
outputRange: ['rgb(99,71,255)', 'rgb(255,99,71)'],
}),
};
return (
<Animated.View style={[styles.container, bgStyle]}>
<Animated.View style={[styles.box, boxStyle]} />
</Animated.View>
);
};
export default App;