React Native Animated Background Color View


React Native Animated Background Color View


A modified React Native View component that animates it’s backgroundColor when color prop changes. Works on iOS & Android.

React Native Animated Background Color View


npm install react-native-animated-background-color-view --save


Import AnimatedBackgroundColorView component

import { AnimatedBackgroundColorView } from 'react-native-animated-background-color-view';

Use as follows:

Each time the color prop value changes the backgroundColor will use the React Native timing animation to animate from the previous value to the current value.

Animate On Component Mount

You can also specifiy an initial color for the background color to animate from when the component mounts:

On mount the component backgroundColor will be blue and then animate to #00aced .

Using the children Prop

The AnimatedBackgroundColorView component works just like the standard React Native View component. AnimatedBackgroundColorView is designed to be nested inside other View components or other AnimatedBackgroundColorView components and can have 0 to many children of any type.

class AnimatedBackgroundColorViewWithText extends Component {
  render() {
    return (
        Hello, world!


You can configure AnimatedBackgroundColorView by passing the following props:

proptype/valid valuesdefaultdescription
colorstring '#00aced' the color value to which the component backgroundColor will animate
delaynumber 0 the length in milliseconds the component will wait before animating to the next color
durationnumber 2400the length in milliseconds the timing animation will last
easing React Native Easing function Easing.out(Easing.exp)the easing function to define animation curve
initialColorstring null the color value from which the component backgroundColor will animate on mount
style React Native nulladditional styles applied to the component


原文 : reactnativeexample