Merge pull request #12 from thomasmarren/master

Add prop for an icon on the toggle circle

README.md

@@ -49,6 +49,7 @@ offColor  |  String | true | '#ecf0f1' | Off Color
 label | String| true |   | Custom Label Text on the Left of the toggle Button
 labelStyle | Object | true | {marginHorizontal: 10}  | Custom Styling for the Label Text View
 size | String | true |  'medium' | Size of the toggle switch button ( 'large', 'medium', 'small')
+icon | React Component | true |  null | Icon for the toggle. Can be any React Component considerate of size
 onToggle | Function Callback | false |  none | Callback when the toggle switch component changes the state, params: isOn
 
 ## Contribution

ToggleSwitch.js

@@ -43,15 +43,17 @@ export default class ToggleSwitch extends React.Component {
     offColor: PropTypes.string.isRequired,
     size: PropTypes.string,
     labelStyle: PropTypes.object,
-    onToggle: PropTypes.func.isRequired
+    onToggle: PropTypes.func.isRequired,
+    icon: PropTypes.object,
   }
 
   static defaultProps = {
     isOn : false,
     onColor: '#634fc9',
     offColor: '#ecf0f1',
     size: 'medium',
-    labelStyle: {}
+    labelStyle: {},
+    icon: null,
   }
 
   offsetX = new Animated.Value(0);
@@ -66,6 +68,8 @@ export default class ToggleSwitch extends React.Component {
   })
 
   createInsideCircleStyle = () => ({
+    alignItems: 'center',
+    justifyContent: 'center',
     margin: 4,
     position: 'absolute',
     backgroundColor: 'white',
@@ -101,7 +105,7 @@ export default class ToggleSwitch extends React.Component {
             this.props.onToggle(!this.props.isOn);
           }}
         >
-          <Animated.View style={this.createInsideCircleStyle()} />
+          <Animated.View style={this.createInsideCircleStyle()} >{this.props.icon}</Animated.View>
         </TouchableOpacity>
       </View>
     );