Skip to content

Reusable React Native's implementation of epic-spinners using built-in Animated

License

Notifications You must be signed in to change notification settings

MuhmdRaouf/react-native-epic-spinners

Repository files navigation

React Native Epic Spinners

npm version license Vulnerability status

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.

About

Reusable React Native's implementation of epic-spinners using built-in Animated

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published