React Native Bouncing Preloader
Bouncing Preloader Component with custom icons in React Native
Based on the dribbble shot by Dany Rizky: https://dribbble.com/shots/4423936-Islands-Preloader-Animation
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
import BouncingPreloader from 'react-native-bouncing-preloader'; <BouncingPreloader 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 <BouncingPreloader icons={[ require('./assets/image1.png'), require('./assets/image2.png'), ]}/>Available props
| Props | Type | Required | Default Value |
|---|---|---|---|
| icons | Array | ||
| leftRotation | String | -680deg | |
| rightRotation | String | 360deg | |
| leftDistance | String | -180 | |
| rightDistance | Number | -250 | |
| speed | Number | 1200 | |
| size | Number | 150 |
Contributing
- Feel free to open PR.
Examples
Most of the credit goes to Dany Rizky for the design inspiration.
License
MIT Licensed
