From 35c35f457720bda481a76c479a3209069c04f64d Mon Sep 17 00:00:00 2001
From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
Date: Wed, 13 Mar 2019 14:45:53 +0300
Subject: [PATCH] feat(ui): radio - add text support

---
 src/framework/ui/radio/radio.component.tsx    |  87 +-
 src/framework/ui/radio/radio.spec.config.ts   |  26 +
 src/framework/ui/radio/radio.spec.tsx.snap    | 868 +++++++++++-------
 .../ui/radioGroup/radioGroup.spec.config.ts   |  26 +
 .../src/ui/screen/radio.component.tsx         |  49 +-
 5 files changed, 676 insertions(+), 380 deletions(-)

diff --git a/src/framework/ui/radio/radio.component.tsx b/src/framework/ui/radio/radio.component.tsx
index 337dd019b..c01562831 100644
--- a/src/framework/ui/radio/radio.component.tsx
+++ b/src/framework/ui/radio/radio.component.tsx
@@ -1,24 +1,32 @@
 import React from 'react';
 import {
-  TouchableOpacity,
   View,
-  StyleSheet,
+  TouchableOpacity,
   TouchableOpacityProps,
   GestureResponderEvent,
+  StyleSheet,
 } from 'react-native';
 import {
+  styled,
   StyledComponentProps,
   StyleType,
   Interaction,
 } from '@kitten/theme';
+import {
+  Text as TextComponent,
+  Props as TextProps,
+} from '../text/text.component';
 
 interface RadioProps {
+  text?: string;
   checked?: boolean;
   status?: string;
   size?: string;
   onChange?: (selected: boolean) => void;
 }
 
+const Text = styled<TextComponent, TextProps>(TextComponent);
+
 export type Props = RadioProps & StyledComponentProps & TouchableOpacityProps;
 
 export class Radio extends React.Component<Props> {
@@ -46,54 +54,73 @@ export class Radio extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
-    const { select, highlight, ...container } = style;
+    const { text, select, highlight, ...container } = style;
 
     return {
-      container: {
-        ...container,
-        ...styles.container,
-      },
-      select: {
-        ...select,
-        ...styles.select,
-      },
-      highlight: {
-        ...highlight,
-        ...styles.highlight,
-      },
+      selectContainer: container,
+      select: select,
+      highlight: highlight,
+      text: text,
     };
   };
 
+  private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => {
+    const { text } = this.props;
+
+    return (
+      <Text style={[style, styles.text]} key={0}>{text}</Text>
+    );
+  };
+
+  private renderComponentChildren = (style: StyleType): React.ReactNode => {
+    const { text } = this.props;
+
+    return [
+      text ? this.renderTextElement(style.text) : undefined,
+    ];
+  };
+
   public render(): React.ReactElement<TouchableOpacityProps> {
-    const { themedStyle, ...derivedProps } = this.props;
-    const { container, select, highlight } = this.getComponentStyle(themedStyle);
+    const { style, themedStyle, ...derivedProps } = this.props;
+    const { selectContainer, select, highlight, ...componentStyles } = this.getComponentStyle(themedStyle);
+    const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyles);
 
     return (
-      <TouchableOpacity
-        {...derivedProps}
-        activeOpacity={1.0}
-        onPress={this.onPress}
-        onPressIn={this.onPressIn}
-        onPressOut={this.onPressOut}>
-        <View style={styles.container}>
-          <View style={highlight}/>
-          <View style={container}>
-            <View style={select}/>
-          </View>
+      <View style={[style, styles.container]}>
+        <View style={styles.highlightContainer}>
+          <View style={[highlight, styles.highlight]}/>
+          <TouchableOpacity
+            {...derivedProps}
+            style={[selectContainer, styles.selectContainer]}
+            activeOpacity={1.0}
+            onPress={this.onPress}
+            onPressIn={this.onPressIn}
+            onPressOut={this.onPressOut}>
+            <View style={[select, styles.select]}/>
+          </TouchableOpacity>
         </View>
-      </TouchableOpacity>
+        {componentChildren}
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  highlightContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  selectContainer: {
     justifyContent: 'center',
     alignItems: 'center',
   },
   select: {},
   highlight: {
     position: 'absolute',
-    alignSelf: 'center',
   },
+  text: {},
 });
diff --git a/src/framework/ui/radio/radio.spec.config.ts b/src/framework/ui/radio/radio.spec.config.ts
index cb7281d2c..2e6cd7296 100644
--- a/src/framework/ui/radio/radio.spec.config.ts
+++ b/src/framework/ui/radio/radio.spec.config.ts
@@ -68,6 +68,10 @@ export const mapping: ThemeMappingType = {
         'mapping': {
           'borderWidth': 2,
           'borderColor': 'gray-primary',
+          'text': {
+            'color': 'text-primary',
+            'fontWeight': '500',
+          },
           'select': {
             'backgroundColor': 'transparent',
           },
@@ -89,6 +93,9 @@ export const mapping: ThemeMappingType = {
             },
             'disabled': {
               'borderColor': 'gray-light',
+              'text': {
+                'color': 'gray-300',
+              },
             },
             'checked.active': {
               'borderColor': 'blue-dark',
@@ -132,6 +139,10 @@ export const mapping: ThemeMappingType = {
                 'height': 50,
                 'borderRadius': 25,
               },
+              'text': {
+                'marginLeft': 10,
+                'fontSize': 14,
+              },
             },
             'medium': {
               'width': 36,
@@ -147,6 +158,10 @@ export const mapping: ThemeMappingType = {
                 'height': 60,
                 'borderRadius': 30,
               },
+              'text': {
+                'marginLeft': 12,
+                'fontSize': 16,
+              },
             },
             'large': {
               'width': 42,
@@ -162,6 +177,10 @@ export const mapping: ThemeMappingType = {
                 'height': 70,
                 'borderRadius': 35,
               },
+              'text': {
+                'marginLeft': 14,
+                'fontSize': 18,
+              },
             },
           },
         },
@@ -178,4 +197,11 @@ export const theme: ThemeType = {
   'gray-dark': '#8992A3',
   'gray-highlight': '#EDF0F5',
   'pink-primary': '#FF3D71',
+  'text-primary': '#000000',
+  'text-primary-inverse': '#ffffff',
+
+  'gray-100': '#f7f8fa',
+  'gray-200': '#edf0f5',
+  'gray-300': '#c8cedb',
+  'gray-400': '#a6aebd',
 };
diff --git a/src/framework/ui/radio/radio.spec.tsx.snap b/src/framework/ui/radio/radio.spec.tsx.snap
index 3d507afbe..f30ae1833 100644
--- a/src/framework/ui/radio/radio.spec.tsx.snap
+++ b/src/framework/ui/radio/radio.spec.tsx.snap
@@ -1,23 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`@radio: matches snapshot active 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -30,63 +22,87 @@ exports[`@radio: matches snapshot active 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "#DDE1EB",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#DDE1EB",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#8992A3",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#8992A3",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "transparent",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
 
 exports[`@radio: matches snapshot active checked 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  checked={true}
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -99,63 +115,88 @@ exports[`@radio: matches snapshot active checked 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "#DDE1EB",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#DDE1EB",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      checked={true}
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#3366FF",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#3366FF",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "#3366FF",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "#3366FF",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
 
 exports[`@radio: matches snapshot active checked: checked 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  checked={true}
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -168,62 +209,88 @@ exports[`@radio: matches snapshot active checked: checked 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      checked={true}
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#3366FF",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#3366FF",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "#3366FF",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "#3366FF",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
 
 exports[`@radio: matches snapshot active: default 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -236,63 +303,87 @@ exports[`@radio: matches snapshot active: default 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#A6AEBD",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#A6AEBD",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "transparent",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
 
 exports[`@radio: matches snapshot checked 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  checked={true}
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -305,64 +396,88 @@ exports[`@radio: matches snapshot checked 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      checked={true}
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#3366FF",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#3366FF",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "#3366FF",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "#3366FF",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
 
 exports[`@radio: matches snapshot checked disabled 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  checked={true}
-  disabled={true}
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -375,62 +490,89 @@ exports[`@radio: matches snapshot checked disabled 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      checked={true}
+      disabled={true}
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#DDE1EB",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#DDE1EB",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "#A6AEBD",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "#A6AEBD",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
 
 exports[`@radio: matches snapshot default 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -443,63 +585,87 @@ exports[`@radio: matches snapshot default 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#A6AEBD",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#A6AEBD",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "transparent",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
 
 exports[`@radio: matches snapshot disabled 1`] = `
-<TouchableOpacity
-  activeOpacity={1}
-  appearance="default"
-  disabled={true}
-  dispatch={[Function]}
-  onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
-    }
+<View
+  style={
+    Array [
+      undefined,
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+    ]
   }
 >
   <View
@@ -512,40 +678,74 @@ exports[`@radio: matches snapshot disabled 1`] = `
   >
     <View
       style={
-        Object {
-          "alignSelf": "center",
-          "backgroundColor": "transparent",
-          "borderRadius": 30,
-          "height": 60,
-          "position": "absolute",
-          "width": 60,
-        }
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderRadius": 30,
+            "height": 60,
+            "width": 60,
+          },
+          Object {
+            "position": "absolute",
+          },
+        ]
       }
     />
-    <View
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      disabled={true}
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
       style={
+        Array [
+          Object {
+            "borderColor": "#DDE1EB",
+            "borderRadius": 18,
+            "borderWidth": 2,
+            "height": 36,
+            "width": 36,
+          },
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+          },
+        ]
+      }
+      theme={
         Object {
-          "alignItems": "center",
-          "borderColor": "#DDE1EB",
-          "borderRadius": 18,
-          "borderWidth": 2,
-          "height": 36,
-          "justifyContent": "center",
-          "width": 36,
+          "blue-dark": "#2541CC",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
         }
       }
     >
       <View
         style={
-          Object {
-            "backgroundColor": "transparent",
-            "borderRadius": 12,
-            "height": 24,
-            "width": 24,
-          }
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderRadius": 12,
+              "height": 24,
+              "width": 24,
+            },
+            Object {},
+          ]
         }
       />
-    </View>
+    </TouchableOpacity>
   </View>
-</TouchableOpacity>
+</View>
 `;
diff --git a/src/framework/ui/radioGroup/radioGroup.spec.config.ts b/src/framework/ui/radioGroup/radioGroup.spec.config.ts
index 9f9791967..24e62870e 100644
--- a/src/framework/ui/radioGroup/radioGroup.spec.config.ts
+++ b/src/framework/ui/radioGroup/radioGroup.spec.config.ts
@@ -68,6 +68,10 @@ export const mapping: ThemeMappingType = {
         'mapping': {
           'borderWidth': 2,
           'borderColor': 'gray-primary',
+          'text': {
+            'color': 'text-primary',
+            'fontWeight': '500',
+          },
           'select': {
             'backgroundColor': 'transparent',
           },
@@ -89,6 +93,9 @@ export const mapping: ThemeMappingType = {
             },
             'disabled': {
               'borderColor': 'gray-light',
+              'text': {
+                'color': 'gray-300',
+              },
             },
             'checked.active': {
               'borderColor': 'blue-dark',
@@ -132,6 +139,10 @@ export const mapping: ThemeMappingType = {
                 'height': 50,
                 'borderRadius': 25,
               },
+              'text': {
+                'marginLeft': 10,
+                'fontSize': 14,
+              },
             },
             'medium': {
               'width': 36,
@@ -147,6 +158,10 @@ export const mapping: ThemeMappingType = {
                 'height': 60,
                 'borderRadius': 30,
               },
+              'text': {
+                'marginLeft': 12,
+                'fontSize': 16,
+              },
             },
             'large': {
               'width': 42,
@@ -162,6 +177,10 @@ export const mapping: ThemeMappingType = {
                 'height': 70,
                 'borderRadius': 35,
               },
+              'text': {
+                'marginLeft': 14,
+                'fontSize': 18,
+              },
             },
           },
         },
@@ -202,4 +221,11 @@ export const theme: ThemeType = {
   'gray-dark': '#8992A3',
   'gray-highlight': '#EDF0F5',
   'pink-primary': '#FF3D71',
+  'text-primary': '#000000',
+  'text-primary-inverse': '#ffffff',
+
+  'gray-100': '#f7f8fa',
+  'gray-200': '#edf0f5',
+  'gray-300': '#c8cedb',
+  'gray-400': '#a6aebd',
 };
diff --git a/src/playground/src/ui/screen/radio.component.tsx b/src/playground/src/ui/screen/radio.component.tsx
index f4bb7a235..82cdbbc62 100644
--- a/src/playground/src/ui/screen/radio.component.tsx
+++ b/src/playground/src/ui/screen/radio.component.tsx
@@ -20,6 +20,8 @@ interface State {
   isRadio4Checked: boolean;
 }
 
+const STATUS: string = '';
+
 class Radio extends React.Component<Props, State> {
 
   static navigationOptions = {
@@ -58,68 +60,80 @@ class Radio extends React.Component<Props, State> {
             <RadioComponent
               style={this.props.themedStyle.component}
               checked={this.state.isRadio1Checked}
+              status={STATUS}
               onChange={this.onRadio1Change}
             />
             <RadioComponent
               style={this.props.themedStyle.component}
               checked={this.state.isRadio2Checked}
+              status={STATUS}
               onChange={this.onRadio2Change}
             />
             <RadioComponent
               style={this.props.themedStyle.component}
               checked={this.state.isRadio3Checked}
               disabled={true}
+              status={STATUS}
               onChange={this.onRadio3Change}
             />
             <RadioComponent
               style={this.props.themedStyle.component}
               checked={this.state.isRadio4Checked}
               disabled={true}
+              status={STATUS}
               onChange={this.onRadio4Change}
             />
           </View>
         </View>
         <View style={this.props.themedStyle.containerSection}>
-          <Text style={this.props.themedStyle.textDescription}>Error</Text>
+          <Text style={this.props.themedStyle.textDescription}>Size</Text>
           <View style={this.props.themedStyle.containerPreview}>
             <RadioComponent
-              status='error'
-              style={this.props.themedStyle.component}
-            />
-            <RadioComponent
-              status='error'
               style={this.props.themedStyle.component}
               checked={true}
+              status={STATUS}
+              size='large'
             />
             <RadioComponent
-              status='error'
               style={this.props.themedStyle.component}
-              disabled={true}
+              checked={true}
+              status={STATUS}
+              size='medium'
             />
             <RadioComponent
-              status='error'
               style={this.props.themedStyle.component}
               checked={true}
-              disabled={true}
+              status={STATUS}
+              size='small'
             />
           </View>
         </View>
         <View style={this.props.themedStyle.containerSection}>
-          <Text style={this.props.themedStyle.textDescription}>Size</Text>
-          <View style={this.props.themedStyle.containerPreview}>
+          <Text style={this.props.themedStyle.textDescription}>Text</Text>
+          <View style={this.props.themedStyle.containerPreviewColumn}>
             <RadioComponent
-              size='large'
               style={this.props.themedStyle.component}
-              checked={true}
+              status={STATUS}
+              text='Place your text'
             />
             <RadioComponent
               style={this.props.themedStyle.component}
               checked={true}
+              status={STATUS}
+              text='Place your text'
+            />
+            <RadioComponent
+              style={this.props.themedStyle.component}
+              disabled={true}
+              status={STATUS}
+              text='Place your text'
             />
             <RadioComponent
-              size='small'
               style={this.props.themedStyle.component}
               checked={true}
+              disabled={true}
+              status={STATUS}
+              text='Place your text'
             />
           </View>
         </View>
@@ -141,10 +155,13 @@ export const RadioScreen = withStyles(Radio, (theme: ThemeType) => ({
     alignItems: 'center',
     marginTop: 4,
   },
+  containerPreviewColumn: {
+    marginTop: 4,
+  },
   textDescription: {
     fontSize: 18,
   },
   component: {
-    marginHorizontal: 4,
+    margin: 4,
   },
 }));