React Native Bouncing Preloader

Bouncing Preloader Component with custom icons in React Native

!icon

!demo

Based on the dribbble shot by Dany Rizky:
https://dribbble.com/shots/4423936-Islands-Preloader-Animation

!dribbbleshot

#### Demo

https://exp.host/@sonnylazuardi/react-native-bouncing-preloader

#### Background

When I saw the preloader animation, I think it would be great if we can use our own icon and give more control to the bouncing animation and rotation. So I tried to make this open source component.

#### Goals

* Animate our own custom icon
* Flexible to use remote image url or local image file
* Able to control distance, rotation angle etc

#### Usage

* npm install --save react-native-bouncing-preloader
* In your react native script add these lines

``jsx
import BouncingPreloader from 'react-native-bouncing-preloader';

icons={[
'https://www.shareicon.net/data/256x256/2016/05/04/759946_bar_512x512.png',
require('./assets/image.png'),
]}
leftRotation="-680deg",
rightRotation="360deg",
leftDistance={-180},
rightDistance={-250},
speed={1200} />

// or just give icons

icons={[
require('./assets/image1.png'),
require('./assets/image2.png'),
]}/>
``

$3

| Props | Type | Required | Default Value |
| ------------- | ------------- | ------------------ | ------------- |
| icons | Array | :white_check_mark: | :x: |
| leftRotation | String | :x: | -680deg |
| rightRotation | String | :x: | 360deg |
| leftDistance | String | :x: | -180 |
| rightDistance | Number | :x: | -250 |
| speed | Number | :x: | 1200 |
| size | Number | :x: | 150 |

#### Contributing

* Feel free to open PR.

#### Examples

Expo Example

Most of the credit goes to Dany Rizky for the design inspiration.

#### License

MIT Licensed