diff --git a/src/components/devsupport/typings.ts b/src/components/devsupport/typings.ts
index 3ae12d111..2c62b7d04 100644
--- a/src/components/devsupport/typings.ts
+++ b/src/components/devsupport/typings.ts
@@ -3,9 +3,15 @@ import { ReactElement } from 'react';
 export type ChildrenProp<Element extends ReactElement = ReactElement> = Element | Element[];
 export type ChildrenWithProps<Props = {}> = ChildrenProp<ReactElement<Props>>;
 
-export type EvaStatus = 'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control' | string;
-export type EvaSize = 'tiny' | 'small' | 'medium' | 'large' | 'giant' | string;
-export type EvaInputSize = 'small' | 'medium' | 'large' | string;
+
+/*
+ * https://github.com/microsoft/TypeScript/issues/29729#issuecomment-505826972
+ */
+export type LiteralUnion<T extends U, U = string> = T | (U & {});
+
+export type EvaStatus = LiteralUnion<'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control'>;
+export type EvaSize = LiteralUnion<'tiny' | 'small' | 'medium' | 'large' | 'giant'>;
+export type EvaInputSize = LiteralUnion<'small' | 'medium' | 'large'>;
 
 export class IndexPath {
 
diff --git a/src/components/ui/autocomplete/autocomplete.component.tsx b/src/components/ui/autocomplete/autocomplete.component.tsx
index c32846397..8782a22f0 100644
--- a/src/components/ui/autocomplete/autocomplete.component.tsx
+++ b/src/components/ui/autocomplete/autocomplete.component.tsx
@@ -149,6 +149,13 @@ export class Autocomplete extends React.Component<AutocompleteProps, State> {
     this.inputRef.current?.clear();
   };
 
+  public componentDidUpdate(prevProps: AutocompleteProps): void {
+    const isChildCountChanged: boolean = this.data.length !== React.Children.count(prevProps.children);
+    const shouldBecomeVisible: boolean = !this.state.listVisible && this.isFocused() && isChildCountChanged;
+
+    shouldBecomeVisible && this.setState({ listVisible: shouldBecomeVisible });
+  }
+
   private onInputFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>): void => {
     this.setOptionsListVisible();
     this.props.onFocus && this.props.onFocus(event);
@@ -159,7 +166,6 @@ export class Autocomplete extends React.Component<AutocompleteProps, State> {
     this.props.onSubmitEditing && this.props.onSubmitEditing(e);
   };
 
-
   private onBackdropPress = (): void => {
     this.blur();
     this.setOptionsListInvisible();
diff --git a/src/components/ui/autocomplete/autocomplete.spec.tsx b/src/components/ui/autocomplete/autocomplete.spec.tsx
index 48992d8e9..494d831af 100644
--- a/src/components/ui/autocomplete/autocomplete.spec.tsx
+++ b/src/components/ui/autocomplete/autocomplete.spec.tsx
@@ -31,6 +31,7 @@ import {
   AutocompleteItem,
   AutocompleteItemProps,
 } from './autocompleteItem.component';
+import { TouchableWithoutFeedback } from '../../devsupport';
 
 /*
  * Mock UIManager since Autocomplete relies on native measurements
@@ -198,16 +199,6 @@ describe('@autocomplete: component checks', () => {
     );
   });
 
-  /*
-   * In this test:
-   * [0] for modal backdrop
-   * ...rest for options
-   */
-  const touchables = {
-    findBackdropTouchable: (api: RenderAPI) => api.queryAllByType(TouchableOpacity)[0],
-    findOptionTouchable: (api: RenderAPI, index: number) => api.queryAllByType(TouchableOpacity)[index + 1],
-  };
-
   it('should render TextInput', () => {
     const component = render(
       <TestAutocomplete/>,
@@ -281,7 +272,7 @@ describe('@autocomplete: component checks', () => {
     fireEvent(component.queryByType(TextInput), 'focus');
     await waitForElement(() => null);
 
-    fireEvent.press(touchables.findOptionTouchable(component, 1));
+    fireEvent.press(component.queryAllByType(TouchableWithoutFeedback)[2]);
     expect(onSelect).toBeCalledWith(1);
   });
 
@@ -292,10 +283,10 @@ describe('@autocomplete: component checks', () => {
 
     fireEvent(component.queryByType(TextInput), 'focus');
 
-    const backdrop = await waitForElement(() => touchables.findBackdropTouchable(component));
+    const backdrop = await waitForElement(() => component.queryAllByType(TouchableWithoutFeedback)[1]);
     fireEvent.press(backdrop);
 
-    const firstOption = await waitForElement(() => touchables.findOptionTouchable(component, 0));
+    const firstOption = await waitForElement(() => component.queryAllByType(TouchableWithoutFeedback)[2]);
     const secondOption = component.queryByText('Option 2');
 
     expect(firstOption).toBeFalsy();
diff --git a/src/components/ui/avatar/avatar.component.tsx b/src/components/ui/avatar/avatar.component.tsx
index 20f83c378..d2ee2e87b 100644
--- a/src/components/ui/avatar/avatar.component.tsx
+++ b/src/components/ui/avatar/avatar.component.tsx
@@ -14,6 +14,7 @@ import {
 import {
   EvaSize,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -22,7 +23,7 @@ import {
 } from '../../theme';
 
 type AvatarStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export type AvatarProps<P = ImageProps> = AvatarStyledProps & P & {
diff --git a/src/components/ui/bottomNavigation/bottomNavigation.component.tsx b/src/components/ui/bottomNavigation/bottomNavigation.component.tsx
index 04efa67ab..54b7d9cb4 100644
--- a/src/components/ui/bottomNavigation/bottomNavigation.component.tsx
+++ b/src/components/ui/bottomNavigation/bottomNavigation.component.tsx
@@ -15,6 +15,7 @@ import {
 import {
   ChildrenWithProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -31,7 +32,7 @@ import {
 } from '../shared/tabIndicator.component';
 
 type BottomNavigationStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'noIndicator' | string;
+  appearance?: LiteralUnion<'default' | 'noIndicator'>;
 }>;
 
 export interface BottomNavigationProps extends ViewProps, BottomNavigationStyledProps {
diff --git a/src/components/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/components/ui/bottomNavigation/bottomNavigationTab.component.tsx
index e5e88ee42..48f83952f 100644
--- a/src/components/ui/bottomNavigation/bottomNavigationTab.component.tsx
+++ b/src/components/ui/bottomNavigation/bottomNavigationTab.component.tsx
@@ -19,6 +19,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -29,7 +30,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type BottomNavigationTabStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default' | string>;
 }>;
 
 export interface BottomNavigationTabProps extends TouchableWebProps, BottomNavigationTabStyledProps {
diff --git a/src/components/ui/button/button.component.tsx b/src/components/ui/button/button.component.tsx
index 9401fe1e4..ed14c640f 100644
--- a/src/components/ui/button/button.component.tsx
+++ b/src/components/ui/button/button.component.tsx
@@ -22,6 +22,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -32,7 +33,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type ButtonStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'filled' | 'outline' | 'ghost' | string;
+  appearance?: LiteralUnion<'filled' | 'outline' | 'ghost'>;
 }>;
 
 export interface ButtonProps extends TouchableWebProps, ButtonStyledProps {
diff --git a/src/components/ui/buttonGroup/buttonGroup.component.tsx b/src/components/ui/buttonGroup/buttonGroup.component.tsx
index 018f01fce..63a9b9fad 100644
--- a/src/components/ui/buttonGroup/buttonGroup.component.tsx
+++ b/src/components/ui/buttonGroup/buttonGroup.component.tsx
@@ -16,6 +16,7 @@ import {
   EvaSize,
   EvaStatus,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -28,7 +29,7 @@ import {
 } from '../button/button.component';
 
 type ButtonGroupStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'filled' | 'outline' | string;
+  appearance?: LiteralUnion<'filled' | 'outline'>;
 }>;
 
 export interface ButtonGroupProps extends ViewProps, ButtonGroupStyledProps {
diff --git a/src/components/ui/card/card.component.tsx b/src/components/ui/card/card.component.tsx
index c90eb04da..06c2cfc3f 100644
--- a/src/components/ui/card/card.component.tsx
+++ b/src/components/ui/card/card.component.tsx
@@ -19,6 +19,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -29,7 +30,7 @@ import {
 import { Divider } from '../divider/divider.component';
 
 type CardStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'filled' | 'outline' | string;
+  appearance?: LiteralUnion<'filled' | 'outline'>;
 }>;
 
 export interface CardProps extends TouchableWebProps, CardStyledProps {
@@ -126,7 +127,7 @@ export class Card extends React.Component<CardProps> {
 
   private renderStatusAccent = (evaStyle): React.ReactElement => {
     return (
-      <View style={evaStyle}/>
+      <View style={evaStyle} />
     );
   };
 
@@ -149,11 +150,11 @@ export class Card extends React.Component<CardProps> {
           style={[styles.transparent, evaStyle.header]}
           component={header}
         />
-        {header && <Divider/>}
+        {header && <Divider />}
         <View style={evaStyle.body}>
           {children}
         </View>
-        {footer && <Divider/>}
+        {footer && <Divider />}
         <FalsyFC
           style={[styles.transparent, evaStyle.footer]}
           component={footer}
diff --git a/src/components/ui/checkbox/checkbox.component.tsx b/src/components/ui/checkbox/checkbox.component.tsx
index f275d99a4..a64f4d9e8 100644
--- a/src/components/ui/checkbox/checkbox.component.tsx
+++ b/src/components/ui/checkbox/checkbox.component.tsx
@@ -21,6 +21,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -39,7 +40,7 @@ import {
 } from '../shared/minus.component';
 
 type CheckBoxStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default' | string>;
 }>;
 
 export interface CheckBoxProps extends TouchableWebProps, CheckBoxStyledProps {
@@ -211,7 +212,7 @@ export class CheckBox extends React.Component<CheckBoxProps> {
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}>
         <View style={styles.highlightContainer}>
-          <View style={[evaStyle.highlight, styles.highlight]}/>
+          <View style={[evaStyle.highlight, styles.highlight]} />
           <View style={[evaStyle.selectContainer, styles.selectContainer]}>
             {this.renderIconElement(evaStyle.icon)}
           </View>
diff --git a/src/components/ui/divider/divider.component.tsx b/src/components/ui/divider/divider.component.tsx
index 899b815d2..d384ad09e 100644
--- a/src/components/ui/divider/divider.component.tsx
+++ b/src/components/ui/divider/divider.component.tsx
@@ -9,14 +9,14 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import { Overwrite } from '../../devsupport';
+import { Overwrite, LiteralUnion } from '../../devsupport';
 import {
   styled,
   StyledComponentProps,
 } from '../../theme';
 
 type DividerStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export type DividerProps = ViewProps & DividerStyledProps;
diff --git a/src/components/ui/drawer/drawer.component.tsx b/src/components/ui/drawer/drawer.component.tsx
index 03fa78f5b..92831c169 100644
--- a/src/components/ui/drawer/drawer.component.tsx
+++ b/src/components/ui/drawer/drawer.component.tsx
@@ -9,11 +9,9 @@ import { ViewProps } from 'react-native';
 import {
   FalsyFC,
   RenderProp,
-  Overwrite,
 } from '../../devsupport';
 import {
   styled,
-  StyledComponentProps,
   StyleType,
 } from '../../theme';
 import {
@@ -21,11 +19,7 @@ import {
   MenuProps,
 } from '../menu/menu.component';
 
-type DrawerStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'noDivider' | string;
-}>;
-
-export interface DrawerProps extends MenuProps, DrawerStyledProps {
+export interface DrawerProps extends MenuProps {
   header?: RenderProp<ViewProps>;
   footer?: RenderProp<ViewProps>;
 }
diff --git a/src/components/ui/input/input.component.tsx b/src/components/ui/input/input.component.tsx
index b236d919b..6942684bd 100644
--- a/src/components/ui/input/input.component.tsx
+++ b/src/components/ui/input/input.component.tsx
@@ -31,6 +31,8 @@ import {
   WebEventResponderCallbacks,
   WebEventResponderInstance,
   Overwrite,
+  LiteralUnion,
+  TouchableWithoutFeedback,
 } from '../../devsupport';
 import {
   Interaction,
@@ -41,7 +43,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type InputStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface InputProps extends TextInputProps, InputStyledProps {
@@ -257,7 +259,9 @@ export class Input extends React.Component<InputProps> implements WebEventRespon
     const evaStyle = this.getComponentStyle(eva.style);
 
     return (
-      <View style={evaStyle.container}>
+      <TouchableWithoutFeedback
+        style={evaStyle.container}
+        onPress={this.focus}>
         <FalsyText
           style={[evaStyle.label, styles.label]}
           component={label}
@@ -286,7 +290,7 @@ export class Input extends React.Component<InputProps> implements WebEventRespon
           style={[evaStyle.captionLabel, styles.captionLabel]} 
           component={caption}
         />
-      </View>
+      </TouchableWithoutFeedback>
     );
   }
 }
diff --git a/src/components/ui/layout/layout.component.tsx b/src/components/ui/layout/layout.component.tsx
index 0b19fafea..e66e3ffb6 100644
--- a/src/components/ui/layout/layout.component.tsx
+++ b/src/components/ui/layout/layout.component.tsx
@@ -9,19 +9,19 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import { Overwrite } from '../../devsupport';
+import { Overwrite, LiteralUnion } from '../../devsupport';
 import {
   styled,
   StyledComponentProps,
 } from '../../theme';
 
 type LayoutStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface LayoutProps extends ViewProps, LayoutStyledProps {
   children?: React.ReactNode;
-  level?: '1' | '2' | '3' | '4' | string;
+  level?: LiteralUnion<'1' | '2' | '3' | '4'>;
 }
 
 export type LayoutElement = React.ReactElement<LayoutProps>;
diff --git a/src/components/ui/list/list.component.tsx b/src/components/ui/list/list.component.tsx
index e2275f409..60ea4b614 100644
--- a/src/components/ui/list/list.component.tsx
+++ b/src/components/ui/list/list.component.tsx
@@ -9,14 +9,14 @@ import {
   FlatList,
   FlatListProps,
 } from 'react-native';
-import { Overwrite } from '../../devsupport';
+import { Overwrite, LiteralUnion } from '../../devsupport';
 import {
   styled,
   StyledComponentProps,
 } from '../../theme';
 
 type ListStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export type ListProps<ItemT = any> = FlatListProps<ItemT> & ListStyledProps;
diff --git a/src/components/ui/list/listItem.component.tsx b/src/components/ui/list/listItem.component.tsx
index ef560b8f2..f7737583c 100644
--- a/src/components/ui/list/listItem.component.tsx
+++ b/src/components/ui/list/listItem.component.tsx
@@ -21,6 +21,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -31,7 +32,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type ListItemStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface ListItemProps extends TouchableWebProps, ListItemStyledProps {
diff --git a/src/components/ui/menu/menu.component.tsx b/src/components/ui/menu/menu.component.tsx
index 69d3a4a0e..39441e230 100644
--- a/src/components/ui/menu/menu.component.tsx
+++ b/src/components/ui/menu/menu.component.tsx
@@ -10,11 +10,9 @@ import {
   ChildrenWithProps,
   IndexPath,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
-import {
-  styled,
-  StyledComponentProps,
-} from '../../theme';
+import { styled } from '../../theme';
 import { Divider } from '../divider/divider.component';
 import {
   List,
@@ -30,13 +28,13 @@ import {
   MenuService,
 } from './menu.service';
 
-type MenuStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'noDivider' | string;
+type MenuStyledProps = Overwrite<ListProps, {
+  appearance?: LiteralUnion<'default' | 'noDivider'>;
 }>;
 
-type MenuListProps = Omit<ListProps, 'data' | 'renderItem'>;
+type MenuListProps = Omit<MenuStyledProps, 'data' | 'renderItem'>;
 
-export interface MenuProps extends MenuListProps, MenuStyledProps {
+export interface MenuProps extends MenuListProps {
   children?: ChildrenWithProps<MenuItemProps>;
   selectedIndex?: IndexPath;
   onSelect?: (index: IndexPath) => void;
diff --git a/src/components/ui/menu/menuItem.component.tsx b/src/components/ui/menu/menuItem.component.tsx
index b4b5cf8bb..a83958e92 100644
--- a/src/components/ui/menu/menuItem.component.tsx
+++ b/src/components/ui/menu/menuItem.component.tsx
@@ -21,6 +21,7 @@ import {
   TouchableWeb,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -32,7 +33,7 @@ import { TextProps } from '../text/text.component';
 import { MenuItemDescriptor } from './menu.service';
 
 type MenuItemStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'grouped' | string;
+  appearance?: LiteralUnion<'default' | 'grouped'>;
 }>;
 
 type TouchableMenuItemProps = Overwrite<TouchableWebProps, {
@@ -157,7 +158,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
         onPress={this.onPress}
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}>
-        <View style={[StyleSheet.absoluteFill, evaStyle.indicator]}/>
+        <View style={[StyleSheet.absoluteFill, evaStyle.indicator]} />
         <FalsyFC
           style={evaStyle.icon}
           component={accessoryLeft}
diff --git a/src/components/ui/radio/radio.component.tsx b/src/components/ui/radio/radio.component.tsx
index 240088f40..4b4bbe26d 100644
--- a/src/components/ui/radio/radio.component.tsx
+++ b/src/components/ui/radio/radio.component.tsx
@@ -20,6 +20,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -30,7 +31,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type RadioStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface RadioProps extends TouchableWebProps, RadioStyledProps {
@@ -184,9 +185,9 @@ export class Radio extends React.Component<RadioProps> {
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}>
         <View style={styles.highlightContainer}>
-          <View style={[evaStyle.highlight, styles.highlight]}/>
+          <View style={[evaStyle.highlight, styles.highlight]} />
           <View style={[evaStyle.selectContainer, styles.selectContainer]}>
-            <View style={evaStyle.icon}/>
+            <View style={evaStyle.icon} />
           </View>
         </View>
         <FalsyText
diff --git a/src/components/ui/radioGroup/radioGroup.component.tsx b/src/components/ui/radioGroup/radioGroup.component.tsx
index 8763ad439..a5c884b47 100644
--- a/src/components/ui/radioGroup/radioGroup.component.tsx
+++ b/src/components/ui/radioGroup/radioGroup.component.tsx
@@ -12,6 +12,7 @@ import {
 import {
   ChildrenWithProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -24,7 +25,7 @@ import {
 } from '../radio/radio.component';
 
 type RadioGroupStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface RadioGroupProps extends ViewProps, RadioGroupStyledProps {
diff --git a/src/components/ui/select/select.component.tsx b/src/components/ui/select/select.component.tsx
index 975102597..34d179021 100644
--- a/src/components/ui/select/select.component.tsx
+++ b/src/components/ui/select/select.component.tsx
@@ -31,6 +31,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -52,7 +53,7 @@ import {
 } from './select.service';
 
 type SelectStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface SelectProps extends TouchableWebProps, SelectStyledProps {
@@ -443,7 +444,7 @@ export class Select extends React.Component<SelectProps, State> {
     const { tintColor, ...svgStyle } = evaStyle;
     return (
       <Animated.View style={{ transform: [{ rotate: this.expandToRotateInterpolation }] }}>
-        <ChevronDown style={svgStyle} fill={tintColor}/>
+        <ChevronDown style={svgStyle} fill={tintColor} />
       </Animated.View>
     );
   };
diff --git a/src/components/ui/select/selectItem.component.tsx b/src/components/ui/select/selectItem.component.tsx
index 0450125f7..a8ee1ce40 100644
--- a/src/components/ui/select/selectItem.component.tsx
+++ b/src/components/ui/select/selectItem.component.tsx
@@ -21,6 +21,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -36,7 +37,7 @@ import { TextProps } from '../text/text.component';
 import { SelectItemDescriptor } from './select.service';
 
 type SelectItemStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'grouped' | string;
+  appearance?: LiteralUnion<'default' | 'grouped'>;
 }>;
 
 type TouchableSelectProps = Overwrite<TouchableWebProps, {
diff --git a/src/components/ui/spinner/spinner.component.tsx b/src/components/ui/spinner/spinner.component.tsx
index 9d96f0a5e..6dd3b960e 100644
--- a/src/components/ui/spinner/spinner.component.tsx
+++ b/src/components/ui/spinner/spinner.component.tsx
@@ -17,6 +17,7 @@ import {
   EvaStatus,
   Size,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -28,7 +29,7 @@ import {
 } from './animation';
 
 type SpinnerStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface SpinnerProps extends ViewProps, SpinnerStyledProps {
@@ -145,7 +146,7 @@ export class Spinner extends React.PureComponent<SpinnerProps> {
         <View style={[styles.noOverflow, style.overflow, arcSize]}>
           <Animated.View style={[style.arc, size]}>
             <View style={[styles.noOverflow, arcSize]}>
-              <View style={[this.props.eva.style, this.props.style]}/>
+              <View style={[this.props.eva.style, this.props.style]} />
             </View>
           </Animated.View>
         </View>
diff --git a/src/components/ui/tab/tab.component.tsx b/src/components/ui/tab/tab.component.tsx
index 9e3b2898b..cf92ae076 100644
--- a/src/components/ui/tab/tab.component.tsx
+++ b/src/components/ui/tab/tab.component.tsx
@@ -19,6 +19,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -29,7 +30,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type TabStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface TabProps extends TouchableWebProps, TabStyledProps {
diff --git a/src/components/ui/tab/tabBar.component.tsx b/src/components/ui/tab/tabBar.component.tsx
index e78d70842..f126ab243 100644
--- a/src/components/ui/tab/tabBar.component.tsx
+++ b/src/components/ui/tab/tabBar.component.tsx
@@ -15,6 +15,7 @@ import {
 import {
   ChildrenWithProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -28,7 +29,7 @@ import {
 import { TabIndicator } from '../shared/tabIndicator.component';
 
 type TabBarStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface TabBarProps extends ViewProps, TabBarStyledProps {
diff --git a/src/components/ui/text/text.component.tsx b/src/components/ui/text/text.component.tsx
index 7919d01bb..bdb6b9c12 100644
--- a/src/components/ui/text/text.component.tsx
+++ b/src/components/ui/text/text.component.tsx
@@ -12,22 +12,22 @@ import {
 import {
   EvaStatus,
   Overwrite,
- } from '../../devsupport';
+  LiteralUnion,
+} from '../../devsupport';
 import {
   styled,
   StyledComponentProps,
 } from '../../theme';
 
 type TextStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'alternative' | 'hint' | string;
+  appearance?: LiteralUnion<'default' | 'alternative' | 'hint'>;
 }>;
 
 type ChildElement = React.ReactText | TextElement;
 
 export interface TextProps extends RNTextProps, TextStyledProps {
   children?: ChildElement | ChildElement[];
-  appearance?: 'default' | 'alternative' | 'hint' | string;
-  category?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 's1' | 's2' | 'p1' | 'p2' | 'c1' | 'c2' | 'label' | string;
+  category?: LiteralUnion<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 's1' | 's2' | 'p1' | 'p2' | 'c1' | 'c2' | 'label'>;
   status?: EvaStatus;
 }
 
diff --git a/src/components/ui/toggle/toggle.component.tsx b/src/components/ui/toggle/toggle.component.tsx
index 216b6ae06..9710986f7 100644
--- a/src/components/ui/toggle/toggle.component.tsx
+++ b/src/components/ui/toggle/toggle.component.tsx
@@ -27,6 +27,7 @@ import {
   TouchableWeb,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -38,7 +39,7 @@ import { TextProps } from '../text/text.component';
 import { CheckMark } from '../shared/checkmark.component';
 
 type ToggleStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
+  appearance?: LiteralUnion<'default'>;
 }>;
 
 export interface ToggleProps extends TouchableWebProps, ToggleStyledProps {
@@ -383,9 +384,9 @@ export class Toggle extends React.Component<ToggleProps> implements PanResponder
           onMouseLeave={this.onMouseLeave}
           onFocus={this.onFocus}
           onBlur={this.onBlur}>
-          <View style={[evaStyle.highlight, styles.highlight]}/>
+          <View style={[evaStyle.highlight, styles.highlight]} />
           <Animated.View style={[evaStyle.ellipseContainer, styles.ellipseContainer]}>
-            <Animated.View style={[evaStyle.ellipse, styles.ellipse]}/>
+            <Animated.View style={[evaStyle.ellipse, styles.ellipse]} />
             <Animated.View style={[evaStyle.thumb, styles.thumb]}>
               <CheckMark {...evaStyle.icon} />
             </Animated.View>
diff --git a/src/components/ui/tooltip/tooltip.component.tsx b/src/components/ui/tooltip/tooltip.component.tsx
index 34d4fdd8b..e652f2a7e 100644
--- a/src/components/ui/tooltip/tooltip.component.tsx
+++ b/src/components/ui/tooltip/tooltip.component.tsx
@@ -7,11 +7,9 @@
 import React from 'react';
 import {
   ImageProps,
-  StyleProp,
   StyleSheet,
   View,
   ViewProps,
-  ViewStyle,
 } from 'react-native';
 import {
   FalsyFC,
@@ -21,7 +19,6 @@ import {
 } from '../../devsupport';
 import {
   styled,
-  StyledComponentProps,
   StyleType,
 } from '../../theme';
 import {
@@ -32,15 +29,11 @@ import {
 import { PopoverIndicator } from '../popover/popoverIndicator.component';
 import { TextProps } from '../text/text.component';
 
-type TooltipStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | string;
-}>;
-
 type TooltipPopoverProps = Overwrite<PopoverProps, {
   children: RenderProp<TextProps> | React.ReactText;
 }>;
 
-export interface TooltipProps extends TooltipPopoverProps, TooltipStyledProps {
+export interface TooltipProps extends TooltipPopoverProps {
   accessoryLeft?: RenderProp<Partial<ImageProps>>;
   accessoryRight?: RenderProp<Partial<ImageProps>>;
 }
@@ -161,7 +154,7 @@ export class Tooltip extends React.Component<TooltipProps> {
   private renderPopoverIndicatorElement = (props: ViewProps): React.ReactElement => {
     const evaStyle = this.getComponentStyle(this.props.eva.style);
     return (
-      <PopoverIndicator {...props} style={[props.style, evaStyle.indicator]}/>
+      <PopoverIndicator {...props} style={[props.style, evaStyle.indicator]} />
     );
   };
 
diff --git a/src/components/ui/topNavigation/topNavigation.component.tsx b/src/components/ui/topNavigation/topNavigation.component.tsx
index bb0e2572f..004f0d0ed 100644
--- a/src/components/ui/topNavigation/topNavigation.component.tsx
+++ b/src/components/ui/topNavigation/topNavigation.component.tsx
@@ -15,6 +15,7 @@ import {
   FalsyText,
   RenderProp,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   styled,
@@ -24,7 +25,7 @@ import {
 import { TextProps } from '../text/text.component';
 
 type TopNavigationStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'control' | string;
+  appearance?: LiteralUnion<'default' | 'control'>;
 }>;
 
 export interface TopNavigationProps extends ViewProps, TopNavigationStyledProps {
@@ -156,7 +157,7 @@ export class TopNavigation extends React.Component<TopNavigationProps> {
         style={[evaStyles.container, styles.container, alignmentStyles.container, style]}
         {...viewProps}>
         <View style={styles.leftControlContainer}>
-          <FalsyFC component={accessoryLeft}/>
+          <FalsyFC component={accessoryLeft} />
         </View>
         <View style={alignmentStyles.titleContainer || styles.titleContainer}>
           <FalsyText
@@ -169,7 +170,7 @@ export class TopNavigation extends React.Component<TopNavigationProps> {
           />
         </View>
         <View style={[styles.rightControlsContainer, alignmentStyles.rightControlsContainer]}>
-          <FalsyFC component={accessoryRight}/>
+          <FalsyFC component={accessoryRight} />
         </View>
       </View>
     );
diff --git a/src/components/ui/topNavigation/topNavigationAction.component.tsx b/src/components/ui/topNavigation/topNavigationAction.component.tsx
index d3bb13651..99e345d20 100644
--- a/src/components/ui/topNavigation/topNavigationAction.component.tsx
+++ b/src/components/ui/topNavigation/topNavigationAction.component.tsx
@@ -18,6 +18,7 @@ import {
   TouchableWebElement,
   TouchableWebProps,
   Overwrite,
+  LiteralUnion,
 } from '../../devsupport';
 import {
   Interaction,
@@ -27,7 +28,7 @@ import {
 } from '../../theme';
 
 type TopNavigationActionStyledProps = Overwrite<StyledComponentProps, {
-  appearance?: 'default' | 'control' | string;
+  appearance?: LiteralUnion<'default' | 'control'>;
 }>;
 
 export interface TopNavigationActionProps extends TouchableWebProps, TopNavigationActionStyledProps {
diff --git a/src/components/ui/viewPager/viewPager.component.tsx b/src/components/ui/viewPager/viewPager.component.tsx
index 2bcdd69b9..188a6a457 100644
--- a/src/components/ui/viewPager/viewPager.component.tsx
+++ b/src/components/ui/viewPager/viewPager.component.tsx
@@ -78,6 +78,10 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
   private contentOffset: Animated.Value = new Animated.Value(this.contentOffsetValue);
   private panResponder: PanResponderInstance = PanResponder.create(this);
 
+  private get children(): React.ReactElement<ChildrenProps>[] {
+    return React.Children.toArray(this.props.children).filter(Boolean) as React.ReactElement<ChildrenProps>[];
+  }
+
   public componentDidMount(): void {
     this.contentOffset.addListener(this.onContentOffsetAnimationStateChanged);
   }
@@ -93,19 +97,19 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
     this.contentOffset.removeAllListeners();
   }
 
-  public onMoveShouldSetPanResponder = (event: GestureResponderEvent, state: PanResponderGestureState): boolean => {
+  public onMoveShouldSetPanResponder = (_event: GestureResponderEvent, state: PanResponderGestureState): boolean => {
     const isHorizontalMove: boolean = Math.abs(state.dx) > 0 && Math.abs(state.dx) > Math.abs(state.dy);
 
     if (isHorizontalMove) {
       const i18nOffset: number = RTLService.select(state.dx, -state.dx);
       const nextSelectedIndex: number = this.props.selectedIndex - Math.sign(i18nOffset);
-      return nextSelectedIndex >= 0 && nextSelectedIndex < this.getChildCount();
+      return nextSelectedIndex >= 0 && nextSelectedIndex < this.children.length;
     }
 
     return false;
   };
 
-  public onPanResponderMove = (event: GestureResponderEvent, state: PanResponderGestureState): void => {
+  public onPanResponderMove = (_event: GestureResponderEvent, state: PanResponderGestureState): void => {
     const i18nOffset: number = RTLService.select(this.contentWidth, -this.contentWidth);
     const selectedPageOffset: number = this.props.selectedIndex * i18nOffset;
 
@@ -125,7 +129,7 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
 
   public scrollToIndex(params: { index: number, animated?: boolean }): void {
     const { index, ...rest } = params;
-    const childCount = this.getChildCount() - 1;
+    const childCount = this.children.length - 1;
     const offset: number = this.contentWidth * (index < 0 ? 0 : index > childCount ? childCount : index);
 
     this.scrollToOffset({ offset, ...rest });
@@ -136,7 +140,7 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
   };
 
   private onLayout = (event: LayoutChangeEvent): void => {
-    this.contentWidth = event.nativeEvent.layout.width / this.getChildCount();
+    this.contentWidth = event.nativeEvent.layout.width / this.children.length;
     this.scrollToIndex({ index: this.props.selectedIndex });
   };
 
@@ -148,7 +152,7 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
     }
   };
 
-  private onContentOffsetAnimationStateEnd = (result: { finished: boolean }): void => {
+  private onContentOffsetAnimationStateEnd = (_result: { finished: boolean }): void => {
     const selectedIndex: number = this.contentOffsetValue / this.contentWidth;
 
     if (selectedIndex !== this.props.selectedIndex && this.props.onSelect) {
@@ -167,6 +171,15 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
     });
   };
 
+  private getContainerStyle = (): ViewStyle => {
+    return {
+      width: `${100 * this.children.length}%`,
+
+      // @ts-ignore: RN has no types for `Animated` styles
+      transform: [{ translateX: this.contentOffset }],
+    };
+  };
+
   private renderComponentChild = (source: React.ReactElement<ChildrenProps>, index: number): React.ReactElement => {
     const contentView = this.props.shouldLoadComponent(index) ? source : null;
 
@@ -177,21 +190,8 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
     );
   };
 
-  private renderComponentChildren = (source: ChildrenWithProps<ChildrenProps>): React.ReactElement[] => {
-    return React.Children.map(source, this.renderComponentChild);
-  };
-
-  private getChildCount = (): number => {
-    return React.Children.count(this.props.children);
-  };
-
-  private getContainerStyle = (): ViewStyle => {
-    return {
-      width: `${100 * this.getChildCount()}%`,
-
-      // @ts-ignore: RN has no types for `Animated` styles
-      transform: [{ translateX: this.contentOffset }],
-    };
+  private renderComponentChildren = (): React.ReactElement[] => {
+    return React.Children.map(this.children, this.renderComponentChild);
   };
 
   public render(): React.ReactElement<ViewProps> {
@@ -207,7 +207,7 @@ export class ViewPager<ChildrenProps = {}> extends React.Component<ViewPagerProp
         onLayout={this.onLayout}
         // @ts-ignore
         ref={this.containerRef}>
-        {this.renderComponentChildren(children)}
+        {this.renderComponentChildren()}
       </Animated.View>
     );
   }