upgrade to 0.60

Author: wangdicoder

.npmignore

@@ -1,2 +1,5 @@
 /screenshot
-/.idea
+/.idea
+/node_modules
+.prettierrc
+README.md

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

README.md

@@ -22,7 +22,7 @@ It works, have fun!
 
 ### iOS
 
-You need to install this module: https://github.com/react-native-community/art
+Following the [Art module](https://github.com/react-native-community/art) instruction to configure.
 
 ## Usage
 

index.js

@@ -22,7 +22,7 @@ export const BubblesLoader = Bubbles;
 export const CirclesLoader = Circles;
 export const CirclesRotationScaleLoader = CirclesRotationScale;
 export const ColorDotsLoader = ColorDots;
-export const DotsLoader  = Dots;
+export const DotsLoader = Dots;
 export const DoubleCircleLoader = DoubleCircle;
 export const EatBeanLoader = EatBean;
 export const LinesLoader = Lines;

lib/loader/BreathingLoader.js

@@ -1,29 +1,29 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Animated } from "react-native";
-import { Surface } from "@react-native-community/art";
-import AnimatedCircle from "../animated/AnimatedCircle";
-import { color } from "../const";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Animated } from 'react-native';
+import { Surface } from '@react-native-community/art';
+import AnimatedCircle from '../animated/AnimatedCircle';
+import { color } from '../const';
 
 export default class BreathingLoader extends React.PureComponent {
   static propTypes = {
     color: PropTypes.string,
     size: PropTypes.number,
     strokeWidth: PropTypes.number,
-    frequency: PropTypes.number
+    frequency: PropTypes.number,
   };
 
   static defaultProps = {
     color,
     size: 30,
     strokeWidth: 3,
-    frequency: 800
+    frequency: 800,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      scale: new Animated.Value(0.1)
+      scale: new Animated.Value(0.1),
     };
   }
 
@@ -39,12 +39,12 @@ export default class BreathingLoader extends React.PureComponent {
     Animated.sequence([
       Animated.timing(this.state.scale, {
         toValue: 1,
-        duration: this.props.frequency
+        duration: this.props.frequency,
       }),
       Animated.timing(this.state.scale, {
         toValue: 0.1,
-        duration: this.props.frequency
-      })
+        duration: this.props.frequency,
+      }),
     ]).start(() => {
       !this.unmounted && this._animation();
     });

lib/loader/BubblesLoader.js

@@ -1,21 +1,21 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Animated } from "react-native";
-import { Surface } from "@react-native-community/art";
-import AnimatedCircle from "../animated/AnimatedCircle";
-import { color } from "../const";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Animated } from 'react-native';
+import { Surface } from '@react-native-community/art';
+import AnimatedCircle from '../animated/AnimatedCircle';
+import { color } from '../const';
 
 export default class BubblesLoader extends React.PureComponent {
   static propTypes = {
     color: PropTypes.string,
     dotRadius: PropTypes.number,
-    size: PropTypes.number
+    size: PropTypes.number,
   };
 
   static defaultProps = {
     color,
     dotRadius: 10,
-    size: 40
+    size: 40,
   };
 
   state = {
@@ -27,8 +27,8 @@ export default class BubblesLoader extends React.PureComponent {
       new Animated.Value(1),
       new Animated.Value(1),
       new Animated.Value(1),
-      new Animated.Value(1)
-    ]
+      new Animated.Value(1),
+    ],
   };
   eachDegree = 360 / this.state.opacities.length;
   timers = [];
@@ -44,15 +44,15 @@ export default class BubblesLoader extends React.PureComponent {
 
   componentWillUnmount() {
     this.unmounted = true;
-    this.timers.forEach(id => {
+    this.timers.forEach((id) => {
       clearTimeout(id);
     });
   }
 
-  _animation = i => {
+  _animation = (i) => {
     Animated.sequence([
       Animated.timing(this.state.opacities[i], { toValue: 0.2, duration: 600 }),
-      Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 })
+      Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 }),
     ]).start(() => {
       !this.unmounted && this._animation(i);
     });
@@ -65,14 +65,8 @@ export default class BubblesLoader extends React.PureComponent {
       <Surface width={size + dotRadius} height={size + dotRadius}>
         {opacities.map((item, i) => {
           let radian = (i * this.eachDegree * Math.PI) / 180;
-          let x =
-            Math.round((size / 2) * Math.cos(radian)) +
-            size / 2 +
-            dotRadius / 2;
-          let y =
-            Math.round((size / 2) * Math.sin(radian)) +
-            size / 2 +
-            dotRadius / 2;
+          let x = Math.round((size / 2) * Math.cos(radian)) + size / 2 + dotRadius / 2;
+          let y = Math.round((size / 2) * Math.sin(radian)) + size / 2 + dotRadius / 2;
           return (
             <AnimatedCircle
               key={i}

lib/loader/CirclesLoader.js

@@ -1,21 +1,21 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Animated } from "react-native";
-import { Surface } from "@react-native-community/art";
-import AnimatedCircle from "../animated/AnimatedCircle";
-import { color } from "../const";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Animated } from 'react-native';
+import { Surface } from '@react-native-community/art';
+import AnimatedCircle from '../animated/AnimatedCircle';
+import { color } from '../const';
 
 export default class CirclesLoader extends React.PureComponent {
   static propTypes = {
     color: PropTypes.string,
     dotRadius: PropTypes.number,
-    size: PropTypes.number
+    size: PropTypes.number,
   };
 
   static defaultProps = {
     color,
     dotRadius: 8,
-    size: 40
+    size: 40,
   };
 
   state = {
@@ -27,8 +27,8 @@ export default class CirclesLoader extends React.PureComponent {
       new Animated.Value(1),
       new Animated.Value(1),
       new Animated.Value(1),
-      new Animated.Value(1)
-    ]
+      new Animated.Value(1),
+    ],
   };
   eachDegree = 360 / this.state.opacities.length;
   timers = [];
@@ -44,15 +44,15 @@ export default class CirclesLoader extends React.PureComponent {
 
   componentWillUnmount() {
     this.unmounted = true;
-    this.timers.forEach(id => {
+    this.timers.forEach((id) => {
       clearTimeout(id);
     });
   }
 
-  _animation = i => {
+  _animation = (i) => {
     Animated.sequence([
       Animated.timing(this.state.opacities[i], { toValue: 0.1, duration: 600 }),
-      Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 })
+      Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 }),
     ]).start(() => {
       !this.unmounted && this._animation(i);
     });
@@ -65,14 +65,8 @@ export default class CirclesLoader extends React.PureComponent {
       <Surface width={size + dotRadius} height={size + dotRadius}>
         {opacities.map((item, i) => {
           let radian = (i * this.eachDegree * Math.PI) / 180;
-          let x =
-            Math.round((size / 2) * Math.cos(radian)) +
-            size / 2 +
-            dotRadius / 2;
-          let y =
-            Math.round((size / 2) * Math.sin(radian)) +
-            size / 2 +
-            dotRadius / 2;
+          let x = Math.round((size / 2) * Math.cos(radian)) + size / 2 + dotRadius / 2;
+          let y = Math.round((size / 2) * Math.sin(radian)) + size / 2 + dotRadius / 2;
           return (
             <AnimatedCircle
               key={i}

lib/loader/CirclesRotationScaleLoader.js

@@ -1,24 +1,24 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Animated, Easing } from "react-native";
-import { Surface, Group } from "@react-native-community/art";
-import AnimatedCircle from "../animated/AnimatedCircle";
-import { color } from "../const";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Animated, Easing } from 'react-native';
+import { Surface, Group } from '@react-native-community/art';
+import AnimatedCircle from '../animated/AnimatedCircle';
+import { color } from '../const';
 
 export default class RotationCircleLoader extends React.PureComponent {
   static propTypes = {
     size: PropTypes.number,
-    color: PropTypes.string
+    color: PropTypes.string,
   };
 
   static defaultProps = {
     size: 50,
-    color
+    color,
   };
 
   state = {
     degree: new Animated.Value(0),
-    scales: [new Animated.Value(0), new Animated.Value(0)]
+    scales: [new Animated.Value(0), new Animated.Value(0)],
   };
   timers = [];
 
@@ -34,7 +34,7 @@ export default class RotationCircleLoader extends React.PureComponent {
 
   componentWillUnmount() {
     this.unmounted = true;
-    this.timers.forEach(id => {
+    this.timers.forEach((id) => {
       clearTimeout(id);
     });
   }
@@ -44,8 +44,8 @@ export default class RotationCircleLoader extends React.PureComponent {
       Animated.timing(this.state.degree, {
         toValue: 360,
         duration: 2000,
-        easing: Easing.linear
-      })
+        easing: Easing.linear,
+      }),
     ]).start(() => {
       if (!this.unmounted) {
         this.state.degree.setValue(0);
@@ -54,10 +54,10 @@ export default class RotationCircleLoader extends React.PureComponent {
     });
   };
 
-  _animationCircles = i => {
+  _animationCircles = (i) => {
     Animated.sequence([
       Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000 }),
-      Animated.timing(this.state.scales[i], { toValue: 0.05, duration: 1000 })
+      Animated.timing(this.state.scales[i], { toValue: 0.05, duration: 1000 }),
     ]).start(() => {
       !this.unmounted && this._animationCircles(i);
     });
@@ -67,13 +67,13 @@ export default class RotationCircleLoader extends React.PureComponent {
     const { size, color } = this.props;
     const degree = this.state.degree.interpolate({
       inputRange: [0, 360],
-      outputRange: ["0deg", "360deg"]
+      outputRange: ['0deg', '360deg'],
     });
     return (
       <Animated.View
         style={{
           transform: [{ rotate: degree }],
-          backgroundColor: "rgba(0,0,0,0)"
+          backgroundColor: 'rgba(0,0,0,0)',
         }}
       >
         <Surface width={size} height={size}>