Feature: CheckBox container system added.

example/src/pages/home/index.tsx

@@ -103,6 +103,8 @@ const Home = () => {
             subTitle="asfgsaf"
             isDisabled={true}
             isOptional={true}
+            spreadBehaviour="stretch"
+            isFlip={true}
         />
         <TextInput
             variant="hidden"

src/components/checkBox/index.tsx

@@ -64,6 +64,7 @@ const CheckBox: FC<ICheckBoxProps> = ({
         titleContainer: titleContainerDynamicStyle,
         optionalText: optionalTextDynamicStyle,
         container: containerDynamicStyle,
+        subTitle: subTitleDynamicStyle,
         loading: loadingDynamicStyle,
         overlay: overlayDynamicStyle,
         title: titleDynamicStyle
@@ -181,7 +182,9 @@ const CheckBox: FC<ICheckBoxProps> = ({
 
         return <Text
             style={[
-                subTitleStyle
+                subTitleStyle,
+                stylesheet.subTitle,
+                subTitleDynamicStyle
             ]}
         >
             {subTitle}
@@ -215,9 +218,11 @@ const CheckBox: FC<ICheckBoxProps> = ({
                 containerDynamicStyle
             ]}
         >
-            {renderCheckIndicator()}
+            {isFlip ? null : renderCheckIndicator()}
 
             {renderContent()}
+
+            {isFlip ? renderCheckIndicator() : null}
         </TouchableOpacity>
     );
 };

src/components/checkBox/stylesheet.ts

@@ -84,11 +84,16 @@ const stylesheet = StyleSheet.create({
 
     },
     titleContainer: {
+        justifyContent: "flex-start",
         flexDirection: "row",
         alignItems: "center"
     },
     title: {
-        margin: "0",
+        textAlign: "left",
+        margin: 0
+    },
+    subTitle: {
+        textAlign: "left"
     },
     loading: {},
     overlay: {
@@ -109,7 +114,6 @@ export const useStyles = ({
     isDisabled,
     isLoading,
     radiuses,
-    borders,
     colors,
     isFlip,
     spaces,
@@ -119,7 +123,6 @@ export const useStyles = ({
 
     const styles = {
         container: {
-            borderWidth: borders.line,
             padding: spaces.spacingSm
         } as Mutable<ViewStyle>,
         indicatorContainer: {
@@ -134,6 +137,10 @@ export const useStyles = ({
 
         } as Mutable<ViewStyle>,
         title: {
+
+        } as Mutable<TextStyle>,
+        subTitle: {
+
         } as Mutable<TextStyle>,
         loading: {
         } as Mutable<ViewStyle>,
@@ -158,17 +165,24 @@ export const useStyles = ({
 
     if (isFlip) {
         styles.contentContainer.marginRight = spaces.spacingSm;
+        styles.titleContainer.justifyContent = "flex-end";
         styles.contentContainer.marginLeft = 0;
+        styles.subTitle.textAlign = "right";
+        styles.title.textAlign = "right";
     }
 
     if (spreadBehaviour === "baseline") {
-        styles.indicatorContainer.alignSelf = spreadBehaviour;
-        styles.indicatorContainer.width = "auto";
+        styles.contentContainer.alignSelf = spreadBehaviour;
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
     } else if (spreadBehaviour === "stretch") {
-        styles.indicatorContainer.alignSelf = spreadBehaviour;
-        styles.indicatorContainer.justifyContent = "center";
-        styles.indicatorContainer.flexShrink = 1;
-        styles.indicatorContainer.width = "100%";
+        styles.contentContainer.alignSelf = spreadBehaviour;
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.contentContainer.flexShrink = 1;
+        styles.contentContainer.width = "100%";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
     }
 
     if (isDisabled) {