https://github.com/joeyschroeder/react-native-animated-background-color-view
🌈 A modified React-Native "View" component that animates it's "backgroundColor" when "color" prop changes.
https://github.com/joeyschroeder/react-native-animated-background-color-view
animated animates animation background color react react-native view
Last synced: 5 months ago
JSON representation
🌈 A modified React-Native "View" component that animates it's "backgroundColor" when "color" prop changes.
- Host: GitHub
- URL: https://github.com/joeyschroeder/react-native-animated-background-color-view
- Owner: joeyschroeder
- License: other
- Created: 2018-06-16T12:47:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-09T03:07:12.000Z (over 2 years ago)
- Last Synced: 2024-11-24T06:32:48.561Z (6 months ago)
- Topics: animated, animates, animation, background, color, react, react-native, view
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-animated-background-color-view
- Size: 3.55 MB
- Stars: 24
- Watchers: 1
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-native-animated-background-color-view)
[](https://www.npmjs.com/package/react-native-animated-background-color-view)
[]()
[](https://github.com/joeyschroeder/react-native-animated-background-color-view/issues)
[](https://github.com/joeyschroeder/react-native-animated-background-color-view/stargazers)
[](https://github.com/prettier/prettier)
[](https://github.com/facebook/jest)
[](https://david-dm.org/joeyschroeder/react-native-animated-background-color-view/)
[](https://david-dm.org/joeyschroeder/react-native-animated-background-color-view/?type=dev)
# 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.**
## Example
## Installation
`npm install react-native-animated-background-color-view --save`
## Usage
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](https://facebook.github.io/react-native/docs/animated.html#timing) 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!
);
}
}
```
## Configuration
You can configure `AnimatedBackgroundColorView` by passing the following props:
| prop | type/valid values | default | description |
| ------------ | ---------------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------- |
| color | string | `'#00aced'` | the color value to which the component `backgroundColor` will animate |
| delay | number | `0` | the length in milliseconds the component will wait before animating to the next `color` |
| duration | number | `2400` | the length in milliseconds the timing animation will last |
| easing | React Native [Easing function](https://facebook.github.io/react-native/docs/easing.html) | `Easing.out(Easing.exp)` | the easing function to define animation curve |
| initialColor | string | `undefined` | the color value from which the component `backgroundColor` will animate on mount |
| style | React Native [style object](https://facebook.github.io/react-native/docs/style.html) | `undefined` | additional styles applied to the component |
## Built With
- [React Native](https://facebook.github.io/react-native/) - A framework for building native apps using React
## Versioning
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).
## Authors
- **Joey Schroeder** - _Initial work_ - [joeyschroeder.com](https://joeyschroeder.com)
See also the list of [contributors](https://github.com/joeyschroeder/react-native-animated-background-color-view/graphs/contributors) who participated in this project.
## Contributing
Please submit a pull request with any features/fixes for the project. I apologize in advance for the slow action on pull requests and issues. Please follow the [ESLint rules](https://github.com/joeyschroeder/react-native-animated-background-color-view/blob/master/.eslintrc.json) for the project.
## License
This project is licensed under the MIT License - see the [MIT Open Source Initiative](https://opensource.org/licenses/MIT) for details.
## Acknowledgments
Hat tip to anyone who's code was used! ðŸ¤