react-native-animated-colors

This library is to Animate Background Color of a View with native feel.

Note: Background color cannot be animated with useNativeDriver : true So, this will provide you the backgroundColor transition super smoothly.

Installation

npm i react-native-animated-colors

Usage

import AnimatedColorView from 'react-native-animated-colors';

Properties

name	description	type	default
colors	List of background colors	Array	[ ]
activeIndex	Active index of color to be displayed	Number	0
duration	Duration of animation on transition	Number	500
loop	Loop the background colors	Boolean	false

colors

Array of colors which need to be Animated.

eg: ['green', 'blue', 'red']

activeIndex

Pass the active index(of colors array) of color need to be displayed.

eg: if activeIndex is 0, set activeIndex value as 1. Then the background color will change from green => blue

duration

Duration of the animation.

loop

If true, will start looping the background color with the provided colors.

Example

import React, {useState} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';

import AnimatedColorView from 'react-native-animated-colors';

const Container = () => {
    const [activeIndex, setindex] = useState(0);
    return (
    <View style={styles.container}>

        <AnimatedColorView
        activeIndex={activeIndex}
        colors={['green', 'blue', 'red']}
        duration={1000}
        loop={false}
        style={styles.item}>
        <Text style={styles.text}>ASWIN C</Text>
        </AnimatedColorView>

        <View style={styles.btn}>
        <Button title="green" onPress={() => setindex(0)} />
        <Button title="blue" onPress={() => setindex(1)} />
        <Button title="red" onPress={() => setindex(2)} />
        </View>
    </View>
    );
};

const styles = StyleSheet.create({
    container: {flex: 1, alignItems: 'center', justifyContent: 'center'},
    item: {
    height: 200,
    width: 200,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 50,
    borderRadius: 10,
    },
    text: {
    color: '#fff',
    fontSize: 20,
    },
    btn: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    },
});

export default Container;

Copyright and License

ISC License

maherzaidoune / react-native-animated-colors