With npm:
$ npm install react-native-loader-kit --save
With yarn:
$ yarn add react-native-loader-kit
Run the following command to setup for iOS:
npx pod-install ios
You need to run prebuild in order for native code takes effect:
npx expo prebuild
Then you need to restart your project to make changes take effect
Note that on iOS you'll need to run on real device, Expo Go may not work because of library linking
import LoaderKit from 'react-native-loader-kit'
<LoaderKit
style={{ width: 50, height: 50 }}
name={'BallPulse'} // Optional: see list of animations below
color={'red'} // Optional: color can be: 'red', 'green',... or '#ddd', '#ffffff',...
/>As shown in the demo above, animations are as follows:
'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' '29': 'BallRotateChase',
'30': 'Orbit',
'31': 'AudioEqualizer',
'32': 'CircleStrokeSpin',
'33': 'BallDoubleBounce'You can override sdk version to use any version in your android/build.gradle > buildscript > ext
buildscript {
ext {
LoaderKit_compileSdkVersion = 34
LoaderKit_minSdkVersion = 26
LoaderKit_targetSdkVersion = 34
}
}A fully working demo is located at example folder
