In this tutorial, I will show you how to do basic fade animation in react native using Animation API. Let me explain step by step how we did it.
Use of useRef Hook
We used useRef hook instead of useState or useEffect hook because we don't render to happen every time we change the a variable.
When you use useRef to initialize a variable, this variable does not cause re-render of the react.
Animated.timing callback
We used Animated.timing callback which takes two parameters,
√ value
√ config
First one is the value variable which we will animate. In our case, it's the fadeAnim which is a ref variable.
Second one is the config variable. This config tells React animation library how to run the animation. Config is an object which takes few options for set up our animation.
We used toValue to tell react that, how much we should animate our value. Because we are dealing with opacity animation, opacity animation could react up to value 1 maximum.
We used duration to tell react that, how long we should run the animation. The default value of duration is 500 milliseconds. But we have set it to 5 seconds.
The complete Code
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}}>
<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;Few things to remember
1. Animated timing function takes two parameters. First one is the object or property that we want to animate.
2. The Second one tells React Native how to animate. First example toValue tells here to finish and how long to do the animation.
3. HandlePress is an onPress handler, which starts the animation. Of course, we can use useEffect() to reach the same goal, but only difference would be that the animation would start automatically after the initial render.
