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

        


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-animated-component)

[![Animate any components with React Native Animated Component](https://img.shields.io/badge/-Animate%20any%20components%20with%20React%20Native%20Animated%20Component-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-animated-component)

[![npm version](https://img.shields.io/npm/v/react-native-animated-component.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-animated-component)

[![npm](https://img.shields.io/npm/dt/react-native-animated-component.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-animated-component)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](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.