add outline prop to checkbox

Author: Mackenzie Browne

generatedTypes/components/checkbox/index.d.ts

@@ -17,6 +17,10 @@ export interface CheckboxProps extends TouchableOpacityProps {
      * The Checkbox color
      */
     color?: string;
+    /**
+     * alternative Checkbox outline style
+     */
+    outline?: boolean;
     /**
      * The size of the checkbox. affect both width and height
      */

src/components/checkbox/index.tsx

@@ -32,6 +32,10 @@ export interface CheckboxProps extends TouchableOpacityProps {
    * The Checkbox color
    */
   color?: string;
+  /**
+   * alternative Checkbox outline style
+   */
+  outline?: boolean;
   /**
    * The size of the checkbox. affect both width and height
    */
@@ -172,7 +176,18 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   }
 
   renderCheckbox() {
-    const {selectedIcon, color, iconColor, label, disabled, testID, style, containerStyle, ...others} = this.props;
+    const {
+      selectedIcon,
+      color,
+      iconColor,
+      label,
+      disabled,
+      testID,
+      style,
+      containerStyle,
+      outline = false,
+      ...others
+    } = this.props;
 
     return (
       //@ts-ignore
@@ -186,14 +201,18 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       >
         {
           <Animated.View
-            style={[this.styles.container, {backgroundColor: this.getColor()}, {opacity: this.animationStyle.opacity}]}
+            style={[
+              this.styles.container,
+              {backgroundColor: outline ? 'transparent' : disabled ? DEFAULT_DISABLED_COLOR : this.getColor()},
+              {opacity: this.animationStyle.opacity}
+            ]}
           >
             <Animated.Image
               style={[
                 this.styles.selectedIcon,
-                color && {tintColor: iconColor},
+                color && {tintColor: outline ? this.getColor() : DEFAULT_ICON_COLOR},
                 {transform: this.animationStyle.transform},
-                disabled && {tintColor: DEFAULT_ICON_COLOR}
+                disabled && {tintColor: outline ? DEFAULT_DISABLED_COLOR : DEFAULT_ICON_COLOR}
               ]}
               source={selectedIcon || Assets.icons.checkSmall}
               testID={`${testID}.selected`}
@@ -220,7 +239,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
 }
 
 function createStyles(props: CheckboxProps) {
-  const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius} = props;
+  const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius, outline, disabled} = props;
 
   return StyleSheet.create({
     container: {
@@ -232,7 +251,7 @@ function createStyles(props: CheckboxProps) {
       borderColor: color
     },
     selectedIcon: {
-      tintColor: iconColor,
+      tintColor:  disabled ? DEFAULT_DISABLED_COLOR : outline ? color : iconColor,
       alignItems: 'center',
       justifyContent: 'center'
     },