Feat/add label support to checkbox

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
-
+import {Checkbox, Assets, Text, View, Colors, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
 
 class CheckboxScreen extends Component {
   state = {
     value1: false,
     value2: false,
     value3: true,
     value4: true,
-    value5: false
+    value5: false,
+    value6: false
   };
 
   render() {
@@ -21,6 +21,14 @@ class CheckboxScreen extends Component {
               onValueChange={value1 => this.setState({value1})}
               style={{marginBottom: 20}}
             />
+            <Checkbox
+              value={this.state.value6}
+              label={'with label'}
+              labelStyle={{marginLeft: Spacings.s3}}
+              color={Colors.green20}
+              onValueChange={value6 => this.setState({value6})}
+              style={{marginBottom: 20, marginLeft: 75}}
+            />
             <Checkbox
               value={this.state.value2}
               onValueChange={value2 => this.setState({value2})}
@@ -40,7 +48,9 @@ class CheckboxScreen extends Component {
               style={{marginBottom: 20}}
             />
             <View row marginB-20>
-              <Text text70 centerV>Disabled: </Text>
+              <Text text70 centerV>
+                Disabled:{' '}
+              </Text>
               <Checkbox
                 disabled
                 value={this.state.value5}

generatedTypes/components/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
+import { StyleProp, TouchableOpacityProps, ViewStyle, TextStyle } from 'react-native';
 export interface CheckboxPropTypes extends TouchableOpacityProps {
     /**
      * The value of the Checkbox. If true the switch will be turned on. Default value is false.
@@ -33,6 +33,14 @@ export interface CheckboxPropTypes extends TouchableOpacityProps {
      * The selected icon color
      */
     iconColor?: string;
+    /**
+     * The label of the checkbox
+     */
+    label?: string;
+    /**
+     * The style of the label
+     */
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Additional styling
      */

src/components/checkbox/index.tsx

@@ -1,6 +1,15 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {Animated, Easing, StyleSheet, StyleProp, TouchableOpacityProps, ViewStyle} from 'react-native';
+import {
+  Text,
+  Animated,
+  Easing,
+  StyleSheet,
+  StyleProp,
+  TouchableOpacityProps,
+  ViewStyle,
+  TextStyle
+} from 'react-native';
 import {Colors} from '../../style';
 //@ts-ignore
 import Assets from '../../assets';
@@ -45,15 +54,23 @@ export interface CheckboxPropTypes extends TouchableOpacityProps {
    * The selected icon color
    */
   iconColor?: string;
+  /**
+   * The label of the checkbox
+   */
+  label?: string;
+  /**
+   * The style of the label
+   */
+  labelStyle?: StyleProp<TextStyle>;
   /**
    * Additional styling
    */
-  style?: StyleProp<ViewStyle>
+  style?: StyleProp<ViewStyle>;
 }
 
 interface CheckboxState {
   isChecked: Animated.Value;
-};
+}
 
 /**
  * @description: Checkbox component for toggling boolean value related to some context
@@ -155,33 +172,38 @@ class Checkbox extends Component<CheckboxPropTypes, CheckboxState> {
   }
 
   render() {
-    const {selectedIcon, color, iconColor, disabled, testID, style, ...others} = this.props;
+    const {selectedIcon, color, iconColor, disabled, testID, label, labelStyle, style, ...others} = this.props;
     return (
-      // @ts-ignore
-      <TouchableOpacity
-        {...this.getAccessibilityProps()}
-        activeOpacity={1}
-        testID={testID}
-        {...others}
-        style={[this.getBorderStyle(), style]}
-        onPress={this.onPress}
-      >
-        {
-          <Animated.View
-            style={[this.styles.container, {backgroundColor: this.getColor()}, {opacity: this.animationStyle.opacity}]}
-          >
-            <Animated.Image
+      <TouchableOpacity row onPress={this.onPress}>
+        <Animated.View
+          {...this.getAccessibilityProps()}
+          activeOpacity={1}
+          testID={testID}
+          {...others}
+          style={[this.getBorderStyle(), style]}
+        >
+          {
+            <Animated.View
               style={[
-                this.styles.selectedIcon,
-                color && {tintColor: iconColor},
-                {transform: this.animationStyle.transform},
-                disabled && {tintColor: DEFAULT_ICON_COLOR}
+                this.styles.container,
+                {backgroundColor: this.getColor()},
+                {opacity: this.animationStyle.opacity}
               ]}
-              source={selectedIcon || Assets.icons.checkSmall}
-              testID={`${testID}.selected`}
-            />
-          </Animated.View>
-        }
+            >
+              <Animated.Image
+                style={[
+                  this.styles.selectedIcon,
+                  color && {tintColor: iconColor},
+                  {transform: this.animationStyle.transform},
+                  disabled && {tintColor: DEFAULT_ICON_COLOR}
+                ]}
+                source={selectedIcon || Assets.icons.checkSmall}
+                testID={`${testID}.selected`}
+              />
+            </Animated.View>
+          }
+        </Animated.View>
+        {label && <Text style={labelStyle}>{label}</Text>}
       </TouchableOpacity>
     );
   }