https://github.com/johan-dutoit/react-native-stagger-in

Staggered views made simple
https://github.com/johan-dutoit/react-native-stagger-in

animation animations react-native

Last synced: about 1 month ago
JSON representation

Staggered views made simple

• Host: GitHub
• URL: https://github.com/johan-dutoit/react-native-stagger-in
• Owner: Johan-dutoit
• License: mit
• Created: 2018-01-28T16:35:24.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-18T16:30:24.000Z (over 6 years ago)
• Last Synced: 2024-05-01T15:27:21.508Z (7 months ago)
• Topics: animation, animations, react-native
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-stagger-in

Staggered views made simple

[![NPM Version](https://img.shields.io/npm/v/react-native-stagger-in.svg?style=flat)](https://www.npmjs.com/package/react-native-stagger-in)

[![NPM Downloads](https://img.shields.io/npm/dm/react-native-stagger-in.svg?style=flat)](https://www.npmjs.com/package/react-native-stagger-in)



## Quick Access

* Installation

* Preview

* Expo

* Usage

* Properties

* Contributing

## Installation

Install the module with:

```

npm install react-native-stagger-in --save

```

## Preview

![](https://github.com/Johan-dutoit/react-native-stagger-in/blob/master/preview.gif)

## Expo

You can find the Expo snack here: https://snack.expo.io/@johan-dev/staggerin

## Usage

Simply import the component 

```js

import StaggerIn from 'react-native-stagger-in';

```

Then use as follows

```js

    View 1

    View 2

```

###### Top

## Properties

| Prop | Description | Default |

|---|---|---|

|**`duration`**|The duration each view takes to load in|`300`|

|**`staggerDelay`**|The delay between each animation|`200`|

|**`useNativeDriver`**|Use the native drive for the animations|`true`|

###### Top

## Contributing

Feel free to do pull requests if a certain feature you want is missing.  We accept all PR's that are enhancements to the project.

###### Top