Opacity style is used to control visibility of a particular component in react native. In this tutorial we would make a simple box using TouchableWithoutFeedback component and change the opacity using animated value. We would call a function on TouchableWithoutFeedback onPress event and start the animation for a particular defined time. So in this tutorial we would create Fade In Fade Out Opacity Animation in React Native Android iOS Example.
Contents in this project React Native Fade In Fade Out Opacity Animation Android iOS Example:
1. Import StyleSheet, View, TouchableWithoutFeedback and Animated component in your app’s App.js file.
|
1
2
|
import React, {Component} from ‘react’;
import { StyleSheet, View, TouchableWithoutFeedback, Animated } from ‘react-native’;
|
2. Create our main Export default class named as HomeScreen extends with Component.
|
1
2
3
4
|
export default class HomeScreen extends Component {
}
|
3. Create constructor() in your HomeScreen class and make a State named as animation. We would also define it some default value as 1. This will be our opacity default value which is 1 so the box component will display on screen.
|
1
2
3
4
5
6
|
constructor(){
super();
this.state={
animation : new Animated.Value(1),
}
}
|
4. Create a function named as startAnimation(). We are calling Animated.timing() function with animation state value and set the animation starting value to Zero and set the animation timing to 400 milliseconds. We would again call the Animated.timing() function because the First call would set opacity to 0 and box will no be visible. So we have to again set the toValue to 1 using animation so box will be visible again.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
startAnimation=()=>{
Animated.timing(this.state.animation, {
toValue : 0,
timing : 400
}).start(()=>{
Animated.timing(this.state.animation,{
toValue : 1,
duration : 400
}).start();
})
}
|
5. Create a constant in render’s block. Using this const we will set opacity style named as animated Style.
|
1
2
3
|
const animatedStyle ={
opacity : this.state.animation
}
|
6. Create TouchableWithoutFeedback component with Animated.View component in render’s return block.
- onPress : Call our start animation function on onPress event.
- Animated.View : Used to create Animated Views.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render() {
const animatedStyle ={
opacity : this.state.animation
}
return (
<View style={styles.MainContainer}>
<TouchableWithoutFeedback onPress={this.startAnimation}>
<Animated.View style={[styles.animatedBox, animatedStyle]} />
</TouchableWithoutFeedback>
</View>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems : ‘center’,
padding: 11
},
animatedBox:
{
width : 200,
height: 200,
backgroundColor : ‘#FF1744’
},
});
|
8. Complete Source Code for App.js file class.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import React, {Component} from ‘react’;
import { StyleSheet, View, TouchableWithoutFeedback, Animated } from ‘react-native’;
export default class HomeScreen extends Component {
constructor(){
super();
this.state={
animation : new Animated.Value(1),
}
}
startAnimation=()=>{
Animated.timing(this.state.animation, {
toValue : 0,
timing : 400
}).start(()=>{
Animated.timing(this.state.animation,{
toValue : 1,
duration : 400
}).start();
})
}
render() {
const animatedStyle ={
opacity : this.state.animation
}
return (
<View style={styles.MainContainer}>
<TouchableWithoutFeedback onPress={this.startAnimation}>
<Animated.View style={[styles.animatedBox, animatedStyle]} />
</TouchableWithoutFeedback>
</View>
);
}
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems : ‘center’,
padding: 11
},
animatedBox:
{
width : 200,
height: 200,
backgroundColor : ‘#FF1744’
},
});
|
Screenshot:
Also Read :
React Native flexDirection Row Column Explained iOS Android example
React Native open website URL in default browser iOS Android Example
React Native Get Clicked Position of Touch Screen Coordinates using PanResponder iOS Android Tutorial
React Native Add Show Dollar Rupees Euro Pound Currency Symbols in iOS Android
Dynamically Change React Navigation Header Title Text StackNavigator
