Skip to content

devLaaziz/react-native-bouncing-preloader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

  • icons: PropTypes.array,
  • leftRotation: PropTypes.string,
  • rightRotation: PropTypes.string,
  • leftDistance: PropTypes.number,
  • rightDistance: PropTypes.number,
  • speed: PropTypes.number

Contributing

  • Feel free to open PR.

Examples

Expo Example

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

License

MIT Licensed

About

⛹️‍♂️ Bouncing preloader component with custom icons in React Native

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%