react-native-animated-component icon indicating copy to clipboard operation
react-native-animated-component copied to clipboard

Published 20 hours ago • verified publisher icon WrathChaos
→

Metadata

Animate any component with React Native Animated Component

React Native Animated

Battle Tested ✅

Animate any components with React Native Animated Component

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Animated React Native Animated

Installation

Add the dependency:

npm i react-native-animated-component

Peer Dependencies

Zero Dependencies

Usage

Import

import RNAnimated from "react-native-animated-component";

Fundamental Usage

<RNAnimated
  appearFrom="left"
  animationDuration={1300}
  style={{ alignItems: "center" }}
>
  {staticData.map(() => renderItem())}
</RNAnimated>

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

Author

FreakyCoder, [email protected]

License

React Native Animated is available under the MIT license. See the LICENSE file for more info.

← Metadata

19
Stars
2
Forks
Watchers

Owner

verified publisher icon WrathChaos

Metadata

Animate any component with React Native Animated Component

Back