React Native Epic Spinners

This library is the React Native's built-in Animated implementation of epic-spinners by EpicMax

Special Thanks to Bondz for his project react-epic-spinners it helps me a lot.

Installation

Using NPM

npm install react-native-epic-spinners

Or Yarn

yarn add react-native-epic-spinners

Usage

All components accept the following props

• animationDelay [number]: (optional) defaults to 1000 which is 1 second. specifies the timing of the spinner animation. Lower numbers mean the animations restart faster.
• color [string]: (optional) defaults to red. Specifies the color of the spinner.
• size [number]: (optional) specifies how large the spinner should be rendered
• style [object]: (optional) a react component style object to additionally style the component

Examples

//** @flow **//
import React from 'react';
import { SafeAreaView } from 'react-native';
import { AtomSpinner } from 'react-native-epic-spinners'
 
const App: () => React$Node = () => {
  return (
    <SafeAreaView style={style.container}>
      <AtomSpinner animationDuration={2500} color="blue" size={20} />
    </SafeAreaView>
  );
};
export default App;

The source code for the example (showcase) app is under the Example directory. If you want to play with the API but don't feel like trying it on a real app, you can run the example project.

Components

All components are named exports of the package.

import { ... } from 'react-native-epic-spinners'

1. AtomSpinner
2. BreedingRhombusSpinner
3. CirclesToRhombusesSpinner
4. FingerprintSpinner
5. FlowerSpinner
6. FulfillingBouncingCircleSpinner
7. FulfillingSquareSpinner
8. HalfCircleSpinner
9. HollowDotsSpinner
10. IntersectingCirclesSpinner
11. LoopingRhombusesSpinner
12. OrbitSpinner
13. PixelSpinner
14. RadarSpinner
15. ScalingSquaresSpinner
16. SelfBuildingSquareSpinner
17. SemipolarSpinner
18. SpringSpinner
19. SwappingSquaresSpinner
20. TrinityRingsSpinner

Known Issues

Because i am using React Native's built-in Animated Android has the following problems

• Performance issue due it runs JS threads and send the animation through the bridge (if we use react reanimated it might solve it but i dont know how to use the library, PRs welcomed if you know how)
• Some styling dont work on android (a bug in react native itself) such as borderRightColor and borderLeftColor
• some style partially works but it looks odd too.

If you know a fix for it, please send a PR :)

License

MIT.