Merge pull request #191 from rayzeller/master

Add style overrides for children container

README.md

@@ -72,18 +72,20 @@ The `animate`-function returns the timing animation so you can chain, run in par
 
 You can configure the CircularProgress-component by passing the following props:
 
-Name             | Type                   | Default value           | Description
------------------|------------------------|-------------------------|--------------
-size             | number\|Animated.Value | **required**            | Width and height of circle
-width            | number                 | **required**            | Thickness of the progress line
-backgroundWidth  | number                 | width                   | Thickness of background circle
-fill             | number (0-100)         | 0                       | Current progress / fill
-tintColor        | string                 | black                   | Color of the progress line
-backgroundColor  | string                 |                         | If unspecified, no background line will be rendered
-rotation         | number (-360 - 360)    | 90                      | Angle from which the progress starts from
-lineCap          | string                 | butt                    | Shape used at ends of progress line. Possible values: butt, round, square
-arcSweepAngle    | number (0-360)         | 360                     | If you don't want a full circle, specify the arc angle
-children         | function               |                         | Pass a function as a child. It receiveds the current fill-value as an argument
+Name                  | Type                   | Default value           | Description
+----------------------|------------------------|-------------------------|--------------
+size                  | number\|Animated.Value | **required**            | Width and height of circle
+width                 | number                 | **required**            | Thickness of the progress line
+backgroundWidth       | number                 | width                   | Thickness of background circle
+fill                  | number (0-100)         | 0                       | Current progress / fill
+tintColor             | string                 | black                   | Color of the progress line
+backgroundColor       | string                 |                         | If unspecified, no background line will be rendered
+rotation              | number (-360 - 360)    | 90                      | Angle from which the progress starts from
+lineCap               | string                 | butt                    | Shape used at ends of progress line. Possible values: butt, round, square
+arcSweepAngle         | number (0-360)         | 360                     | If you don't want a full circle, specify the arc angle
+style                 | ViewPropTypes.style    |                         | Extra styling for the main container
+children              | function               |                         | Pass a function as a child. It receiveds the current fill-value as an argument
+childrenContainerStyle| ViewPropTypes.style    |                         | Extra styling for the children container
 
 The following props can further be used on `AnimatedCircularProgress`:
 

index.d.ts

@@ -1,6 +1,6 @@
 declare module 'react-native-circular-progress' {
   import * as React from 'react';
-  import { Animated, Easing } from 'react-native';
+  import { Animated, Easing, ViewPropTypes } from 'react-native';
 
   export interface AnimatedCircularProgressProps {
     /**
@@ -72,6 +72,13 @@ declare module 'react-native-circular-progress' {
      */
     arcSweepAngle?: number;
 
+    /**
+     * Style of the entire progress container
+     * 
+     * @type {ViewPropTypes.style}
+     */
+    style?: ViewPropTypes.style;
+
     /**
      * Pass a function as a child. It receiveds the current fill-value as an argument
      * 
@@ -81,6 +88,13 @@ declare module 'react-native-circular-progress' {
      */
     children?: (fill: number) => JSX.Element;
 
+    /**
+     * Style of the children container
+     * 
+     * @type {ViewPropTypes.style}
+     */
+    childrenContainerStyle?: ViewPropTypes.style;
+
     /**
      * Initial fill-value before animation starts
      * 

src/CircularProgress.js

@@ -35,6 +35,7 @@ export default class CircularProgress extends React.PureComponent {
       arcSweepAngle,
       fill,
       children,
+      childrenContainerStyle,
     } = this.props;
 
     const maxWidthCircle = backgroundWidth ? Math.max(width, backgroundWidth) : width;
@@ -55,17 +56,20 @@ export default class CircularProgress extends React.PureComponent {
     );
     const offset = size - maxWidthCircle * 2;
 
-    const childContainerStyle = {
-      position: 'absolute',
-      left: maxWidthCircle,
-      top: maxWidthCircle,
-      width: offset,
-      height: offset,
-      borderRadius: offset / 2,
-      alignItems: 'center',
-      justifyContent: 'center',
-      overflow: 'hidden',
-    };
+    const localChildrenContainerStyle = {
+      ...{
+        position: 'absolute',
+        left: maxWidthCircle,
+        top: maxWidthCircle,
+        width: offset,
+        height: offset,
+        borderRadius: offset / 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }, 
+      ...childrenContainerStyle,
+    }
 
     return (
       <View style={style}>
@@ -91,7 +95,7 @@ export default class CircularProgress extends React.PureComponent {
             )}
           </G>
         </Svg>
-        {children && <View style={childContainerStyle}>{children(fill)}</View>}
+        {children && <View style={localChildrenContainerStyle}>{children(fill)}</View>}
       </View>
     );
   }
@@ -109,6 +113,7 @@ CircularProgress.propTypes = {
   lineCap: PropTypes.string,
   arcSweepAngle: PropTypes.number,
   children: PropTypes.func,
+  childrenContainerStyle: ViewPropTypes.style,
 };
 
 CircularProgress.defaultProps = {