https://github.com/wrathchaos/react-native-animation-layout

Custom & Ready to GO partially customizable Animation Layouts for React Native.
https://github.com/wrathchaos/react-native-animation-layout

Last synced: 3 months ago
JSON representation

Custom & Ready to GO partially customizable Animation Layouts for React Native.

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-animation-layout
• Owner: WrathChaos
• License: mit
• Created: 2019-04-15T19:01:09.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T00:59:06.000Z (about 2 years ago)
• Last Synced: 2025-03-31T22:34:50.631Z (6 months ago)
• Language: JavaScript
• Homepage: https://www.freakycoder.com
• Size: 3.31 MB
• Stars: 26
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


Custom & Ready to GO partially customizable Animation Layouts for React Native.

[![npm version](https://img.shields.io/npm/v/react-native-animation-layout.svg)](https://www.npmjs.com/package/react-native-animation-layout)

[![npm](https://img.shields.io/npm/dt/react-native-animation-layout.svg)](https://www.npmjs.com/package/react-native-animation-layout)

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

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

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)







## Installation

Add the dependency:

### React Native:

```ruby

npm i react-native-animation-layout

```

## Peer Dependencies

###### IMPORTANT! You need install them.

```

"react": ">= 16.x.x",

"react-native": ">= 0.55.x",

```

## Important Note for Android : 

If you want to use LayoutAnimation on Android, you need to enable LayoutAnimations for Android. Here is how to do it:  

```ruby

import {UIManager} from 'react-native';

constructor() {

    super();

    if (Platform.OS === 'android') {

      UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

    }

  }

```

## Basic Usage

```ruby

import { CustomLayoutSpring } from "react-native-animation-layout";

// Simpliest way of adding the layout animation

componentWillUpdate() {         

  LayoutAnimation.configureNext(CustomLayoutSpring());  

}

 

 OR

// Put this code where you need to update your list or component

LayoutAnimation.configureNext(CustomLayoutSpring());

```

## Configuration - Props

### CustomLayoutSpring: 

| Property            |   Type    |      Default      | Description                                                                       |

| ------------------- | :-------: | :---------------: | --------------------------------------------------------------------------------- |

| duration            |  number   |        700        | change the animation duration as millisecond                                      |

| springDamping       |  number   |        13         | change the font size                                                              |

### CustomLayoutLinear : 

| Property            |   Type    |      Default      | Description                                                                       |

| ------------------- | :-------: | :---------------: | --------------------------------------------------------------------------------- |

| duration            |  number   |        700        | change the animation duration as millisecond                                      |

### ToDos

- [x] LICENSE

- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, kurayogun@gmail.com

## License

React Native Animation Layout Library is available under the MIT license. See the LICENSE file for more info.