Awesome

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'

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.