Skip to content

Commit 335d95a

Browse files
committed
added README;
1 parent 5ecde14 commit 335d95a

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

README.md

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
[![GitHub issues](https://img.shields.io/github/issues/joeyschroeder/react-native-animated-background-color-view.svg)](https://github.com/joeyschroeder/react-native-animated-background-color-view/issues)
2+
[![GitHub forks](https://img.shields.io/github/forks/joeyschroeder/react-native-animated-background-color-view.svg)](https://github.com/joeyschroeder/react-native-animated-background-color-view/network)
3+
[![GitHub stars](https://img.shields.io/github/stars/joeyschroeder/react-native-animated-background-color-view.svg)](https://github.com/joeyschroeder/react-native-animated-background-color-view/stargazers)
4+
[![GitHub license](https://img.shields.io/github/license/joeyschroeder/react-native-animated-background-color-view.svg)](https://github.com/joeyschroeder/react-native-animated-background-color-view)
5+
6+
# React Native Animated Background Color View
7+
A modified React Native `View` component that animates it's `backgroundColor` when `color` prop changes. **Works on iOS & Android.**
8+
9+
## Installation
10+
`npm install react-native-animated-background-color-view --save`
11+
12+
## Usage
13+
Import **AnimatedBackgroundColorView** component
14+
15+
```
16+
import { AnimatedBackgroundColorView } from 'react-native-animated-background-color-view';
17+
```
18+
19+
Use as follows:
20+
21+
```
22+
<AnimatedBackgroundColorView color='#00aced' />
23+
```
24+
Each time the `color` prop value changes the `backgroundColor` will use the [React Native timing animation](https://facebook.github.io/react-native/docs/animated.html#timing) to animate from the previous value to the current value.
25+
26+
### Animate On Component Mount
27+
You can also specifiy an initial color for the background color to animate from when the component mounts:
28+
```
29+
<AnimatedBackgroundColorView
30+
color='#00aced'
31+
initialColor='red'
32+
/>
33+
```
34+
On mount the component `backgroundColor` will be `blue` and then animate to `#00aced`.
35+
36+
### Using the `children` Prop
37+
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.
38+
39+
```
40+
class AnimatedBackgroundColorViewWithText extends Component {
41+
render = () => {
42+
return (
43+
<AnimatedBackgroundColorView
44+
color='#00aced'
45+
initialColor='red'
46+
>
47+
<Text>Hello, world!</Text>
48+
</AnimatedBackgroundColorView>
49+
);
50+
}
51+
}
52+
```
53+
54+
## Configuration
55+
You can configure `AnimatedBackgroundColorView` by passing the following props:
56+
57+
* **color** (string, default: `'#00aced'`): the color value to which the component `backgroundColor` will animate
58+
* **delay** (number, default: `0`): the length in milliseconds the component will wait before animating to the next `color`
59+
* **duration** (number, default: `2400`): the length in milliseconds the timing animation will last
60+
* **easing** (React Native [Easing function](https://facebook.github.io/react-native/docs/easing.html), default: `Easing.out(Easing.exp)`): the easing function to define animation curve
61+
* **initialColor** (string, default: `null`): the color value from which the component `backgroundColor` will animate on mount
62+
* **style** (React Native [ViewPropTypes.style](https://facebook.github.io/react-native/docs/style.html)): additional styles applied to the component
63+
64+
## Built With
65+
* [React Native](https://facebook.github.io/react-native/) - A framework for building native apps using React
66+
67+
## Versioning
68+
I use [SemVer](https://docs.npmjs.com/getting-started/semantic-versioning) for versioning. For the versions available, see the [tags on this repository](https://github.com/joeyschroeder/react-native-animated-background-color-view/tags).
69+
70+
## Authors
71+
* **Joey Schroeder** - *Initial work* - [joeyschroeder.com](https://joeyschroeder.com)
72+
73+
See also the list of [contributors](https://github.com/joeyschroeder/react-native-animated-background-color-view/graphs/contributors) who participated in this project.
74+
75+
## License
76+
This project is licensed under the MIT License - see the [MIT Open Source Initiative](https://opensource.org/licenses/MIT) for details.
77+
78+
## Acknowledgments
79+
Hat tip to anyone who's code was used! 🤠

0 commit comments

Comments
 (0)