https://github.com/maitrungduc1410/react-native-loader-kit

✳️Purely native loader indicators for React Native ✳️
https://github.com/maitrungduc1410/react-native-loader-kit

react-native react-native-indicator react-native-loader react-native-loader-kit react-native-loading

Last synced: 2 months ago
JSON representation

✳️Purely native loader indicators for React Native ✳️

• Host: GitHub
• URL: https://github.com/maitrungduc1410/react-native-loader-kit
• Owner: maitrungduc1410
• License: mit
• Created: 2020-05-06T08:24:39.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-22T16:37:42.000Z (4 months ago)
• Last Synced: 2024-04-23T21:37:03.446Z (2 months ago)
• Topics: react-native, react-native-indicator, react-native-loader, react-native-loader-kit, react-native-loading
• Language: Java
• Homepage:
• Size: 9.68 MB
• Stars: 84
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Lists

• awesome-react-native - react-native-loader-kit ★1 - Purely native loading animations for React Native. (Components / UI)
• awesome-react-native - react-native-loader-kit ★1 - Purely native loading animations for React Native. (Components / UI)
• awesome-react-native - react-native-loader-kit ★1 - Purely native loading animations for React Native. (Components / UI)

README

        


  


    React Native Loader Kit

  

  


  

    

  


  

    

  

  

    

  

  

    

  

  

  

  


  


    

    

  

  


    If you like this project, encourage me by giving a ⭐️. Happy hacking

  



# Table of Contents

1. [Installation](#Installation)

2. [Usage](#usage)

3. [List animations](#list-animations)

4. [Demo](#demo)

# Installation

With npm:

`$ npm install react-native-loader-kit --save`

With yarn:

`$ yarn add react-native-loader-kit`

## For iOS (React Native CLI project)

Run the following command to setup for iOS:

```

npx pod-install ios

```

## For Expo project

You need to run `prebuild` in order for native code takes effect:

```

npx expo prebuild

npx pod-install ios

```

# Usage

```js

import LoaderKit from 'react-native-loader-kit'

```

# List animations

As shown in the demo above, animations are as follows: 

## Default animations (both Android and iOS)

```json

  '1': 'BallPulse',

  '2': 'BallGridPulse',

  '3': 'BallClipRotate',

  '4': 'SquareSpin',

  '5': 'BallClipRotatePulse',

  '6': 'BallClipRotateMultiple',

  '7': 'BallPulseRise',

  '8': 'BallRotate',

  '9': 'CubeTransition',

  '10': 'BallZigZag',

  '11': 'BallZigZagDeflect',

  '12': 'BallTrianglePath',

  '13': 'BallScale',

  '14': 'LineScale',

  '15': 'LineScaleParty',

  '16': 'BallScaleMultiple',

  '17': 'BallPulseSync',

  '18': 'BallBeat',

  '19': 'LineScalePulseOut',

  '20': 'LineScalePulseOutRapid',

  '21': 'BallScaleRipple',

  '22': 'BallScaleRippleMultiple',

  '23': 'BallSpinFadeLoader',

  '24': 'LineSpinFadeLoader',

  '25': 'TriangleSkewSpin',

  '26': 'Pacman',

  '27': 'BallGridBeat',

  '28': 'SemiCircleSpin'

```

## iOS extra animations

```json

  '29': 'BallRotateChase',

  '30': 'Orbit',

  '31': 'AudioEqualizer',

  '32': 'CircleStrokeSpin',

  '33': 'BallDoubleBounce'

```

# Demo

A fully working demo is located at [example folder](./example/src/App.tsx)

# Thanks

Big thanks to [81813780](https://github.com/81813780/AVLoadingIndicatorView) and [ninjaprox](https://github.com/ninjaprox/NVActivityIndicatorView) for their great works