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 :
