In this tutorial you will learn about
1. Transform
2. Rotate
3. Interpolate
import React, { useRef } from 'react';
import {View, StyleSheet, TouchableOpacity, Text, Animated} from 'react-native';
function FadeImage(props) {
const fadeAnim = useRef(new Animated.Value(0)).current;
const handlePress=()=>{
Animated.timing(fadeAnim, {
toValue:1,
duration:5000,
useNativeDriver:true,
}).start();
}
return (
<View style={styles.container}>
<Animated.View style={{opacity:fadeAnim,
transform:[
{translateY:fadeAnim.interpolate({
inputRange:[0,1],
outputRange:[0,-300]
})},
{rotate:fadeAnim.interpolate({
inputRange:[0, 1],
outputRange:["0deg", "360deg"]
})}
]
}}>
<View style={styles.anim}>
<Text style={styles.text}>
FadeView
</Text>
</View>
</Animated.View>
<TouchableOpacity style={styles.button} onPress={handlePress}>
<Text style={styles.text}>
Press
</Text>
</TouchableOpacity>
</View>
);
}
const styles=StyleSheet.create({
anim:{
backgroundColor:"tomato",
width:200,
padding:15,
borderRadius:15,
},
button:{
backgroundColor:"#4ecdc4",
width:100,
borderRadius:15,
padding:15,
margin:5,
},
container:{
flex:1,
justifyContent:"center",
alignItems:"center",
},
text:{
fontSize:18,
fontFamily:"Avenir",
fontWeight:"600",
color:"white",
textAlign:"center"
}
});
export default FadeImage;