react-native-bouncing-preloaders
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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

    Install

    npm i react-native-bouncing-preloaders

    DownloadsWeekly Downloads

    23

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    2.84 MB

    Total Files

    16

    Last publish

    Collaborators

    • webrangeriit