React Native Change Background Color Using Animation in Android iOS

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.

2. Create constructor() in your project and define the Animation Value usingĀ 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.

5. Call theĀ StartBackgroundColorAnimation() function inĀ componentDidMount() method. So it will start the background color changing animation at application start time automatically.

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.

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.

8. Create style for Animated View and Text component.

9. Complete source code forĀ App.jsĀ File :

Screenshot in Android device :

Change Background Color Using Animation

Screenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *