A better alternative to React Native's default ActivityIndicator
npm install react-native-loading-indicator
or
yarn add react-native-loading-indicator- A beautiful collection of animations
- Crisp and clean. No images. Everything you see is achieved using the Animated API and React Native components
- Highly customisable. Control the speed, style, iteration count etc
- Show identical animation across all Platforms
Just import the component and start using it
import LoadingIndicator from 'react-native-loading-indicator';
const App = () => <LoadingIndicator loading={true} />;
| Props | Default | Type | Description |
|---|---|---|---|
| loading | false | boolean | Set to true to show the LoadingIndicator |
| indicatorStyle | {} | object | override the default indicator styles |
| duration | - | int | control the speed of the animation by reducing or increasing the animation duration |
| bezierFn | - | string | control the easing of the animation using cubic bezier function |
| iterations | -1 | number | number of times the animation should loop. default is infinite |
| callback | () => {} | function | callback function to call after completing the animation if an iteration other than '-1' is specified. |
| animationName | squareFlip | string | animation style name. available styles ['squareFlip', 'circleScale'] |
Since the LoadingIndicator color is white by default, set a background color to see it in action.
Animations ported from SpinKit by Tobias Ahlin.
MIT