React Native Change Background Color of View Component Dynamically using Animation

This tutorial explains how to change background color of view component dynamically using animation in react native application. Here we are going to use Animated component of react-native package that provides very smooth transition, while changing background color dynamically.

React Native Change Background Color of View Component :

Lets follow the below steps that helps to change background color of view component dynamically using animation in react native application

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { AppRegistry, View, Animated, Text, StyleSheet, Platform } from 'react-native';

Step 4: Lets create constructor block inside your App component.

constructor() {
    super();

    this.Animation = new Animated.Value(0);
  }

Step 5: you need to implement componentDidMount  method.

  componentDidMount() {
    // If you want to Start the animation on button click then call this function on button onPress event.
    this.StartBackgroundColorAnimation();
  }

Step 6: Lets create StartBackgroundColorAnimation function that helps to change the background color parent view component.

  StartBackgroundColorAnimation = () => {
    this.Animation.setValue(0);

    Animated.timing(
      this.Animation,
      {
        toValue: 1,
        duration: 15000
      }
    ).start(() => { this.StartBackgroundColorAnimation() });
  }

Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component. 

render() {
    const BackgroundColorConfig = this.Animation.interpolate(
      {
        inputRange: [0, 0.2, 0.4, 0.6, 0.8, 1],
        outputRange: ['#e53935', '#8e24aa', '#2196f3', '#4caf50', '#ffc107', '#ff3d00']

      });
    return (
      <Animated.View style={[styles.container, { backgroundColor: BackgroundColorConfig }]}>
        <Text style={styles.headerText}>React Native Change background Color Using Animation</Text>
      </Animated.View>
    );
  }

Step 8: Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to  change background color of view component dynamically using animation in react native application.

import React, { Component } from 'react';
import { AppRegistry, View, Animated, Text, StyleSheet, 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: ['#e53935', '#8e24aa', '#2196f3', '#4caf50', '#ffc107', '#ff3d00']

      });
    return (
      <Animated.View style={[styles.container, { backgroundColor: BackgroundColorConfig }]}>
        <Text style={styles.headerText}>React Native Change background Color Using Animation</Text>
      </Animated.View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },
  });

Screenshot : 

This is all about React Native Change Background Color of View Component Dynamically using Animation. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.