React Native Transform and Rotate Animation With Interpolate

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;