Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-22T16:37:42.000Z (10 months ago)
- Last Synced: 2024-04-26T02:36:28.226Z (8 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: 85
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- 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'
```
# Troubleshooting
## uses-sdk:minSdkVersion XX cannot be smaller than version YY
You can override sdk version to use any version in your `android/build.gradle` > `buildscript` > `ext`
```gradle
buildscript {
ext {
LoaderKit_compileSdkVersion = 34
LoaderKit_minSdkVersion = 26
LoaderKit_targetSdkVersion = 34
}
}
```
# 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