https://github.com/wrathchaos/react-native-animated-component
Animate any component with React Native Animated Component
https://github.com/wrathchaos/react-native-animated-component
android animatable animate animated animated-component animation app-development component development expo front-end ios mobile react react-native reactjs
Last synced: 2 months ago
JSON representation
Animate any component with React Native Animated Component
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-animated-component
- Owner: WrathChaos
- Created: 2020-10-20T15:17:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-11T13:02:43.000Z (almost 3 years ago)
- Last Synced: 2025-05-08T07:43:16.398Z (2 months ago)
- Topics: android, animatable, animate, animated, animated-component, animation, app-development, component, development, expo, front-end, ios, mobile, react, react-native, reactjs
- Language: Java
- Homepage: https://freakycoder.com
- Size: 53.1 MB
- Stars: 20
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-animated-component)
[](https://github.com/WrathChaos/react-native-animated-component)
[](https://www.npmjs.com/package/react-native-animated-component)
[](https://www.npmjs.com/package/react-native-animated-component)

[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
![]()
![]()
# Installation
Add the dependency:
```bash
npm i react-native-animated-component
```## Peer Dependencies
Zero Dependencies
# Usage
## Import
```jsx
import RNAnimated from "react-native-animated-component";
```## Fundamental Usage
```jsx
{staticData.map(() => renderItem())}
```
## Example Project 😍
You can checkout the example project 🥰
Simply run
- `npm i`
- `react-native run-ios/android`should work of the example project.
# Configuration - Props
## Fundamentals
| Property | Type | Default | Description |
| ----------------- | :--------: | :-----: | --------------------------------------------------------------------- |
| appearFrom | AppearFrom | "left" | The component will appear from that direction |
| animationDuration | number | 300 | change the animation duration |
| style | ViewStyle | default | set or override the style object for the main container |
| initialDelay | number | default | change the initial delay of the appearing animation |
| delayInterval | number | 200 | change the each children's delay interval in each appearing animation |## Future Plans
- [x] ~~LICENSE~~
- [ ] More Animation Type
- [x] ~~Opacity~~
- [ ] Solid Movement
- [ ] Scale
- [ ] Write an article about the lib on Medium# Credit
Heavily inspired from [aarkalyk's awesome polls app](https://github.com/aarkalyk/react-native-polls-api-example)
## Author
FreakyCoder, [email protected]
## License
React Native Animated is available under the MIT license. See the LICENSE file for more info.