Skip to content
⛹️‍♂️ Bouncing preloader component with custom icons in React Native
Branch: master
Clone or download
sonnylazuardi Merge pull request #7 from kevinhermawan/master
Update README.md : Move Props List into Table
Latest commit dbeab4b May 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Add icons Apr 13, 2018
.gitignore 💪 Initial commit Apr 13, 2018
LICENSE 💪 Initial commit Apr 13, 2018
bouncingpreloader.gif 💪 Initial commit Apr 13, 2018
index.d.ts Update index.d.ts May 17, 2019
index.js
package-lock.json 💪 Initial commit Apr 13, 2018
package.json 💪 Initial commit Apr 13, 2018
readme.md Update README.md : Move Props List into Table May 17, 2019

readme.md

reactnative.gallery

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
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

Expo Example

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

License

MIT Licensed

You can’t perform that action at this time.