Package Exports

react-native-bouncing-preloaders

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-bouncing-preloaders) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Bouncing Preloader

Bouncing Preloader Component with custom icons in React Native

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