From 9e57594268bf69224bf6e8fc50e87827e7d1c135 Mon Sep 17 00:00:00 2001
From: Yauhen <e.penkin@akveo.com>
Date: Tue, 30 Apr 2019 13:35:33 +0300
Subject: [PATCH] feat(ui): props for inline styling add (#379)

---
 .../bottomNavigation.component.tsx            |   5 +
 .../bottomNavigation.spec.tsx                 |  16 +-
 .../bottomNavigation.spec.tsx.snap            | 148 +++++++++++-
 .../bottomNavigationTab.component.tsx         |   6 +
 .../ui/checkbox/checkbox.component.tsx        |  11 +-
 src/framework/ui/checkbox/checkbox.spec.tsx   |   1 +
 .../ui/checkbox/checkbox.spec.tsx.snap        |  10 +-
 src/framework/ui/input/input.component.tsx    |  29 ++-
 src/framework/ui/input/input.spec.tsx         |  26 +++
 src/framework/ui/input/input.spec.tsx.snap    | 218 ++++++++++++++++++
 src/framework/ui/list/list.spec.tsx           |  27 ++-
 src/framework/ui/list/list.spec.tsx.snap      | 213 ++++++++++++++++-
 src/framework/ui/list/listItem.component.tsx  |   8 +
 .../ui/overflowMenu/overflowMenu.spec.tsx     |   1 +
 .../overflowMenu/overflowMenu.spec.tsx.snap   |  20 ++
 .../overflowMenuItem.component.tsx            |   7 +-
 src/framework/ui/radio/radio.component.tsx    |  12 +-
 src/framework/ui/radio/radio.spec.tsx         |  10 +
 src/framework/ui/radio/radio.spec.tsx.snap    | 192 +++++++++++++++
 src/framework/ui/tab/tab.component.tsx        |  10 +-
 src/framework/ui/tab/tab.spec.tsx             |  16 ++
 src/framework/ui/tab/tab.spec.tsx.snap        | 145 ++++++++++++
 src/framework/ui/tab/tabBar.component.tsx     |   5 +
 src/framework/ui/tab/tabView.component.tsx    |  13 +-
 .../ui/tooltip/tooltip.component.tsx          |   5 +
 .../topNavigation/topNavigation.component.tsx |  15 +-
 .../ui/topNavigation/topNavigation.spec.tsx   |  15 ++
 .../topNavigation/topNavigation.spec.tsx.snap | 188 +++++++++++++++
 .../ui/screen/bottomNavigation.component.tsx  |   6 +
 .../src/ui/screen/overflowMenu.component.tsx  |   3 +-
 .../src/ui/screen/tooltip.component.tsx       |  13 +-
 31 files changed, 1350 insertions(+), 44 deletions(-)

diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
index b1e9ce509..9a6b0b59a 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
+++ b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
@@ -4,6 +4,8 @@ import {
   View,
   ViewProps,
   StyleSheet,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -20,6 +22,7 @@ type ChildElement = React.ReactElement<TabProps>;
 interface TabNavigatorProps {
   children: ChildElement | ChildElement[];
   selectedIndex?: number;
+  indicatorStyle?: StyleProp<ViewStyle>;
   onSelect?: (index: number) => void;
 }
 
@@ -34,6 +37,7 @@ export class BottomNavigation extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
+    const { indicatorStyle } = this.props;
     const { indicatorHeight, indicatorBackgroundColor, ...containerStyle } = style;
 
     return {
@@ -44,6 +48,7 @@ export class BottomNavigation extends React.Component<Props> {
       indicator: {
         height: indicatorHeight,
         backgroundColor: indicatorBackgroundColor,
+        ...StyleSheet.flatten(indicatorStyle),
         ...styles.indicator,
       },
     };
diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx
index 02035af5d..570343204 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx
+++ b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx
@@ -100,6 +100,19 @@ describe('@bottom-navigation-tab: component checks', () => {
     expect(output).toMatchSnapshot();
   });
 
+  it('* text (styled)', () => {
+    const component: RenderAPI = render(
+      <Mock
+        title='Test'
+        titleStyle={{ fontSize: 22, color: 'yellow' }}
+      />,
+    );
+
+    const { output } = shallow(component.getByType(BottomNavigatorTabComponent));
+
+    expect(output).toMatchSnapshot();
+  });
+
 });
 
 describe('@bottom-navigation: component checks', () => {
@@ -133,8 +146,9 @@ describe('@bottom-navigation: component checks', () => {
   });
 
   it('* with routes', () => {
+    const indicatorStyle: StyleType = { backgroundColor: 'red' };
     const component: RenderAPI = render(
-      <Mock>
+      <Mock indicatorStyle={indicatorStyle}>
         <ChildMock
           title='Screen 1'
           selected={false}
diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap
index e6c037f28..efcbbac75 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap
+++ b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap
@@ -316,6 +316,11 @@ exports[`@bottom-navigation: component checks * with routes 1`] = `
 <View
   appearance="default"
   dispatch={[Function]}
+  indicatorStyle={
+    Object {
+      "backgroundColor": "red",
+    }
+  }
   selectedIndex={0}
   style={
     Array [
@@ -448,7 +453,7 @@ exports[`@bottom-navigation: component checks * with routes 1`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#3366FF",
+          "backgroundColor": "red",
           "height": 4,
           "position": "absolute",
         },
@@ -611,6 +616,147 @@ exports[`@bottom-navigation-tab: component checks * empty 1`] = `
 />
 `;
 
+exports[`@bottom-navigation-tab: component checks * text (styled) 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  onPress={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-pitch-dark": "#0D1C2E",
+      "blue-primary": "#3366FF",
+      "color-basic-100": "#F7F8FA",
+      "color-basic-200": "#EDF0F5",
+      "color-basic-300": "#DDE1EB",
+      "color-basic-400": "#C8CEDB",
+      "color-basic-500": "#A6AEBD",
+      "color-basic-600": "#8992A3",
+      "color-basic-700": "#6A7385",
+      "color-basic-800": "#4B5466",
+      "color-basic-900": "#2C3547",
+      "color-black": "#0D1C2E",
+      "color-danger-100": "#FFF2F2",
+      "color-danger-200": "#FFD6D9",
+      "color-danger-300": "#FFA8B4",
+      "color-danger-400": "#FF708D",
+      "color-danger-500": "#FF3D71",
+      "color-danger-600": "#DB2C66",
+      "color-danger-700": "#B81D5B",
+      "color-danger-800": "#94124E",
+      "color-danger-900": "#700940",
+      "color-info-100": "#F2F8FF",
+      "color-info-200": "#C7E2FF",
+      "color-info-300": "#94CBFF",
+      "color-info-400": "#42AAFF",
+      "color-info-500": "#0095FF",
+      "color-info-600": "#006FD6",
+      "color-info-700": "#0057C2",
+      "color-info-800": "#0041A8",
+      "color-info-900": "#002885",
+      "color-primary-100": "#F2F6FF",
+      "color-primary-200": "#D9E4FF",
+      "color-primary-300": "#A6C1FF",
+      "color-primary-400": "#598BFF",
+      "color-primary-500": "#3366FF",
+      "color-primary-600": "#284DE0",
+      "color-primary-700": "#2541CC",
+      "color-primary-800": "#192F9E",
+      "color-primary-900": "#14236E",
+      "color-secondary-100": "#F7F2FF",
+      "color-secondary-200": "#E0D1FF",
+      "color-secondary-300": "#C5A8FF",
+      "color-secondary-400": "#A375FF",
+      "color-secondary-500": "#884DFF",
+      "color-secondary-600": "#6A39DB",
+      "color-secondary-700": "#4F28B8",
+      "color-secondary-800": "#371B94",
+      "color-secondary-900": "#26117A",
+      "color-success-100": "#EDFFF3",
+      "color-success-200": "#B3FFD6",
+      "color-success-300": "#8CFAC7",
+      "color-success-400": "#51F0B0",
+      "color-success-500": "#00E096",
+      "color-success-600": "#00B383",
+      "color-success-700": "#008F72",
+      "color-success-800": "#007566",
+      "color-success-900": "#00524C",
+      "color-tertiary-100": "#FFDED6",
+      "color-tertiary-200": "#FFDED6",
+      "color-tertiary-300": "#FFDED6",
+      "color-tertiary-400": "#FFDED6",
+      "color-tertiary-500": "#FFDED6",
+      "color-tertiary-600": "#FFDED6",
+      "color-tertiary-700": "#FFDED6",
+      "color-tertiary-800": "#FFDED6",
+      "color-tertiary-900": "#FFDED6",
+      "color-warning-100": "#FFFDF2",
+      "color-warning-200": "#FFF1C2",
+      "color-warning-300": "#FFE59E",
+      "color-warning-400": "#FFC94D",
+      "color-warning-500": "#FFAA00",
+      "color-warning-600": "#DB8B00",
+      "color-warning-700": "#B86E00",
+      "color-warning-800": "#945400",
+      "color-warning-900": "#703C00",
+      "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
+      "font-primary-color": "#0D1C2E",
+      "font-primary-disabled-color": "#C8CEDB",
+      "font-primary-family": "",
+      "font-primary-regular-text-line-height": 16,
+      "font-primary-regular-text-size": 14,
+      "font-primary-regular-text-weight": "600",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "opacity-transparent": "transparent",
+      "outline-color": "#DDE1EB",
+      "outline-disabled-color": "transparent",
+      "outline-disabled-width": 0,
+      "outline-width": 11,
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="Test"
+  titleStyle={
+    Object {
+      "color": "yellow",
+      "fontSize": 22,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "yellow",
+        "fontSize": 22,
+        "fontWeight": "600",
+        "lineHeight": 16,
+        "marginVertical": 4,
+      }
+    }
+  >
+    Test
+  </Text>
+</TouchableOpacity>
+`;
+
 exports[`@bottom-navigation-tab: component checks * text/selected 1`] = `
 <TouchableOpacity
   activeOpacity={1}
diff --git a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
index 2f9f438ce..b1f20d335 100644
--- a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
+++ b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
@@ -6,6 +6,8 @@ import {
   ImageProps,
   TextProps,
   TouchableOpacityProps,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -14,6 +16,7 @@ import {
 
 interface BottomNavigatorTabProps {
   title?: string;
+  titleStyle?: StyleProp<TextStyle>;
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   selected?: boolean;
   onSelect?: (selected: boolean) => void;
@@ -32,6 +35,7 @@ export class BottomNavigationTab extends React.Component<Props> {
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
+    const { style, titleStyle } = this.props;
     const {
       iconWidth,
       iconHeight,
@@ -48,6 +52,7 @@ export class BottomNavigationTab extends React.Component<Props> {
     return {
       container: {
         ...containerStyle,
+        ...StyleSheet.flatten(style),
         ...styles.container,
       },
       icon: {
@@ -63,6 +68,7 @@ export class BottomNavigationTab extends React.Component<Props> {
         lineHeight: textLineHeight,
         fontWeight: textFontWeight,
         color: textColor,
+        ...StyleSheet.flatten(titleStyle),
         ...styles.text,
       },
     };
diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx
index 532f64403..418231ad3 100644
--- a/src/framework/ui/checkbox/checkbox.component.tsx
+++ b/src/framework/ui/checkbox/checkbox.component.tsx
@@ -14,17 +14,15 @@ import {
   styled,
   StyledComponentProps,
   StyleType,
-  allWithRest,
 } from '@kitten/theme';
 import {
   Props as TextProps,
   Text as TextComponent,
 } from '../text/text.component';
 import { CheckMark } from '../drawable';
-import { TextStyleProps } from '../common/props';
 
 interface CheckBoxProps {
-  style?: StyleProp<TextStyle>;
+  textStyle?: StyleProp<TextStyle>;
   text?: string;
   checked?: boolean;
   indeterminate?: boolean;
@@ -66,8 +64,7 @@ export class CheckBox extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
-    const derivedStyle: TextStyle = StyleSheet.flatten(this.props.style);
-    const { rest: derivedContainerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps);
+    const { style: containerStyle, textStyle } = this.props;
 
     const {
       textMarginHorizontal,
@@ -88,7 +85,7 @@ export class CheckBox extends React.Component<Props> {
 
     return {
       container: {
-        ...derivedContainerStyle,
+        ...StyleSheet.flatten(containerStyle),
         ...styles.container,
       },
       highlightContainer: styles.highlightContainer,
@@ -103,7 +100,7 @@ export class CheckBox extends React.Component<Props> {
         fontWeight: textFontWeight,
         lineHeight: textLineHeight,
         ...styles.text,
-        ...derivedTextStyle,
+        ...StyleSheet.flatten(textStyle),
       },
       icon: {
         width: iconWidth,
diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx b/src/framework/ui/checkbox/checkbox.spec.tsx
index f93b4c005..554ae9103 100644
--- a/src/framework/ui/checkbox/checkbox.spec.tsx
+++ b/src/framework/ui/checkbox/checkbox.spec.tsx
@@ -84,6 +84,7 @@ describe('@checkbox matches snapshots', () => {
     const component: RenderAPI = renderComponent({
       checked: true,
       text: text,
+      textStyle: { fontSize: 18, color: 'red' },
     });
     const { output } = shallow(component.getByType(CheckBoxComponent));
     expect(component.getByType(TextComponent).props.children).toBe(text);
diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx.snap b/src/framework/ui/checkbox/checkbox.spec.tsx.snap
index 3f9f17cad..94811b85b 100644
--- a/src/framework/ui/checkbox/checkbox.spec.tsx.snap
+++ b/src/framework/ui/checkbox/checkbox.spec.tsx.snap
@@ -765,6 +765,12 @@ exports[`@checkbox matches snapshots * with text 1`] = `
           "width": 24,
         }
       }
+      textStyle={
+        Object {
+          "color": "red",
+          "fontSize": 18,
+        }
+      }
       theme={
         Object {
           "blue-dark": "#2541CC",
@@ -889,8 +895,8 @@ exports[`@checkbox matches snapshots * with text 1`] = `
   <ForwardRef(WrappingElement)
     style={
       Object {
-        "color": "#0D1C2E",
-        "fontSize": 13,
+        "color": "red",
+        "fontSize": 18,
         "fontWeight": "600",
         "lineHeight": 24,
         "marginHorizontal": 12,
diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx
index 0ddc82018..b090e0149 100644
--- a/src/framework/ui/input/input.component.tsx
+++ b/src/framework/ui/input/input.component.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   ImageProps,
+  StyleProp,
   StyleSheet,
   TextInput,
   TextInputProps,
@@ -22,10 +23,7 @@ import {
   Text as TextComponent,
   Props as TextProps,
 } from '../text/text.component';
-import {
-  TextStyleProps,
-  FlexStyleProps,
-} from '../common/props';
+import { FlexStyleProps } from '../common/props';
 
 type IconElement = React.ReactElement<ImageProps>;
 type TextElement = React.ReactElement<TextProps>;
@@ -38,6 +36,9 @@ interface InputProps {
   caption?: string;
   captionIcon?: IconProp;
   icon?: IconProp;
+  textStyle?: StyleProp<TextStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  captionTextStyle?: StyleProp<TextStyle>;
 }
 
 export type Props = InputProps & StyledComponentProps & TextInputProps;
@@ -65,9 +66,17 @@ export class Input extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
-    const derivedStyle: TextStyle = StyleSheet.flatten(this.props.style);
-    const { rest: containerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps);
-    const { rest: inputContainerStyle, ...derivedContainerStyle } = allWithRest(containerStyle, FlexStyleProps);
+    const {
+      style: derivedContainerStyle,
+      textStyle,
+      labelStyle,
+      captionTextStyle,
+    } = this.props;
+
+    const {
+      rest: inputContainerStyle,
+      ...containerStyle
+    } = allWithRest(StyleSheet.flatten(derivedContainerStyle), FlexStyleProps);
 
     const {
       textMarginHorizontal,
@@ -98,7 +107,7 @@ export class Input extends React.Component<Props> {
     return {
       container: {
         ...styles.container,
-        ...derivedContainerStyle,
+        ...containerStyle,
       },
       inputContainer: {
         ...containerParameters,
@@ -114,7 +123,7 @@ export class Input extends React.Component<Props> {
         fontSize: textFontSize,
         lineHeight: textLineHeight,
         color: textColor,
-        ...derivedTextStyle,
+        ...StyleSheet.flatten(textStyle),
         ...styles.text,
       },
       icon: {
@@ -130,6 +139,7 @@ export class Input extends React.Component<Props> {
         lineHeight: labelLineHeight,
         marginBottom: labelMarginBottom,
         fontWeight: labelFontWeight,
+        ...StyleSheet.flatten(labelStyle),
         ...styles.label,
       },
       captionIcon: {
@@ -144,6 +154,7 @@ export class Input extends React.Component<Props> {
         fontWeight: captionTextFontWeight,
         lineHeight: captionTextLineHeight,
         color: captionTextColor,
+        ...StyleSheet.flatten(captionTextStyle),
         ...styles.captionLabel,
       },
     };
diff --git a/src/framework/ui/input/input.spec.tsx b/src/framework/ui/input/input.spec.tsx
index 9d68e1662..90f0240b3 100644
--- a/src/framework/ui/input/input.spec.tsx
+++ b/src/framework/ui/input/input.spec.tsx
@@ -101,6 +101,32 @@ describe('@input: matches snapshot', () => {
       expect(output).toMatchSnapshot();
     });
 
+    it('* text styled', () => {
+      const captionIcon = (style: StyleType): React.ReactElement<ImageProps> => {
+        return (
+          <Image
+            style={style}
+            source={iconSource}
+          />
+        );
+      };
+      const label: string = 'Label';
+      const caption: string = 'Caption Text';
+
+      const component: RenderAPI = renderComponent({
+        label,
+        caption,
+        captionIcon,
+        textStyle: { fontSize: 24, lineHeight: 26 },
+        labelStyle: { color: 'blue' },
+        captionTextStyle: { letterSpacing: 8, fontFamily: 'opensans-bold' },
+      });
+
+      const { output } = shallow(component.getByType(InputComponent));
+
+      expect(output).toMatchSnapshot();
+    });
+
   });
 
 });
diff --git a/src/framework/ui/input/input.spec.tsx.snap b/src/framework/ui/input/input.spec.tsx.snap
index b156078f3..427b379ca 100644
--- a/src/framework/ui/input/input.spec.tsx.snap
+++ b/src/framework/ui/input/input.spec.tsx.snap
@@ -372,6 +372,224 @@ exports[`@input: matches snapshot * appearance * label + caption 1`] = `
 </View>
 `;
 
+exports[`@input: matches snapshot * appearance * text styled 1`] = `
+<View
+  style={Object {}}
+>
+  <ForwardRef(WrappingElement)
+    style={
+      Object {
+        "color": "blue",
+        "fontSize": 12,
+        "fontWeight": "700",
+        "lineHeight": 16,
+        "marginBottom": 4,
+      }
+    }
+  >
+    Label
+  </ForwardRef(WrappingElement)>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#F7F8FA",
+        "borderColor": "transparent",
+        "borderRadius": 8,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "paddingHorizontal": 8,
+        "paddingVertical": 8,
+        "width": "100%",
+      }
+    }
+  >
+    <TextInput
+      allowFontScaling={true}
+      appearance="default"
+      captionTextStyle={
+        Object {
+          "fontFamily": "opensans-bold",
+          "letterSpacing": 8,
+        }
+      }
+      dispatch={[Function]}
+      editable={true}
+      labelStyle={
+        Object {
+          "color": "blue",
+        }
+      }
+      onEndEditing={[Function]}
+      onFocus={[Function]}
+      status="primary"
+      style={
+        Object {
+          "color": "#8992A3",
+          "flexBasis": "auto",
+          "flexGrow": 1,
+          "flexShrink": 1,
+          "fontSize": 24,
+          "lineHeight": 26,
+          "marginHorizontal": 8,
+        }
+      }
+      textStyle={
+        Object {
+          "fontSize": 24,
+          "lineHeight": 26,
+        }
+      }
+      theme={
+        Object {
+          "blue-dark": "#2541CC",
+          "blue-pitch-dark": "#0D1C2E",
+          "blue-primary": "#3366FF",
+          "color-basic-100": "#F7F8FA",
+          "color-basic-200": "#EDF0F5",
+          "color-basic-300": "#DDE1EB",
+          "color-basic-400": "#C8CEDB",
+          "color-basic-500": "#A6AEBD",
+          "color-basic-600": "#8992A3",
+          "color-basic-700": "#6A7385",
+          "color-basic-800": "#4B5466",
+          "color-basic-900": "#2C3547",
+          "color-black": "#0D1C2E",
+          "color-danger-100": "#FFF2F2",
+          "color-danger-200": "#FFD6D9",
+          "color-danger-300": "#FFA8B4",
+          "color-danger-400": "#FF708D",
+          "color-danger-500": "#FF3D71",
+          "color-danger-600": "#DB2C66",
+          "color-danger-700": "#B81D5B",
+          "color-danger-800": "#94124E",
+          "color-danger-900": "#700940",
+          "color-info-100": "#F2F8FF",
+          "color-info-200": "#C7E2FF",
+          "color-info-300": "#94CBFF",
+          "color-info-400": "#42AAFF",
+          "color-info-500": "#0095FF",
+          "color-info-600": "#006FD6",
+          "color-info-700": "#0057C2",
+          "color-info-800": "#0041A8",
+          "color-info-900": "#002885",
+          "color-primary-100": "#F2F6FF",
+          "color-primary-200": "#D9E4FF",
+          "color-primary-300": "#A6C1FF",
+          "color-primary-400": "#598BFF",
+          "color-primary-500": "#3366FF",
+          "color-primary-600": "#284DE0",
+          "color-primary-700": "#2541CC",
+          "color-primary-800": "#192F9E",
+          "color-primary-900": "#14236E",
+          "color-secondary-100": "#F7F2FF",
+          "color-secondary-200": "#E0D1FF",
+          "color-secondary-300": "#C5A8FF",
+          "color-secondary-400": "#A375FF",
+          "color-secondary-500": "#884DFF",
+          "color-secondary-600": "#6A39DB",
+          "color-secondary-700": "#4F28B8",
+          "color-secondary-800": "#371B94",
+          "color-secondary-900": "#26117A",
+          "color-success-100": "#EDFFF3",
+          "color-success-200": "#B3FFD6",
+          "color-success-300": "#8CFAC7",
+          "color-success-400": "#51F0B0",
+          "color-success-500": "#00E096",
+          "color-success-600": "#00B383",
+          "color-success-700": "#008F72",
+          "color-success-800": "#007566",
+          "color-success-900": "#00524C",
+          "color-tertiary-100": "#FFDED6",
+          "color-tertiary-200": "#FFDED6",
+          "color-tertiary-300": "#FFDED6",
+          "color-tertiary-400": "#FFDED6",
+          "color-tertiary-500": "#FFDED6",
+          "color-tertiary-600": "#FFDED6",
+          "color-tertiary-700": "#FFDED6",
+          "color-tertiary-800": "#FFDED6",
+          "color-tertiary-900": "#FFDED6",
+          "color-warning-100": "#FFFDF2",
+          "color-warning-200": "#FFF1C2",
+          "color-warning-300": "#FFE59E",
+          "color-warning-400": "#FFC94D",
+          "color-warning-500": "#FFAA00",
+          "color-warning-600": "#DB8B00",
+          "color-warning-700": "#B86E00",
+          "color-warning-800": "#945400",
+          "color-warning-900": "#703C00",
+          "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
+          "font-primary-color": "#0D1C2E",
+          "font-primary-disabled-color": "#C8CEDB",
+          "font-primary-family": "",
+          "font-primary-regular-text-line-height": 16,
+          "font-primary-regular-text-size": 14,
+          "font-primary-regular-text-weight": "600",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "opacity-transparent": "transparent",
+          "outline-color": "#DDE1EB",
+          "outline-disabled-color": "transparent",
+          "outline-disabled-width": 0,
+          "outline-width": 11,
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
+        }
+      }
+      underlineColorAndroid="transparent"
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "marginTop": 4,
+      }
+    }
+  >
+    <Component
+      source={
+        Object {
+          "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+        }
+      }
+      style={
+        Object {
+          "height": 10,
+          "marginRight": 8,
+          "tintColor": "#A6AEBD",
+          "width": 10,
+        }
+      }
+    />
+    <ForwardRef(WrappingElement)
+      style={
+        Object {
+          "color": "#8992A3",
+          "fontFamily": "opensans-bold",
+          "fontSize": 11,
+          "fontWeight": "normal",
+          "letterSpacing": 8,
+          "lineHeight": 16,
+        }
+      }
+    >
+      Caption Text
+    </ForwardRef(WrappingElement)>
+  </View>
+</View>
+`;
+
 exports[`@input: matches snapshot * interaction * stateless 1`] = `
 <View
   style={Object {}}
diff --git a/src/framework/ui/list/list.spec.tsx b/src/framework/ui/list/list.spec.tsx
index a5c93c33f..c5a26a5be 100644
--- a/src/framework/ui/list/list.spec.tsx
+++ b/src/framework/ui/list/list.spec.tsx
@@ -101,7 +101,32 @@ describe('@list-item: template matches snapshot', () => {
   it('* description', () => {
     const item = () => {
       return (
-        <ItemMock title='Title'/>
+        <ItemMock description='Description'/>
+      );
+    };
+
+    const component: RenderAPI = render(
+      <Mock
+        data={data}
+        renderItem={item}
+      />,
+    );
+
+    const items: ReactTestInstance[] = component.getAllByType(ListItemComponent);
+    const { output } = shallow(items[0]);
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('* text styles', () => {
+    const item = () => {
+      return (
+        <ItemMock
+          title='Title'
+          titleStyle={{ fontSize: 22, lineHeight: 24 }}
+          description='Description'
+          descriptionStyle={{ color: 'blue', letterSpacing: 6 }}
+        />
       );
     };
 
diff --git a/src/framework/ui/list/list.spec.tsx.snap b/src/framework/ui/list/list.spec.tsx.snap
index fca0eb634..0f4b6206c 100644
--- a/src/framework/ui/list/list.spec.tsx.snap
+++ b/src/framework/ui/list/list.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`@list-item: template matches snapshot * description 1`] = `
 <TouchableOpacity
   activeOpacity={1}
   appearance="default"
+  description="Description"
   dispatch={[Function]}
   index={0}
   onLongPress={[Function]}
@@ -131,7 +132,6 @@ exports[`@list-item: template matches snapshot * description 1`] = `
       "text-primary-inverse": "#ffffff",
     }
   }
-  title="Title"
 >
   <View
     style={
@@ -165,12 +165,208 @@ exports[`@list-item: template matches snapshot * description 1`] = `
         },
       ]
     }
+  >
+    <ForwardRef(WrappingElement)
+      style={
+        Object {
+          "color": "#8992A3",
+          "fontSize": 11,
+          "lineHeight": 16,
+          "marginHorizontal": 8,
+        }
+      }
+    >
+      Description
+    </ForwardRef(WrappingElement)>
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`@list-item: template matches snapshot * text styles 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  description="Description"
+  descriptionStyle={
+    Object {
+      "color": "blue",
+      "letterSpacing": 6,
+    }
+  }
+  dispatch={[Function]}
+  index={0}
+  onLongPress={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 8,
+        "paddingVertical": 8,
+      },
+      Array [
+        undefined,
+        undefined,
+        Object {},
+      ],
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-pitch-dark": "#0D1C2E",
+      "blue-primary": "#3366FF",
+      "color-basic-100": "#F7F8FA",
+      "color-basic-200": "#EDF0F5",
+      "color-basic-300": "#DDE1EB",
+      "color-basic-400": "#C8CEDB",
+      "color-basic-500": "#A6AEBD",
+      "color-basic-600": "#8992A3",
+      "color-basic-700": "#6A7385",
+      "color-basic-800": "#4B5466",
+      "color-basic-900": "#2C3547",
+      "color-black": "#0D1C2E",
+      "color-danger-100": "#FFF2F2",
+      "color-danger-200": "#FFD6D9",
+      "color-danger-300": "#FFA8B4",
+      "color-danger-400": "#FF708D",
+      "color-danger-500": "#FF3D71",
+      "color-danger-600": "#DB2C66",
+      "color-danger-700": "#B81D5B",
+      "color-danger-800": "#94124E",
+      "color-danger-900": "#700940",
+      "color-info-100": "#F2F8FF",
+      "color-info-200": "#C7E2FF",
+      "color-info-300": "#94CBFF",
+      "color-info-400": "#42AAFF",
+      "color-info-500": "#0095FF",
+      "color-info-600": "#006FD6",
+      "color-info-700": "#0057C2",
+      "color-info-800": "#0041A8",
+      "color-info-900": "#002885",
+      "color-primary-100": "#F2F6FF",
+      "color-primary-200": "#D9E4FF",
+      "color-primary-300": "#A6C1FF",
+      "color-primary-400": "#598BFF",
+      "color-primary-500": "#3366FF",
+      "color-primary-600": "#284DE0",
+      "color-primary-700": "#2541CC",
+      "color-primary-800": "#192F9E",
+      "color-primary-900": "#14236E",
+      "color-secondary-100": "#F7F2FF",
+      "color-secondary-200": "#E0D1FF",
+      "color-secondary-300": "#C5A8FF",
+      "color-secondary-400": "#A375FF",
+      "color-secondary-500": "#884DFF",
+      "color-secondary-600": "#6A39DB",
+      "color-secondary-700": "#4F28B8",
+      "color-secondary-800": "#371B94",
+      "color-secondary-900": "#26117A",
+      "color-success-100": "#EDFFF3",
+      "color-success-200": "#B3FFD6",
+      "color-success-300": "#8CFAC7",
+      "color-success-400": "#51F0B0",
+      "color-success-500": "#00E096",
+      "color-success-600": "#00B383",
+      "color-success-700": "#008F72",
+      "color-success-800": "#007566",
+      "color-success-900": "#00524C",
+      "color-tertiary-100": "#FFDED6",
+      "color-tertiary-200": "#FFDED6",
+      "color-tertiary-300": "#FFDED6",
+      "color-tertiary-400": "#FFDED6",
+      "color-tertiary-500": "#FFDED6",
+      "color-tertiary-600": "#FFDED6",
+      "color-tertiary-700": "#FFDED6",
+      "color-tertiary-800": "#FFDED6",
+      "color-tertiary-900": "#FFDED6",
+      "color-warning-100": "#FFFDF2",
+      "color-warning-200": "#FFF1C2",
+      "color-warning-300": "#FFE59E",
+      "color-warning-400": "#FFC94D",
+      "color-warning-500": "#FFAA00",
+      "color-warning-600": "#DB8B00",
+      "color-warning-700": "#B86E00",
+      "color-warning-800": "#945400",
+      "color-warning-900": "#703C00",
+      "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
+      "font-primary-color": "#0D1C2E",
+      "font-primary-disabled-color": "#C8CEDB",
+      "font-primary-family": "",
+      "font-primary-regular-text-line-height": 16,
+      "font-primary-regular-text-size": 14,
+      "font-primary-regular-text-weight": "600",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "opacity-transparent": "transparent",
+      "outline-color": "#DDE1EB",
+      "outline-disabled-color": "transparent",
+      "outline-disabled-width": 0,
+      "outline-width": 11,
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="Title"
+  titleStyle={
+    Object {
+      "fontSize": 22,
+      "lineHeight": 24,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "accessory": Object {
+            "marginHorizontal": 8,
+          },
+          "description": Object {
+            "color": "blue",
+            "fontSize": 11,
+            "letterSpacing": 6,
+            "lineHeight": 16,
+            "marginHorizontal": 8,
+          },
+          "icon": Object {
+            "height": 40,
+            "marginHorizontal": 8,
+            "tintColor": "#A6AEBD",
+            "width": 40,
+          },
+          "title": Object {
+            "color": "#0D1C2E",
+            "fontSize": 22,
+            "fontWeight": "600",
+            "lineHeight": 24,
+            "marginHorizontal": 8,
+          },
+        },
+        Object {
+          "flex": 1,
+        },
+      ]
+    }
   >
     <ForwardRef(WrappingElement)
       style={
         Object {
           "color": "#0D1C2E",
-          "fontSize": 13,
+          "fontSize": 22,
           "fontWeight": "600",
           "lineHeight": 24,
           "marginHorizontal": 8,
@@ -179,6 +375,19 @@ exports[`@list-item: template matches snapshot * description 1`] = `
     >
       Title
     </ForwardRef(WrappingElement)>
+    <ForwardRef(WrappingElement)
+      style={
+        Object {
+          "color": "blue",
+          "fontSize": 11,
+          "letterSpacing": 6,
+          "lineHeight": 16,
+          "marginHorizontal": 8,
+        }
+      }
+    >
+      Description
+    </ForwardRef(WrappingElement)>
   </View>
 </TouchableOpacity>
 `;
diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx
index c2b8d9785..b5b2391e8 100644
--- a/src/framework/ui/list/listItem.component.tsx
+++ b/src/framework/ui/list/listItem.component.tsx
@@ -7,6 +7,8 @@ import {
   ImageProps,
   GestureResponderEvent,
   StyleSheet,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {
   styled,
@@ -32,12 +34,14 @@ interface TemplateBaseProps {
 
 interface TemplateTitleProps extends Partial<TemplateBaseProps> {
   title: string;
+  titleStyle?: StyleProp<TextStyle>;
   description?: string;
 }
 
 interface TemplateDescriptionProps extends Partial<TemplateBaseProps> {
   title?: string;
   description: string;
+  descriptionStyle?: StyleProp<TextStyle>;
 }
 
 interface CustomContentProps {
@@ -83,6 +87,8 @@ export class ListItem extends React.Component<Props> {
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
+    // @ts-ignore: will be not executed if `titleStyle` and `descriptionStyle` properties are provided
+    const { titleStyle, descriptionStyle } = this.props;
     const {
       iconWidth,
       iconHeight,
@@ -119,6 +125,7 @@ export class ListItem extends React.Component<Props> {
         lineHeight: titleLineHeight,
         fontWeight: titleFontWeight,
         color: titleColor,
+        ...StyleSheet.flatten(titleStyle),
         ...styles.title,
       },
       description: {
@@ -126,6 +133,7 @@ export class ListItem extends React.Component<Props> {
         fontSize: descriptionFontSize,
         lineHeight: descriptionLineHeight,
         marginHorizontal: descriptionMarginHorizontal,
+        ...StyleSheet.flatten(descriptionStyle),
         ...styles.description,
       },
       accessory: {
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
index deeecc3a0..451b60720 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
@@ -66,6 +66,7 @@ const iconSource: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icon
 const menuItems: OverflowMenuItemType[] = [
   {
     text: 'Menu Item 1',
+    textStyle: { fontSize: 24, color: 'blue' },
     icon: icon,
   },
   {
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
index f48835e65..9cb4a90aa 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
@@ -21,6 +21,12 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
           ]
         }
         text="Menu Item 1"
+        textStyle={
+          Object {
+            "color": "blue",
+            "fontSize": 24,
+          }
+        }
       />
       <ForwardRef(WrappingElement)
         disabled={true}
@@ -82,6 +88,10 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
       Object {
         "icon": [Function],
         "text": "Menu Item 1",
+        "textStyle": Object {
+          "color": "blue",
+          "fontSize": 24,
+        },
       },
       Object {
         "disabled": true,
@@ -236,6 +246,12 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = `
           ]
         }
         text="Menu Item 1"
+        textStyle={
+          Object {
+            "color": "blue",
+            "fontSize": 24,
+          }
+        }
       />
     </View>
   }
@@ -246,6 +262,10 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = `
       Object {
         "icon": [Function],
         "text": "Menu Item 1",
+        "textStyle": Object {
+          "color": "blue",
+          "fontSize": 24,
+        },
       },
     ]
   }
diff --git a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
index a7827bc95..1e144179e 100644
--- a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
@@ -4,6 +4,8 @@ import {
   GestureResponderEvent,
   StyleSheet,
   ImageProps,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -20,6 +22,7 @@ import { TouchableOpacityIndexedProps } from '../common/type';
 export interface OverflowMenuItemType {
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   text: React.ReactText;
+  textStyle?: StyleProp<TextStyle>;
   disabled?: boolean;
   index?: number;
 }
@@ -61,6 +64,7 @@ export class OverflowMenuItem extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
+    const { textStyle } = this.props;
     const {
       textMarginHorizontal,
       textFontSize,
@@ -82,10 +86,11 @@ export class OverflowMenuItem extends React.Component<Props> {
       },
       text: {
         marginHorizontal: textMarginHorizontal,
-        fontSize: style.textFontSize,
+        fontSize: textFontSize,
         lineHeight: textLineHeight,
         fontWeight: textFontWeight,
         color: textColor,
+        ...StyleSheet.flatten(textStyle),
       },
       icon: {
         width: iconWidth,
diff --git a/src/framework/ui/radio/radio.component.tsx b/src/framework/ui/radio/radio.component.tsx
index 6c707c70a..985e4fa55 100644
--- a/src/framework/ui/radio/radio.component.tsx
+++ b/src/framework/ui/radio/radio.component.tsx
@@ -13,16 +13,14 @@ import {
   StyledComponentProps,
   StyleType,
   Interaction,
-  allWithRest,
 } from '@kitten/theme';
 import {
   Text as TextComponent,
   Props as TextProps,
 } from '../text/text.component';
-import { TextStyleProps } from '@kitten/ui/common/props';
 
 interface RadioProps {
-  style?: StyleProp<TextStyle>;
+  textStyle?: StyleProp<TextStyle>;
   text?: string;
   checked?: boolean;
   status?: string;
@@ -61,9 +59,7 @@ export class Radio extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
-
-    const derivedStyle: TextStyle = StyleSheet.flatten(this.props.style);
-    const { rest: derivedContainerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps);
+    const { style: containerStyle, textStyle } = this.props;
 
     const {
       textMarginHorizontal,
@@ -84,7 +80,7 @@ export class Radio extends React.Component<Props> {
 
     return {
       container: {
-        ...derivedContainerStyle,
+        ...StyleSheet.flatten(containerStyle),
         ...styles.container,
       },
       highlightContainer: styles.highlightContainer,
@@ -99,7 +95,7 @@ export class Radio extends React.Component<Props> {
         fontWeight: textFontWeight,
         color: textColor,
         ...styles.text,
-        ...derivedTextStyle,
+        ...StyleSheet.flatten(textStyle),
       },
       icon: {
         width: iconWidth,
diff --git a/src/framework/ui/radio/radio.spec.tsx b/src/framework/ui/radio/radio.spec.tsx
index a633b0438..8c38de3e9 100644
--- a/src/framework/ui/radio/radio.spec.tsx
+++ b/src/framework/ui/radio/radio.spec.tsx
@@ -113,6 +113,16 @@ describe('@radio: matches snapshot', () => {
     expect(inactiveOutput).toMatchSnapshot('checked');
   });
 
+  it('with text (styled)', () => {
+    const component: RenderAPI = renderComponent({
+      text: 'Place your text',
+      textStyle: { fontSize: 22, lineHeight: 24 },
+    });
+    const { output } = shallow(component.getByType(RadioComponent));
+
+    expect(output).toMatchSnapshot();
+  });
+
 });
 
 describe('@radio: component checks', () => {
diff --git a/src/framework/ui/radio/radio.spec.tsx.snap b/src/framework/ui/radio/radio.spec.tsx.snap
index d3c9bd383..901651b2a 100644
--- a/src/framework/ui/radio/radio.spec.tsx.snap
+++ b/src/framework/ui/radio/radio.spec.tsx.snap
@@ -1383,3 +1383,195 @@ exports[`@radio: matches snapshot disabled 1`] = `
   </View>
 </TouchableOpacity>
 `;
+
+exports[`@radio: matches snapshot with text (styled) 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "borderRadius": 20,
+          "height": 40,
+          "position": "absolute",
+          "width": 40,
+        }
+      }
+    />
+    <TouchableOpacity
+      activeOpacity={1}
+      appearance="default"
+      dispatch={[Function]}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
+      size="medium"
+      status="primary"
+      style={
+        Object {
+          "alignItems": "center",
+          "borderColor": "#A6AEBD",
+          "borderRadius": 12,
+          "borderWidth": 2,
+          "height": 24,
+          "justifyContent": "center",
+          "width": 24,
+        }
+      }
+      text="Place your text"
+      textStyle={
+        Object {
+          "fontSize": 22,
+          "lineHeight": 24,
+        }
+      }
+      theme={
+        Object {
+          "blue-dark": "#2541CC",
+          "blue-pitch-dark": "#0D1C2E",
+          "blue-primary": "#3366FF",
+          "color-basic-100": "#F7F8FA",
+          "color-basic-200": "#EDF0F5",
+          "color-basic-300": "#DDE1EB",
+          "color-basic-400": "#C8CEDB",
+          "color-basic-500": "#A6AEBD",
+          "color-basic-600": "#8992A3",
+          "color-basic-700": "#6A7385",
+          "color-basic-800": "#4B5466",
+          "color-basic-900": "#2C3547",
+          "color-black": "#0D1C2E",
+          "color-danger-100": "#FFF2F2",
+          "color-danger-200": "#FFD6D9",
+          "color-danger-300": "#FFA8B4",
+          "color-danger-400": "#FF708D",
+          "color-danger-500": "#FF3D71",
+          "color-danger-600": "#DB2C66",
+          "color-danger-700": "#B81D5B",
+          "color-danger-800": "#94124E",
+          "color-danger-900": "#700940",
+          "color-info-100": "#F2F8FF",
+          "color-info-200": "#C7E2FF",
+          "color-info-300": "#94CBFF",
+          "color-info-400": "#42AAFF",
+          "color-info-500": "#0095FF",
+          "color-info-600": "#006FD6",
+          "color-info-700": "#0057C2",
+          "color-info-800": "#0041A8",
+          "color-info-900": "#002885",
+          "color-primary-100": "#F2F6FF",
+          "color-primary-200": "#D9E4FF",
+          "color-primary-300": "#A6C1FF",
+          "color-primary-400": "#598BFF",
+          "color-primary-500": "#3366FF",
+          "color-primary-600": "#284DE0",
+          "color-primary-700": "#2541CC",
+          "color-primary-800": "#192F9E",
+          "color-primary-900": "#14236E",
+          "color-secondary-100": "#F7F2FF",
+          "color-secondary-200": "#E0D1FF",
+          "color-secondary-300": "#C5A8FF",
+          "color-secondary-400": "#A375FF",
+          "color-secondary-500": "#884DFF",
+          "color-secondary-600": "#6A39DB",
+          "color-secondary-700": "#4F28B8",
+          "color-secondary-800": "#371B94",
+          "color-secondary-900": "#26117A",
+          "color-success-100": "#EDFFF3",
+          "color-success-200": "#B3FFD6",
+          "color-success-300": "#8CFAC7",
+          "color-success-400": "#51F0B0",
+          "color-success-500": "#00E096",
+          "color-success-600": "#00B383",
+          "color-success-700": "#008F72",
+          "color-success-800": "#007566",
+          "color-success-900": "#00524C",
+          "color-tertiary-100": "#FFDED6",
+          "color-tertiary-200": "#FFDED6",
+          "color-tertiary-300": "#FFDED6",
+          "color-tertiary-400": "#FFDED6",
+          "color-tertiary-500": "#FFDED6",
+          "color-tertiary-600": "#FFDED6",
+          "color-tertiary-700": "#FFDED6",
+          "color-tertiary-800": "#FFDED6",
+          "color-tertiary-900": "#FFDED6",
+          "color-warning-100": "#FFFDF2",
+          "color-warning-200": "#FFF1C2",
+          "color-warning-300": "#FFE59E",
+          "color-warning-400": "#FFC94D",
+          "color-warning-500": "#FFAA00",
+          "color-warning-600": "#DB8B00",
+          "color-warning-700": "#B86E00",
+          "color-warning-800": "#945400",
+          "color-warning-900": "#703C00",
+          "color-white": "#FFFFFF",
+          "font-light-color": "#FFFFFF",
+          "font-primary-color": "#0D1C2E",
+          "font-primary-disabled-color": "#C8CEDB",
+          "font-primary-family": "",
+          "font-primary-regular-text-line-height": 16,
+          "font-primary-regular-text-size": 14,
+          "font-primary-regular-text-weight": "600",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "opacity-transparent": "transparent",
+          "outline-color": "#DDE1EB",
+          "outline-disabled-color": "transparent",
+          "outline-disabled-width": 0,
+          "outline-width": 11,
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "transparent",
+            "borderRadius": 7,
+            "height": 14,
+            "width": 14,
+          }
+        }
+      />
+    </TouchableOpacity>
+  </View>
+  <ForwardRef(WrappingElement)
+    style={
+      Object {
+        "color": "#0D1C2E",
+        "fontSize": 22,
+        "fontWeight": "600",
+        "lineHeight": 24,
+        "marginHorizontal": 12,
+      }
+    }
+  >
+    Place your text
+  </ForwardRef(WrappingElement)>
+</TouchableOpacity>
+`;
diff --git a/src/framework/ui/tab/tab.component.tsx b/src/framework/ui/tab/tab.component.tsx
index 05c938bd0..ca4f5aef6 100644
--- a/src/framework/ui/tab/tab.component.tsx
+++ b/src/framework/ui/tab/tab.component.tsx
@@ -8,7 +8,6 @@ import {
   TextStyle,
 } from 'react-native';
 import {
-  allWithRest,
   styled,
   StyledComponentProps,
   StyleType,
@@ -17,11 +16,10 @@ import {
   Text as TextComponent,
   Props as TextProps,
 } from '../text/text.component';
-import { TextStyleProps } from '../common/props';
 
 interface TabProps {
-  style?: StyleProp<TextStyle>;
   title?: string;
+  titleStyle?: StyleProp<TextStyle>;
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   selected?: boolean;
   onSelect?: (selected: boolean) => void;
@@ -47,8 +45,7 @@ export class Tab extends React.Component<Props> {
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
-    const derivedStyle: TextStyle = StyleSheet.flatten(this.props.style);
-    const { rest: derivedContainerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps);
+    const { titleStyle } = this.props;
 
     const {
       textMarginVertical,
@@ -66,7 +63,6 @@ export class Tab extends React.Component<Props> {
     return {
       container: {
         ...containerParameters,
-        ...derivedContainerStyle,
         ...styles.container,
       },
       icon: {
@@ -82,7 +78,7 @@ export class Tab extends React.Component<Props> {
         lineHeight: textLineHeight,
         fontWeight: textFontWeight,
         color: textColor,
-        ...derivedTextStyle,
+        ...StyleSheet.flatten(titleStyle),
         ...styles.title,
       },
     };
diff --git a/src/framework/ui/tab/tab.spec.tsx b/src/framework/ui/tab/tab.spec.tsx
index b39072628..bd9350bfc 100644
--- a/src/framework/ui/tab/tab.spec.tsx
+++ b/src/framework/ui/tab/tab.spec.tsx
@@ -91,6 +91,22 @@ describe('@tab: component checks', () => {
     expect(output).toMatchSnapshot();
   });
 
+  it('* title (styled)', () => {
+    const component: RenderAPI = render(
+      <Mock
+        title='title'
+        titleStyle={{
+          fontSize: 24,
+          color: 'tomato',
+        }}
+      />,
+    );
+
+    const { output } = shallow(component.getByType(TabComponent));
+
+    expect(output).toMatchSnapshot();
+  });
+
 });
 
 describe('@tab-bar: component checks', () => {
diff --git a/src/framework/ui/tab/tab.spec.tsx.snap b/src/framework/ui/tab/tab.spec.tsx.snap
index bd048ecd0..cfaa621df 100644
--- a/src/framework/ui/tab/tab.spec.tsx.snap
+++ b/src/framework/ui/tab/tab.spec.tsx.snap
@@ -265,6 +265,151 @@ exports[`@tab: component checks * icon 1`] = `
 </TouchableOpacity>
 `;
 
+exports[`@tab: component checks * title (styled) 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  onPress={[Function]}
+  selected={false}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      undefined,
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-pitch-dark": "#0D1C2E",
+      "blue-primary": "#3366FF",
+      "color-basic-100": "#F7F8FA",
+      "color-basic-200": "#EDF0F5",
+      "color-basic-300": "#DDE1EB",
+      "color-basic-400": "#C8CEDB",
+      "color-basic-500": "#A6AEBD",
+      "color-basic-600": "#8992A3",
+      "color-basic-700": "#6A7385",
+      "color-basic-800": "#4B5466",
+      "color-basic-900": "#2C3547",
+      "color-black": "#0D1C2E",
+      "color-danger-100": "#FFF2F2",
+      "color-danger-200": "#FFD6D9",
+      "color-danger-300": "#FFA8B4",
+      "color-danger-400": "#FF708D",
+      "color-danger-500": "#FF3D71",
+      "color-danger-600": "#DB2C66",
+      "color-danger-700": "#B81D5B",
+      "color-danger-800": "#94124E",
+      "color-danger-900": "#700940",
+      "color-info-100": "#F2F8FF",
+      "color-info-200": "#C7E2FF",
+      "color-info-300": "#94CBFF",
+      "color-info-400": "#42AAFF",
+      "color-info-500": "#0095FF",
+      "color-info-600": "#006FD6",
+      "color-info-700": "#0057C2",
+      "color-info-800": "#0041A8",
+      "color-info-900": "#002885",
+      "color-primary-100": "#F2F6FF",
+      "color-primary-200": "#D9E4FF",
+      "color-primary-300": "#A6C1FF",
+      "color-primary-400": "#598BFF",
+      "color-primary-500": "#3366FF",
+      "color-primary-600": "#284DE0",
+      "color-primary-700": "#2541CC",
+      "color-primary-800": "#192F9E",
+      "color-primary-900": "#14236E",
+      "color-secondary-100": "#F7F2FF",
+      "color-secondary-200": "#E0D1FF",
+      "color-secondary-300": "#C5A8FF",
+      "color-secondary-400": "#A375FF",
+      "color-secondary-500": "#884DFF",
+      "color-secondary-600": "#6A39DB",
+      "color-secondary-700": "#4F28B8",
+      "color-secondary-800": "#371B94",
+      "color-secondary-900": "#26117A",
+      "color-success-100": "#EDFFF3",
+      "color-success-200": "#B3FFD6",
+      "color-success-300": "#8CFAC7",
+      "color-success-400": "#51F0B0",
+      "color-success-500": "#00E096",
+      "color-success-600": "#00B383",
+      "color-success-700": "#008F72",
+      "color-success-800": "#007566",
+      "color-success-900": "#00524C",
+      "color-tertiary-100": "#FFDED6",
+      "color-tertiary-200": "#FFDED6",
+      "color-tertiary-300": "#FFDED6",
+      "color-tertiary-400": "#FFDED6",
+      "color-tertiary-500": "#FFDED6",
+      "color-tertiary-600": "#FFDED6",
+      "color-tertiary-700": "#FFDED6",
+      "color-tertiary-800": "#FFDED6",
+      "color-tertiary-900": "#FFDED6",
+      "color-warning-100": "#FFFDF2",
+      "color-warning-200": "#FFF1C2",
+      "color-warning-300": "#FFE59E",
+      "color-warning-400": "#FFC94D",
+      "color-warning-500": "#FFAA00",
+      "color-warning-600": "#DB8B00",
+      "color-warning-700": "#B86E00",
+      "color-warning-800": "#945400",
+      "color-warning-900": "#703C00",
+      "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
+      "font-primary-color": "#0D1C2E",
+      "font-primary-disabled-color": "#C8CEDB",
+      "font-primary-family": "",
+      "font-primary-regular-text-line-height": 16,
+      "font-primary-regular-text-size": 14,
+      "font-primary-regular-text-weight": "600",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "opacity-transparent": "transparent",
+      "outline-color": "#DDE1EB",
+      "outline-disabled-color": "transparent",
+      "outline-disabled-width": 0,
+      "outline-width": 11,
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="title"
+  titleStyle={
+    Object {
+      "color": "tomato",
+      "fontSize": 24,
+    }
+  }
+>
+  <ForwardRef(WrappingElement)
+    style={
+      Object {
+        "color": "tomato",
+        "fontSize": 24,
+        "fontWeight": "800",
+        "lineHeight": 16,
+        "marginVertical": 2,
+      }
+    }
+  >
+    title
+  </ForwardRef(WrappingElement)>
+</TouchableOpacity>
+`;
+
 exports[`@tab: component checks * title 1`] = `
 <TouchableOpacity
   activeOpacity={1}
diff --git a/src/framework/ui/tab/tabBar.component.tsx b/src/framework/ui/tab/tabBar.component.tsx
index 2654413e7..13794e7b2 100644
--- a/src/framework/ui/tab/tabBar.component.tsx
+++ b/src/framework/ui/tab/tabBar.component.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import {
+  StyleProp,
   StyleSheet,
   TextStyle,
   View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -17,6 +19,7 @@ type TabElement = React.ReactElement<TabProps>;
 interface TabBarProps {
   children: TabElement | TabElement[];
   selectedIndex?: number;
+  indicatorStyle?: StyleProp<ViewStyle>;
   onSelect?: (index: number) => void;
 }
 
@@ -51,6 +54,7 @@ export class TabBar extends React.Component<Props> {
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
+    const { indicatorStyle } = this.props;
     const {
       indicatorHeight,
       indicatorBorderRadius,
@@ -64,6 +68,7 @@ export class TabBar extends React.Component<Props> {
         height: indicatorHeight,
         borderRadius: indicatorBorderRadius,
         backgroundColor: indicatorBackgroundColor,
+        ...StyleSheet.flatten(indicatorStyle),
       },
     };
   };
diff --git a/src/framework/ui/tab/tabView.component.tsx b/src/framework/ui/tab/tabView.component.tsx
index 853c429b2..8c15617ed 100644
--- a/src/framework/ui/tab/tabView.component.tsx
+++ b/src/framework/ui/tab/tabView.component.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import {
-  Dimensions,
+  StyleProp,
   View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 import { styled } from '@kitten/theme';
 import {
@@ -33,6 +34,7 @@ interface TabViewProps {
   children: ChildElement | ChildElement[];
   selectedIndex?: number;
   contentWidth?: number;
+  indicatorStyle?: StyleProp<ViewStyle>;
   shouldLoadComponent?: (index: number) => boolean;
   onOffsetChange?: (offset: number) => void;
   onSelect?: (index: number) => void;
@@ -92,7 +94,13 @@ export class TabView extends React.Component<Props> {
   };
 
   public render(): React.ReactElement<ViewProps> {
-    const { selectedIndex, contentWidth, children, ...derivedProps } = this.props;
+    const {
+      selectedIndex,
+      contentWidth,
+      children,
+      indicatorStyle,
+      ...derivedProps
+    } = this.props;
     const { tabs, content } = this.renderComponentChildren(children);
 
     return (
@@ -100,6 +108,7 @@ export class TabView extends React.Component<Props> {
         <TabBar
           ref={this.tabBarRef}
           selectedIndex={selectedIndex}
+          indicatorStyle={indicatorStyle}
           onSelect={this.onBarSelect}>
           {tabs}
         </TabBar>
diff --git a/src/framework/ui/tooltip/tooltip.component.tsx b/src/framework/ui/tooltip/tooltip.component.tsx
index bb9f4f122..846560af0 100644
--- a/src/framework/ui/tooltip/tooltip.component.tsx
+++ b/src/framework/ui/tooltip/tooltip.component.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import {
   ImageProps,
+  StyleProp,
   StyleSheet,
+  TextStyle,
   View,
   ViewProps,
 } from 'react-native';
@@ -22,6 +24,7 @@ import { Omit } from '../common/type';
 
 interface TooltipProps {
   text: string;
+  textStyle?: StyleProp<TextStyle>;
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   children: React.ReactElement<any>;
 }
@@ -40,6 +43,7 @@ export class Tooltip extends React.Component<Props> {
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
+    const { textStyle } = this.props;
     const {
       popoverPaddingHorizontal,
       popoverPaddingVertical,
@@ -76,6 +80,7 @@ export class Tooltip extends React.Component<Props> {
         fontSize: textFontSize,
         lineHeight: textLineHeight,
         color: textColor,
+        ...StyleSheet.flatten(textStyle),
         ...styles.text,
       },
     };
diff --git a/src/framework/ui/topNavigation/topNavigation.component.tsx b/src/framework/ui/topNavigation/topNavigation.component.tsx
index 69874c24d..5b8d61a9f 100644
--- a/src/framework/ui/topNavigation/topNavigation.component.tsx
+++ b/src/framework/ui/topNavigation/topNavigation.component.tsx
@@ -5,6 +5,8 @@ import {
   ViewProps,
   Text,
   TextProps,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -20,7 +22,9 @@ type ActionElement = React.ReactElement<ActionProps>;
 
 interface TopNavigationProps {
   title?: string;
+  titleStyle?: StyleProp<TextStyle>;
   subtitle?: string;
+  subtitleStyle?: StyleProp<TextStyle>;
   alignment?: string | TopNavigationAlignment;
   leftControl?: ActionElement;
   rightControls?: ActionElement[];
@@ -33,7 +37,13 @@ export class TopNavigation extends React.Component<Props> {
   static styledComponentName: string = 'TopNavigation';
 
   private getComponentStyle = (style: StyleType): StyleType => {
-    const { alignment: alignmentValue, leftControl, rightControls } = this.props;
+    const {
+      alignment: alignmentValue,
+      leftControl,
+      rightControls,
+      titleStyle,
+      subtitleStyle,
+    } = this.props;
 
     const {
       titleTextAlign,
@@ -73,6 +83,7 @@ export class TopNavigation extends React.Component<Props> {
         lineHeight: titleLineHeight,
         fontWeight: titleFontWeight,
         color: titleColor,
+        ...StyleSheet.flatten(titleStyle),
         ...styles.title,
       },
       subtitle: {
@@ -80,6 +91,8 @@ export class TopNavigation extends React.Component<Props> {
         fontSize: subtitleFontSize,
         color: subtitleColor,
         fontWeight: subtitleFontWeight,
+        lineHeight: subtitleLineHeight,
+        ...StyleSheet.flatten(subtitleStyle),
         ...styles.subtitle,
       },
       action: {
diff --git a/src/framework/ui/topNavigation/topNavigation.spec.tsx b/src/framework/ui/topNavigation/topNavigation.spec.tsx
index 990110e70..2b566df23 100644
--- a/src/framework/ui/topNavigation/topNavigation.spec.tsx
+++ b/src/framework/ui/topNavigation/topNavigation.spec.tsx
@@ -91,6 +91,21 @@ describe('@top-navigation-bar/action', () => {
     expect(output).toMatchSnapshot();
   });
 
+  it('* texts (styled)', () => {
+    const component: RenderAPI = render(
+      <Mock
+        title='Test'
+        titleStyle={{ fontSize: 24 }}
+        subtitle='Subtitle'
+        subtitleStyle={{ color: 'red' }}
+      />,
+    );
+
+    const { output } = shallow(component.getByType(TopNavigationComponent));
+
+    expect(output).toMatchSnapshot();
+  });
+
   it('* bar/alignment: center', () => {
     const component: RenderAPI = render(
       <Mock
diff --git a/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap b/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap
index 71c1d0bb4..a5beaac70 100644
--- a/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap
+++ b/src/framework/ui/topNavigation/topNavigation.spec.tsx.snap
@@ -590,6 +590,7 @@ exports[`@top-navigation-bar/action * bar/subtitle 1`] = `
           "color": "#8992A3",
           "fontSize": 11,
           "fontWeight": "400",
+          "lineHeight": 16,
           "textAlign": "left",
         }
       }
@@ -944,6 +945,7 @@ exports[`@top-navigation-bar/action * bar/with actions 1`] = `
           "color": "#8992A3",
           "fontSize": 11,
           "fontWeight": "400",
+          "lineHeight": 16,
           "textAlign": "left",
         }
       }
@@ -1007,3 +1009,189 @@ exports[`@top-navigation-bar/action * bar/with actions 1`] = `
   </View>
 </View>
 `;
+
+exports[`@top-navigation-bar/action * texts (styled) 1`] = `
+<View
+  alignment="start"
+  appearance="default"
+  dispatch={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#FFFFFF",
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  subtitleStyle={
+    Object {
+      "color": "red",
+    }
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-pitch-dark": "#0D1C2E",
+      "blue-primary": "#3366FF",
+      "color-basic-100": "#F7F8FA",
+      "color-basic-200": "#EDF0F5",
+      "color-basic-300": "#DDE1EB",
+      "color-basic-400": "#C8CEDB",
+      "color-basic-500": "#A6AEBD",
+      "color-basic-600": "#8992A3",
+      "color-basic-700": "#6A7385",
+      "color-basic-800": "#4B5466",
+      "color-basic-900": "#2C3547",
+      "color-black": "#0D1C2E",
+      "color-danger-100": "#FFF2F2",
+      "color-danger-200": "#FFD6D9",
+      "color-danger-300": "#FFA8B4",
+      "color-danger-400": "#FF708D",
+      "color-danger-500": "#FF3D71",
+      "color-danger-600": "#DB2C66",
+      "color-danger-700": "#B81D5B",
+      "color-danger-800": "#94124E",
+      "color-danger-900": "#700940",
+      "color-info-100": "#F2F8FF",
+      "color-info-200": "#C7E2FF",
+      "color-info-300": "#94CBFF",
+      "color-info-400": "#42AAFF",
+      "color-info-500": "#0095FF",
+      "color-info-600": "#006FD6",
+      "color-info-700": "#0057C2",
+      "color-info-800": "#0041A8",
+      "color-info-900": "#002885",
+      "color-primary-100": "#F2F6FF",
+      "color-primary-200": "#D9E4FF",
+      "color-primary-300": "#A6C1FF",
+      "color-primary-400": "#598BFF",
+      "color-primary-500": "#3366FF",
+      "color-primary-600": "#284DE0",
+      "color-primary-700": "#2541CC",
+      "color-primary-800": "#192F9E",
+      "color-primary-900": "#14236E",
+      "color-secondary-100": "#F7F2FF",
+      "color-secondary-200": "#E0D1FF",
+      "color-secondary-300": "#C5A8FF",
+      "color-secondary-400": "#A375FF",
+      "color-secondary-500": "#884DFF",
+      "color-secondary-600": "#6A39DB",
+      "color-secondary-700": "#4F28B8",
+      "color-secondary-800": "#371B94",
+      "color-secondary-900": "#26117A",
+      "color-success-100": "#EDFFF3",
+      "color-success-200": "#B3FFD6",
+      "color-success-300": "#8CFAC7",
+      "color-success-400": "#51F0B0",
+      "color-success-500": "#00E096",
+      "color-success-600": "#00B383",
+      "color-success-700": "#008F72",
+      "color-success-800": "#007566",
+      "color-success-900": "#00524C",
+      "color-tertiary-100": "#FFDED6",
+      "color-tertiary-200": "#FFDED6",
+      "color-tertiary-300": "#FFDED6",
+      "color-tertiary-400": "#FFDED6",
+      "color-tertiary-500": "#FFDED6",
+      "color-tertiary-600": "#FFDED6",
+      "color-tertiary-700": "#FFDED6",
+      "color-tertiary-800": "#FFDED6",
+      "color-tertiary-900": "#FFDED6",
+      "color-warning-100": "#FFFDF2",
+      "color-warning-200": "#FFF1C2",
+      "color-warning-300": "#FFE59E",
+      "color-warning-400": "#FFC94D",
+      "color-warning-500": "#FFAA00",
+      "color-warning-600": "#DB8B00",
+      "color-warning-700": "#B86E00",
+      "color-warning-800": "#945400",
+      "color-warning-900": "#703C00",
+      "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
+      "font-primary-color": "#0D1C2E",
+      "font-primary-disabled-color": "#C8CEDB",
+      "font-primary-family": "",
+      "font-primary-regular-text-line-height": 16,
+      "font-primary-regular-text-size": 14,
+      "font-primary-regular-text-weight": "600",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "opacity-transparent": "transparent",
+      "outline-color": "#DDE1EB",
+      "outline-disabled-color": "transparent",
+      "outline-disabled-width": 0,
+      "outline-width": 11,
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  titleStyle={
+    Object {
+      "fontSize": 24,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "zIndex": 1,
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "marginLeft": 0,
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "color": "#0D1C2E",
+          "fontSize": 24,
+          "fontWeight": "600",
+          "lineHeight": 24,
+          "textAlign": "left",
+        }
+      }
+    >
+      Test
+    </Text>
+    <Text
+      style={
+        Object {
+          "color": "red",
+          "fontSize": 11,
+          "fontWeight": "400",
+          "lineHeight": 16,
+          "textAlign": "left",
+        }
+      }
+    >
+      Subtitle
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "zIndex": 1,
+      }
+    }
+  />
+</View>
+`;
diff --git a/src/playground/src/ui/screen/bottomNavigation.component.tsx b/src/playground/src/ui/screen/bottomNavigation.component.tsx
index 99c94d620..c8bf964c8 100644
--- a/src/playground/src/ui/screen/bottomNavigation.component.tsx
+++ b/src/playground/src/ui/screen/bottomNavigation.component.tsx
@@ -69,15 +69,21 @@ function navigateToTab(routeName: string, navigate: (routeName: string) => void)
 function renderBottomNavigation(props: CommonNavigationProps): React.ReactElement<ViewProps> {
   const routes: NavigationRoute[] = props.navigation.state.routes;
   const index: number = props.navigation.state.index;
+  const indicatorStyle: StyleType | null = index === 1 ? { backgroundColor: 'red' } : null;
 
   return (
     <BottomNavigation
       appearance={APPEARANCE}
       selectedIndex={index}
+      indicatorStyle={indicatorStyle}
       onSelect={(selectedIndex: number) =>
         navigateToTab(getRouteName(routes, selectedIndex), props.navigation.navigate)}>
       <BottomNavigationTab
         title='Screen 1'
+        titleStyle={{
+          fontSize: 22,
+          lineHeight: 24,
+        }}
         icon={(style: StyleType) => (
           <Image
             source={getIconSource(1, index === 0)}
diff --git a/src/playground/src/ui/screen/overflowMenu.component.tsx b/src/playground/src/ui/screen/overflowMenu.component.tsx
index 5a39cc45a..b3354ca0e 100644
--- a/src/playground/src/ui/screen/overflowMenu.component.tsx
+++ b/src/playground/src/ui/screen/overflowMenu.component.tsx
@@ -35,6 +35,7 @@ const menuIconUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/menu
 const menuItems: OverflowMenuItemType[] = [
   {
     text: 'Menu Item 1',
+    textStyle: { fontSize: 24, color: 'blue' },
     icon: (style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>,
   },
   {
@@ -80,7 +81,7 @@ class OverflowMenuScreen extends React.Component<Props, State> {
     this.setState({ overflowMenu4Visible: !this.state.overflowMenu4Visible });
   };
 
-  private onSelectItem = (event: GestureResponderEvent, index: number): void => {
+  private onSelectItem = (index: number, event: GestureResponderEvent): void => {
     Alert.alert(`Selected item\'s index: ${index}`);
   };
 
diff --git a/src/playground/src/ui/screen/tooltip.component.tsx b/src/playground/src/ui/screen/tooltip.component.tsx
index 756ce34fb..0d48bde58 100644
--- a/src/playground/src/ui/screen/tooltip.component.tsx
+++ b/src/playground/src/ui/screen/tooltip.component.tsx
@@ -75,7 +75,14 @@ class TooltipScreen extends React.Component<Props, State> {
   };
 
   public render(): React.ReactNode {
-    const { container, componentContainer, component, tip, text } = this.props.themedStyle;
+    const {
+      container,
+      componentContainer,
+      component,
+      tip,
+      text,
+      bottomStartText,
+    } = this.props.themedStyle;
 
     return (
       <View style={container}>
@@ -85,6 +92,7 @@ class TooltipScreen extends React.Component<Props, State> {
             placement={`${PLACEMENT} start`}
             visible={this.state.startVisible}
             text='Place your text here️'
+            textStyle={bottomStartText}
             onRequestClose={this.onStartPress}>
             <TouchableOpacity
               style={tip}
@@ -152,6 +160,9 @@ export default withStyles(TooltipScreen, (theme: ThemeType) => ({
   component: {
     // tooltip customization place
   },
+  bottomStartText: {
+    fontSize: 16,
+  },
   tip: {
     justifyContent: 'center',
     borderWidth: 4,