More control over the charts styling

I've just added more props for styling the other components in the chart in order to make it more customizable and suitable for other users (this is useful in cases such as where the user wants to make the inner circle thinner/wider or something like that)

Author: Emad-salah

src/index.js

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import { getStyles } from './rules';
 
-const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internalColor, style, showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle }) => {
+const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internalColor, style, innerCircleStyle, outerCircleStyle, halfCircleStyle showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle }) => {
   const styles = getStyles(size);
   const degreesValue = (value > totalValue) ? totalValue : value;
   const percentValue = parseInt(String((value * 100) / totalValue).split('.')[0]);
@@ -30,9 +30,9 @@ const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internal
 
   return (
     <View style={style}>
-      <View style={[styles.outerCircle, { backgroundColor: outerColor }]}>
-        <View style={[styles.halfCircle, degressStyle]}/>
-        <View style={[styles.innerCircle, { backgroundColor: innerColor }]}>
+      <View style={[styles.outerCircle, { backgroundColor: outerColor }, outerCircleStyle]}>
+        <View style={[styles.halfCircle, degressStyle, halfCircleStyle]}/>
+        <View style={[styles.innerCircle, { backgroundColor: innerColor }, innerCircleStyle]}>
           {percentElement}
           {textElement}
         </View>