|
| 1 | +[](https://github.com/joeyschroeder/react-native-animated-background-color-view/issues) |
| 2 | +[](https://github.com/joeyschroeder/react-native-animated-background-color-view/network) |
| 3 | +[](https://github.com/joeyschroeder/react-native-animated-background-color-view/stargazers) |
| 4 | +[](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