The root View component of react native application supports different type of animation. So in this tutorial we would going to create a react native application which Change Background Color Using Animation of View using the Animated react native component library. So let’s get started .
Note: We would use 5 different types of color in this application at 6th times and the 6th and 1st color should be same to reduce the sudden again animation start impact. So the animation will be much smoother without any jerky effect.
Contents in this project Change Background Color Using Animation in Both Android iOS Apps in React Native:
1. Import View, Text, StyleSheet, Animated and Platform component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { View, Text, StyleSheet, Animated, Platform } from ‘react-native’;
|
2. Create constructor() in your project and define the Animation Value using new Animated.Value(0).
|
1
2
3
4
5
6
|
constructor()
{
super();
this.Animation = new Animated.Value(0);
}
|
3. Create a function named as StartBackgroundColorAnimation(). Now we would define the animation value in this function using Animated.timing and set the animation duration from 0 to 15 seconds, So the animation will run for 15 seconds. We would also call the function itself recursively inside the start(() => { this.StartBackgroundColorAnimation() }) method. This would runs the animation itself at infinite time.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
StartBackgroundColorAnimation = () =>
{
this.Animation.setValue(0);
Animated.timing(
this.Animation,
{
toValue: 1,
duration: 15000
}
).start(() => { this.StartBackgroundColorAnimation() });
}
|
5. Call the StartBackgroundColorAnimation() function in componentDidMount() method. So it will start the background color changing animation at application start time automatically.
|
1
2
3
4
5
|
componentDidMount()
{
// If you want to Start the animation on button click then call this function on button onPress event.
this.StartBackgroundColorAnimation();
}
|
6. Create BackgroundColorConfig constant in render’s block and interpolate animation. We would define the 5 animation colors in this block using output range. We would divide the time into 6 segments with .2 margin. Now it will divide the defined time 15 seconds into 6 blocks and call the each defined color at some calculated time.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render()
{
const BackgroundColorConfig = this.Animation.interpolate(
{
inputRange: [ 0, 0.2, 0.4, 0.6, 0.8, 1 ],
outputRange: [ ‘#FFEB3B’, ‘#CDDC39’, ‘#009688’, ‘#03A9F4’, ‘#3F51B5’, ‘#FFEB3B’ ]
});
return(
);
}
|
7. Create the Animated View as Root Parent View in render’s return block and call the BackgroundColorConfig as background style. We would also call the custom style class named as MainContainer. Now finally we would create a Text component in animated view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
render()
{
const BackgroundColorConfig = this.Animation.interpolate(
{
inputRange: [ 0, 0.2, 0.4, 0.6, 0.8, 1 ],
outputRange: [ ‘#FFEB3B’, ‘#CDDC39’, ‘#009688’, ‘#03A9F4’, ‘#3F51B5’, ‘#FFEB3B’ ]
});
return(
<Animated.View style = {[ styles.MainContainer, { backgroundColor: BackgroundColorConfig } ]}>
{/* Put all your components Here Inside the Root Animated View. */}
<Text style = {styles.TextStyle}>React Native Change background Color Using Animation</Text>
</Animated.View>
);
}
|
8. Create style for Animated View and Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0
},
TextStyle: {
color: “#000”,
fontSize: 20,
textAlign: ‘center’
}
});
|
9. Complete source code for App.js File :
|
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
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import React, { Component } from ‘react’;
import { View, Text, StyleSheet, Animated, Platform } from ‘react-native’;
export default class App extends Component<{}>
{
constructor()
{
super();
this.Animation = new Animated.Value(0);
}
componentDidMount()
{
// If you want to Start the animation on button click then call this function on button onPress event.
this.StartBackgroundColorAnimation();
}
StartBackgroundColorAnimation = () =>
{
this.Animation.setValue(0);
Animated.timing(
this.Animation,
{
toValue: 1,
duration: 15000
}
).start(() => { this.StartBackgroundColorAnimation() });
}
render()
{
const BackgroundColorConfig = this.Animation.interpolate(
{
inputRange: [ 0, 0.2, 0.4, 0.6, 0.8, 1 ],
outputRange: [ ‘#FFEB3B’, ‘#CDDC39’, ‘#009688’, ‘#03A9F4’, ‘#3F51B5’, ‘#FFEB3B’ ]
});
return(
<Animated.View style = {[ styles.MainContainer, { backgroundColor: BackgroundColorConfig } ]}>
{/* Put all your components Here Inside the Root Animated View. */}
<Text style = {styles.TextStyle}>React Native Change background Color Using Animation</Text>
</Animated.View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
marginTop: (Platform.OS == ‘ios’) ? 20 : 0
},
TextStyle: {
color: “#000”,
fontSize: 20,
textAlign: ‘center’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Drawer Navigator with Custom Sidebar Menu with Icons Tutorial
React Native Create Disabled Button State Using TouchableOpacity
Wish You All a Very Very Happy New Year 2019
React Native Disable Remove All Yellow Warning Messages Box
React Native Collapsible Expandable Animated Header on ScrollView
