Improve readability

src/AnimatedCircularProgress.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Animated, AppState, Easing, View, ViewPropTypes } from 'react-native';
+import {
+  Animated,
+  AppState,
+  Easing,
+  View,
+  ViewPropTypes
+} from 'react-native';
 import CircularProgress from './CircularProgress';
 const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
 

src/CircularProgress.js

@@ -8,7 +8,6 @@ import MetricsPath from 'art/metrics/path';
 export default class CircularProgress extends React.Component {
 
   circlePath(cx, cy, r, startDegree, endDegree) {
-
     let p = Path();
     p.path.push(0, cx + r, cy);
     p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1);
@@ -20,12 +19,34 @@ export default class CircularProgress extends React.Component {
   }
 
   render() {
-    const { size, width, backgroundWidth, tintColor, backgroundColor, style, rotation, linecap, children } = this.props;
-    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999);
+    const {
+      size,
+      width,
+      backgroundWidth,
+      tintColor,
+      backgroundColor,
+      style,
+      rotation,
+      linecap,
+      children
+    } = this.props;
 
     const fill = this.extractFill(this.props.fill);
+    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999);
     const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (360 * .9999) * fill / 100);
     const offset = size - (width * 2);
+
+    const childContainerStyle = {
+      position: 'absolute',
+      left: width,
+      top: width,
+      width: offset,
+      height: offset,
+      borderRadius: offset / 2,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+
     return (
       <View style={style}>
         <Surface
@@ -41,20 +62,11 @@ export default class CircularProgress extends React.Component {
                    strokeCap={linecap}/>
           </Group>
         </Surface>
-        {children && <View
-          style={{
-            position: 'absolute',
-            left: width,
-            top: width,
-            width: offset,
-            height: offset,
-            borderRadius: offset / 2,
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          {children(fill)}
-        </View>}
+        {children && (
+          <View style={childContainerStyle}>
+            {children(fill)}
+          </View>
+        )}
       </View>
     )
   }