In this tutorial you will learn about React Native animation using the below concepts.
1. Transform
2. Rotate
3. Interpolate
The animation starts with Animated.timing().start() function. This function is shipped out of React native itself, so no extra library is needed.
Since we are doing animation using Animated.timing() makes more sense, because we are going to do time based animation. This function takes an argument for starting animation value. It's assigned in the useRef() by setting animation default initial value to 0.
Before the animation starts that's also our current value. This value is assigned using useRef() to fadeAnim variable. After that we pass this value to Animated.timing() along with other properties. This current value would start from 0 and reach up to 1, and total animation time is 5000 milliseconds which is five seconds, at the end we see start() which tells us to initiate the animation.
Doing this kind of animation is quite straightforward and simpler than Flutter.
So in React Native you just two two things for an animation to start. Create an useRef() object for animation to have an initial value and then use Animiated.timing().start() with object created from useRef().
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 (
FadeView
Press
);
}
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
