From 6d45b6f5b69a7401aebcd34bac91ff91ada3a890 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Mon, 11 Mar 2019 17:57:05 +0300
Subject: [PATCH 1/6] feat(ui): overflow-menu component add

---
 src/framework/ui/index.ts                     |  16 +++
 .../overflowMenu/overflowMenu.component.tsx   | 134 ++++++++++++++++++
 .../overflowMenuItem.component.tsx            | 118 +++++++++++++++
 src/playground/src/ui/screen/index.ts         |   1 +
 .../src/ui/screen/overflowMenu.component.tsx  | 108 ++++++++++++++
 5 files changed, 377 insertions(+)
 create mode 100644 src/framework/ui/overflowMenu/overflowMenu.component.tsx
 create mode 100644 src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
 create mode 100644 src/playground/src/ui/screen/overflowMenu.component.tsx

diff --git a/src/framework/ui/index.ts b/src/framework/ui/index.ts
index 09d98978a..64a838774 100644
--- a/src/framework/ui/index.ts
+++ b/src/framework/ui/index.ts
@@ -83,6 +83,15 @@ import {
   Placement as PopoverPlacement,
   Placements as PopoverPlacements,
 } from './popover/type';
+import {
+  OverflowMenuItem as OverflowMenuItemComponent,
+  Props as OverflowMenuItemProps,
+  OverflowMenuItemType,
+} from './overflowMenu/overflowMenuItem.component';
+import {
+  OverflowMenu as OverflowMenuComponent,
+  Props as OverflowMenuProps,
+} from './overflowMenu/overflowMenu.component';
 
 const Button = styled<ButtonComponent, ButtonProps>(ButtonComponent);
 const ButtonGroup = styled<ButtonGroupComponent, ButtonGroupProps>(ButtonGroupComponent);
@@ -102,6 +111,8 @@ const TopNavigationBar = styled<TopNavigationBarComponent, TopNavigationBarProps
 const TopNavigationBarAction =
   styled<TopNavigationBarActionComponent, TopNavigationBarActionProps>(TopNavigationBarActionComponent);
 const Modal = styled<ModalComponent, ModalProps>(ModalComponent);
+const OverflowMenuItem = styled<OverflowMenuItemComponent, OverflowMenuItemProps>(OverflowMenuItemComponent);
+const OverflowMenu = styled<OverflowMenuComponent, OverflowMenuProps>(OverflowMenuComponent);
 
 export {
   Button,
@@ -145,4 +156,9 @@ export {
   ButtonAlignments,
   PopoverPlacement,
   PopoverPlacements,
+  OverflowMenuItem,
+  OverflowMenuItemProps,
+  OverflowMenuItemType,
+  OverflowMenu,
+  OverflowMenuProps,
 };
diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
new file mode 100644
index 000000000..0edb5f61d
--- /dev/null
+++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  GestureResponderEvent,
+  StyleSheet,
+  ImageProps,
+  ViewProps,
+  View,
+} from 'react-native';
+import {
+  StyledComponentProps,
+  StyleType,
+  Interaction,
+  styled,
+} from '@kitten/theme';
+import {
+  OverflowMenuItemType,
+  OverflowMenuItem as OverflowMenuItemComponent,
+  Props as OverflowMenuItemProps,
+} from './overflowMenuItem.component';
+import {
+  Popover as PopoverComponent,
+  Props as PopoverProps,
+} from '../popover/popover.component';
+import { Omit } from '../service/type';
+
+type MenuItemElement = React.ReactElement<OverflowMenuItemProps>;
+export type MenuItemType = Omit<OverflowMenuItemType, 'size'>;
+
+interface OverflowMenuProps {
+  children: React.ReactElement<any>;
+  items: MenuItemType[];
+  size?: string;
+  onSelect?: (index: number) => void;
+}
+
+const Popover = styled<PopoverComponent, PopoverProps>(PopoverComponent);
+const OverflowMenuItem =
+  styled<OverflowMenuItemComponent, OverflowMenuItemProps>(OverflowMenuItemComponent);
+
+export type Props = & StyledComponentProps & OverflowMenuProps & Omit<PopoverProps, 'content'>;
+
+export class OverflowMenu extends React.Component<Props> {
+
+  static defaultProps: Partial<Props> = {
+    size: 'medium',
+  };
+
+  private onSelect = (index: number): void => {
+    if (this.props.onSelect) {
+      this.props.onSelect(index);
+    }
+  };
+
+  private isFirstItem = (index: number): boolean => {
+    return index === 0;
+  };
+
+  private isLastItem = (index: number): boolean => {
+    return this.props.items.length - 1 === index;
+  };
+
+  private isSingleItem = (): boolean => {
+    return this.props.items.length === 1;
+  };
+
+  private getMenuItemStyle = (style: StyleType, index: number): StyleType => {
+    const borderRadius: number = style.menuItem.borderRadius;
+
+    if (this.isFirstItem(index)) {
+      return {
+        borderTopLeftRadius: borderRadius,
+        borderTopRightRadius: borderRadius,
+      };
+    } else if (this.isLastItem(index)) {
+      return {
+        borderBottomLeftRadius: borderRadius,
+        borderBottomRightRadius: borderRadius,
+      };
+    } else if (this.isSingleItem()) {
+      return {
+        borderRadius: borderRadius,
+      };
+    } else {
+      return null;
+    }
+  };
+
+  private renderMenuItem = (item: MenuItemType, index: number): MenuItemElement => {
+    const { size, themedStyle } = this.props;
+    const itemStyle: StyleType = this.getMenuItemStyle(themedStyle, index);
+
+    return (
+      <OverflowMenuItem
+        text={item.text}
+        icon={item.icon}
+        size={size}
+        isLastItem={this.isLastItem(index)}
+        style={itemStyle}
+        key={index}
+        onPress={() => this.onSelect(index)}
+      />
+    );
+  };
+
+  private renderMenuContent = (): React.ReactElement<ViewProps> => {
+    const { items, style } = this.props;
+    const menuItems: MenuItemElement[] = items
+      .map((item: MenuItemType, index: number) => this.renderMenuItem(item, index));
+
+    return (
+      <View style={style}>
+        {menuItems}
+      </View>
+    );
+  };
+
+  public render(): React.ReactNode {
+    const { children, themedStyle, ...restProps } = this.props;
+    const menu: React.ReactElement<ViewProps> = this.renderMenuContent();
+
+    return (
+      <Popover
+        {...restProps}
+        content={menu}
+        style={themedStyle.borderRadius}>
+        {children}
+      </Popover>
+    );
+  }
+}
+
+const styles = StyleSheet.create({});
diff --git a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
new file mode 100644
index 000000000..90a4d1ae6
--- /dev/null
+++ b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  GestureResponderEvent,
+  StyleSheet,
+  ImageProps,
+} from 'react-native';
+import {
+  StyledComponentProps,
+  StyleType,
+  Interaction,
+  styled,
+} from '@kitten/theme';
+import {
+  Text as TextComponent,
+  Props as TextProps,
+} from '../text/text.component';
+
+export interface OverflowMenuItemType {
+  icon?: (style: StyleType) => React.ReactElement<ImageProps>;
+  text: React.ReactText;
+  size?: string;
+  isLastItem?: boolean;
+  onPress?: () => void;
+}
+
+const Text = styled<TextComponent, TextProps>(TextComponent);
+
+export type Props = OverflowMenuItemType & StyledComponentProps & TouchableOpacityProps;
+
+export class OverflowMenuItem extends React.Component<Props> {
+
+  static defaultProps: Partial<Props> = {
+    isLastItem: false,
+  };
+
+  private onPress = (event: GestureResponderEvent) => {
+    if (this.props.onPress) {
+      this.props.onPress(event);
+    }
+  };
+
+  private onPressIn = (event: GestureResponderEvent) => {
+    this.props.dispatch([Interaction.ACTIVE]);
+
+    if (this.props.onPressIn) {
+      this.props.onPressIn(event);
+    }
+  };
+
+  private onPressOut = (event: GestureResponderEvent) => {
+    this.props.dispatch([]);
+
+    if (this.props.onPressOut) {
+      this.props.onPressOut(event);
+    }
+  };
+
+  private getComponentStyle = (style: StyleType): StyleType => {
+    const { isLastItem } = this.props;
+    const { text, icon, ...container } = style;
+    const { borderColor, borderWidth, ...restContainerProps } = container;
+
+    return {
+      container: {
+        borderBottomColor: !isLastItem ? borderColor : null,
+        borderBottomWidth: !isLastItem ? borderWidth : null,
+        ...restContainerProps,
+      },
+      text: text,
+      icon: icon,
+    };
+  };
+
+  private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => (
+    <Text
+      style={style}
+      key={2}>
+      {this.props.text}
+    </Text>
+  );
+
+  private renderImageElement = (style: StyleType): React.ReactElement<ImageProps> | null => {
+    const { icon } = this.props;
+    return icon ? React.cloneElement(icon(style), { key: 1 }) : null;
+  };
+
+  private renderComponentChildren = (style: StyleType): React.ReactNode => ([
+    this.props.icon ? this.renderImageElement(style.icon) : null,
+    this.renderTextElement(style.text),
+  ]);
+
+  public render(): React.ReactNode {
+    const { style, themedStyle, ...restProps } = this.props;
+    const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
+    const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyles);
+
+    return (
+      <TouchableOpacity
+        {...restProps}
+        style={[container, styles.container, style]}
+        activeOpacity={1.0}
+        onPress={this.onPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}>
+        {componentChildren}
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts
index 7e4eb9e36..4f8457c80 100644
--- a/src/playground/src/ui/screen/index.ts
+++ b/src/playground/src/ui/screen/index.ts
@@ -16,3 +16,4 @@ export { TooltipScreen } from './tooltip.component';
 export { TabNavigatorScreen } from './tabNavigator.component';
 export { TopNavigationBarScreen } from './topNavigationBar.component';
 export { ModalScreen } from './modal.component';
+export { OverflowMenuScreen } from './overflowMenu.component';
diff --git a/src/playground/src/ui/screen/overflowMenu.component.tsx b/src/playground/src/ui/screen/overflowMenu.component.tsx
new file mode 100644
index 000000000..a36a9a5b6
--- /dev/null
+++ b/src/playground/src/ui/screen/overflowMenu.component.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  ImageSourcePropType,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { NavigationScreenProps } from 'react-navigation';
+import {
+  withStyles,
+  ThemeType,
+  ThemedComponentProps,
+  StyleType,
+} from '@kitten/theme';
+import {
+  OverflowMenu as OverflowMenuComponent,
+  OverflowMenuItemType,
+} from '@kitten/ui';
+
+type Props = & ThemedComponentProps & NavigationScreenProps;
+
+interface State {
+  overflowMenu1Visible: boolean;
+  overflowMenu2Visible: boolean;
+  overflowMenu3Visible: boolean;
+}
+
+const iconUri1: string = 'https://akveo.github.io/eva-icons/fill/png/128/star.png';
+const iconUri2: string = 'https://akveo.github.io/eva-icons/fill/png/128/alert-triangle.png';
+const iconUri3: string = 'https://akveo.github.io/eva-icons/fill/png/128/book-open.png';
+const menuIconUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/menu.png';
+
+const menu1Items: OverflowMenuItemType[] = [
+  {
+    text: 'Menu Item 1',
+    icon: (style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>,
+  },
+  {
+    text: 'Menu Item 2',
+    icon: (style: StyleType) => <Image source={{ uri: iconUri2 }} style={style}/>,
+  },
+  {
+    text: 'Menu Item 3',
+    icon: (style: StyleType) => <Image source={{ uri: iconUri3 }} style={style}/>,
+  },
+];
+
+class OverflowMenu extends React.Component<Props, State> {
+
+
+  static navigationOptions = {
+    title: 'Overflow Menu',
+  };
+
+  public state: State = {
+    overflowMenu1Visible: false,
+    overflowMenu2Visible: false,
+    overflowMenu3Visible: false,
+  };
+
+  private setMenu1Visible = (): void => {
+    this.setState({ overflowMenu1Visible: !this.state.overflowMenu1Visible });
+  };
+
+  private onSelectItem = (index: number): void => {
+    console.log('Selected item\'s index: ', index);
+  };
+
+  public render(): React.ReactNode {
+    return (
+      <View style={this.props.themedStyle.container}>
+        <TouchableOpacity onPress={this.setMenu1Visible}>
+          <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
+        </TouchableOpacity>
+        <OverflowMenuComponent
+          items={menu1Items}
+          placement='bottom end'
+          visible={this.state.overflowMenu1Visible}
+          // onSelect={(index: number) => this.onSelectItem(index)}
+          onRequestClose={this.setMenu1Visible}
+        >
+          <TouchableOpacity onPress={this.setMenu1Visible}>
+            <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
+          </TouchableOpacity>
+        </OverflowMenuComponent>
+      </View>
+    );
+  }
+}
+
+export const OverflowMenuScreen = withStyles(OverflowMenu, (theme: ThemeType) => ({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  menuIcon: {
+    width: 30,
+    height: 30,
+    tintColor: '#3366FF',
+  },
+  test: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'yellow',
+  },
+}));
+

From ebc4a983c5c6ed0b165cb8783c63dcbce5abdab3 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Tue, 12 Mar 2019 15:37:05 +0300
Subject: [PATCH 2/6] refactor(ui): disabled state and popover style for
 overflow-menu refactor

---
 .../overflowMenu/overflowMenu.component.tsx   | 20 +++++++-------
 .../overflowMenuItem.component.tsx            |  1 +
 .../src/ui/screen/overflowMenu.component.tsx  | 27 ++++++++++++-------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
index 0edb5f61d..853519ab9 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -1,17 +1,12 @@
 import React from 'react';
 import {
-  TouchableOpacity,
-  TouchableOpacityProps,
-  GestureResponderEvent,
   StyleSheet,
-  ImageProps,
   ViewProps,
   View,
 } from 'react-native';
 import {
   StyledComponentProps,
   StyleType,
-  Interaction,
   styled,
 } from '@kitten/theme';
 import {
@@ -65,15 +60,20 @@ export class OverflowMenu extends React.Component<Props> {
     return this.props.items.length === 1;
   };
 
+  private getPopoverStyle = (style: StyleType): StyleType => ({
+    ...style.popover,
+    borderRadius: style.borderRadius,
+  });
+
   private getMenuItemStyle = (style: StyleType, index: number): StyleType => {
     const borderRadius: number = style.menuItem.borderRadius;
 
-    if (this.isFirstItem(index)) {
+    if (this.isFirstItem(index) && !this.isSingleItem()) {
       return {
         borderTopLeftRadius: borderRadius,
         borderTopRightRadius: borderRadius,
       };
-    } else if (this.isLastItem(index)) {
+    } else if (this.isLastItem(index) && !this.isSingleItem()) {
       return {
         borderBottomLeftRadius: borderRadius,
         borderBottomRightRadius: borderRadius,
@@ -93,8 +93,7 @@ export class OverflowMenu extends React.Component<Props> {
 
     return (
       <OverflowMenuItem
-        text={item.text}
-        icon={item.icon}
+        {...item}
         size={size}
         isLastItem={this.isLastItem(index)}
         style={itemStyle}
@@ -119,12 +118,13 @@ export class OverflowMenu extends React.Component<Props> {
   public render(): React.ReactNode {
     const { children, themedStyle, ...restProps } = this.props;
     const menu: React.ReactElement<ViewProps> = this.renderMenuContent();
+    const popoverStyle: StyleType = this.getPopoverStyle(themedStyle);
 
     return (
       <Popover
         {...restProps}
         content={menu}
-        style={themedStyle.borderRadius}>
+        style={[popoverStyle, restProps.style]}>
         {children}
       </Popover>
     );
diff --git a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
index 90a4d1ae6..b0687e9e8 100644
--- a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
@@ -22,6 +22,7 @@ export interface OverflowMenuItemType {
   text: React.ReactText;
   size?: string;
   isLastItem?: boolean;
+  disabled?: boolean;
   onPress?: () => void;
 }
 
diff --git a/src/playground/src/ui/screen/overflowMenu.component.tsx b/src/playground/src/ui/screen/overflowMenu.component.tsx
index a36a9a5b6..2190f30cd 100644
--- a/src/playground/src/ui/screen/overflowMenu.component.tsx
+++ b/src/playground/src/ui/screen/overflowMenu.component.tsx
@@ -5,6 +5,7 @@ import {
   View,
   Image,
   TouchableOpacity,
+  Button,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import {
@@ -39,9 +40,13 @@ const menu1Items: OverflowMenuItemType[] = [
   {
     text: 'Menu Item 2',
     icon: (style: StyleType) => <Image source={{ uri: iconUri2 }} style={style}/>,
+    disabled: true,
   },
   {
     text: 'Menu Item 3',
+  },
+  {
+    text: 'Menu Item 4',
     icon: (style: StyleType) => <Image source={{ uri: iconUri3 }} style={style}/>,
   },
 ];
@@ -70,17 +75,18 @@ class OverflowMenu extends React.Component<Props, State> {
   public render(): React.ReactNode {
     return (
       <View style={this.props.themedStyle.container}>
-        <TouchableOpacity onPress={this.setMenu1Visible}>
-          <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
-        </TouchableOpacity>
+        <Button title={'Show menu'} onPress={this.setMenu1Visible}/>
         <OverflowMenuComponent
           items={menu1Items}
           placement='bottom end'
           visible={this.state.overflowMenu1Visible}
-          // onSelect={(index: number) => this.onSelectItem(index)}
+          style={this.props.themedStyle.menu}
+          onSelect={(index: number) => this.onSelectItem(index)}
           onRequestClose={this.setMenu1Visible}
         >
-          <TouchableOpacity onPress={this.setMenu1Visible}>
+          <TouchableOpacity
+            onPress={this.setMenu1Visible}
+            style={this.props.themedStyle.menuContainer}>
             <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
           </TouchableOpacity>
         </OverflowMenuComponent>
@@ -91,18 +97,21 @@ class OverflowMenu extends React.Component<Props, State> {
 
 export const OverflowMenuScreen = withStyles(OverflowMenu, (theme: ThemeType) => ({
   container: {
+    flex: 1,
     paddingVertical: 8,
     paddingHorizontal: 16,
+    backgroundColor: '#DDE1EB',
+  },
+  menu: {
+    width: 300,
   },
   menuIcon: {
     width: 30,
     height: 30,
     tintColor: '#3366FF',
   },
-  test: {
-    width: 100,
-    height: 100,
-    backgroundColor: 'yellow',
+  menuContainer: {
+    alignItems: 'flex-end',
   },
 }));
 

From 1158bac2cbef5e10d72ada6cdbd9fabf95c42f5d Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Tue, 12 Mar 2019 19:47:46 +0300
Subject: [PATCH 3/6] test(ui): overflow-menu/item tests add

---
 .../theme/service/style/style.service.ts      |    4 +-
 src/framework/ui/modal/modal.component.tsx    |    5 +-
 src/framework/ui/modal/modal.spec.tsx.snap    |   38 +-
 .../overflowMenu/overflowMenu.component.tsx   |    6 +-
 .../overflowMenu/overflowMenu.spec.config.ts  |  171 +++
 .../ui/overflowMenu/overflowMenu.spec.tsx     |  259 ++++
 .../overflowMenu/overflowMenu.spec.tsx.snap   | 1081 +++++++++++++++++
 .../overflowMenuItem.component.tsx            |   22 +-
 .../ui/popover/popover.component.tsx          |    1 +
 .../src/ui/screen/overflowMenu.component.tsx  |  108 +-
 10 files changed, 1652 insertions(+), 43 deletions(-)
 create mode 100644 src/framework/ui/overflowMenu/overflowMenu.spec.config.ts
 create mode 100644 src/framework/ui/overflowMenu/overflowMenu.spec.tsx
 create mode 100644 src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap

diff --git a/src/framework/theme/service/style/style.service.ts b/src/framework/theme/service/style/style.service.ts
index db6480e53..604b0fef6 100644
--- a/src/framework/theme/service/style/style.service.ts
+++ b/src/framework/theme/service/style/style.service.ts
@@ -6,7 +6,7 @@ import {
 import { getThemeValue } from '../theme';
 
 export function createThemedStyle(mapping: ThemedStyleType, theme: ThemeType): StyleType {
-  return Object.keys(mapping).reduce((acc: StyleType, current: string): StyleType => {
+  return mapping ? Object.keys(mapping).reduce((acc: StyleType, current: string): StyleType => {
     const mappingValue: any = mapping[current];
 
     if (mappingValue instanceof Object) {
@@ -16,5 +16,5 @@ export function createThemedStyle(mapping: ThemedStyleType, theme: ThemeType): S
     }
 
     return acc;
-  }, {});
+  }, {}) : {};
 }
diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
index f861b4012..98981b1d0 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -151,7 +151,7 @@ export class Modal extends React.Component<Props> {
     const dialog: React.ReactElement<ViewProps> =
       <Animated.View
         {...derivedProps}
-        style={animationStyle}
+        style={[animationStyle, styles.animatedWrapper]}
         onStartShouldSetResponder={this.onStartShouldSetResponder}
         onResponderRelease={this.onResponderRelease}
         onStartShouldSetResponderCapture={this.onStartShouldSetResponderCapture}
@@ -177,4 +177,7 @@ const styles = StyleSheet.create({
     width: 0,
     height: 0,
   },
+  animatedWrapper: {
+    alignSelf: 'flex-start',
+  },
 });
diff --git a/src/framework/ui/modal/modal.spec.tsx.snap b/src/framework/ui/modal/modal.spec.tsx.snap
index 3fd435a0f..f0b625e4f 100644
--- a/src/framework/ui/modal/modal.spec.tsx.snap
+++ b/src/framework/ui/modal/modal.spec.tsx.snap
@@ -30,7 +30,11 @@ exports[`@modal component checks * component styled with mappings 1`] = `
     onStartShouldSetResponder={[Function]}
     onStartShouldSetResponderCapture={[Function]}
     pointerEvents="box-none"
-    style={Object {}}
+    style={
+      Object {
+        "alignSelf": "flex-start",
+      }
+    }
     theme={
       Object {
         "blue-dark": "#2541CC",
@@ -93,7 +97,11 @@ exports[`@modal component checks * modal closes on passed prop 1`] = `
     onStartShouldSetResponder={[Function]}
     onStartShouldSetResponderCapture={[Function]}
     pointerEvents="box-none"
-    style={Object {}}
+    style={
+      Object {
+        "alignSelf": "flex-start",
+      }
+    }
     visible={true}
   >
     <View
@@ -191,7 +199,11 @@ exports[`@modal component checks * modal closes on passed prop 2`] = `
     onStartShouldSetResponder={[Function]}
     onStartShouldSetResponderCapture={[Function]}
     pointerEvents="box-none"
-    style={Object {}}
+    style={
+      Object {
+        "alignSelf": "flex-start",
+      }
+    }
     visible={true}
   >
     <View
@@ -275,7 +287,11 @@ exports[`@modal component checks * modal component close on backDrop checks 1`]
     onStartShouldSetResponder={[Function]}
     onStartShouldSetResponderCapture={[Function]}
     pointerEvents="box-none"
-    style={Object {}}
+    style={
+      Object {
+        "alignSelf": "flex-start",
+      }
+    }
     visible={true}
   >
     <View
@@ -333,7 +349,11 @@ exports[`@modal component checks * modal component close on backDrop checks 2`]
     onStartShouldSetResponder={[Function]}
     onStartShouldSetResponderCapture={[Function]}
     pointerEvents="box-none"
-    style={Object {}}
+    style={
+      Object {
+        "alignSelf": "flex-start",
+      }
+    }
     visible={true}
   >
     <View
@@ -378,7 +398,11 @@ exports[`@modal component checks * modal component renders properly 1`] = `
     onStartShouldSetResponder={[Function]}
     onStartShouldSetResponderCapture={[Function]}
     pointerEvents="box-none"
-    style={Object {}}
+    style={
+      Object {
+        "alignSelf": "flex-start",
+      }
+    }
     visible={true}
   >
     <View
@@ -468,6 +492,7 @@ exports[`@modal component checks * with animations 1`] = `
       pointerEvents="box-none"
       style={
         Object {
+          "alignSelf": "flex-start",
           "transform": Array [
             Object {
               "translateY": 1334,
@@ -564,6 +589,7 @@ exports[`@modal component checks * with animations 2`] = `
       pointerEvents="box-none"
       style={
         Object {
+          "alignSelf": "flex-start",
           "opacity": 0,
         }
       }
diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
index 853519ab9..b654585f0 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  StyleSheet,
   ViewProps,
   View,
 } from 'react-native';
@@ -43,7 +42,7 @@ export class OverflowMenu extends React.Component<Props> {
   };
 
   private onSelect = (index: number): void => {
-    if (this.props.onSelect) {
+    if (this.props.onSelect && this.props.visible) {
       this.props.onSelect(index);
     }
   };
@@ -123,6 +122,7 @@ export class OverflowMenu extends React.Component<Props> {
     return (
       <Popover
         {...restProps}
+        indicatorOffset={2}
         content={menu}
         style={[popoverStyle, restProps.style]}>
         {children}
@@ -130,5 +130,3 @@ export class OverflowMenu extends React.Component<Props> {
     );
   }
 }
-
-const styles = StyleSheet.create({});
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.config.ts b/src/framework/ui/overflowMenu/overflowMenu.spec.config.ts
new file mode 100644
index 000000000..bac8641de
--- /dev/null
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.config.ts
@@ -0,0 +1,171 @@
+import { ThemeMappingType } from 'eva/packages/types';
+import { ThemeType } from '@kitten/theme';
+
+export const mapping: ThemeMappingType = {
+  'OverflowMenu': {
+    'meta': {
+      'scope': 'all',
+      'mapping': {
+        'borderRadius': {
+          'type': 'number',
+        },
+      },
+      'appearances': {
+        'default': {
+          'default': true,
+        },
+      },
+      'states': {},
+      'variants': {},
+    },
+    'appearance': {
+      'default': {
+        'mapping': {
+          'borderRadius': 6,
+          'menuItem': {
+            'borderRadius': 6,
+          },
+          'popover': {
+            'backgroundColor': 'white',
+          },
+        },
+      },
+    },
+  },
+  'OverflowMenuItem': {
+    'meta': {
+      'scope': 'all',
+      'mapping': {
+        'backgroundColor': {
+          'type': 'color',
+        },
+        'borderColor': {
+          'type': 'color',
+        },
+        'borderWidth': {
+          'type': 'number',
+        },
+      },
+      'appearances': {
+        'default': {
+          'default': true,
+        },
+      },
+      'variants': {
+        'size': {
+          'small': {
+            'default': false,
+          },
+          'medium': {
+            'default': true,
+          },
+          'large': {
+            'default': false,
+          },
+        },
+      },
+      'states': {
+        'disabled': {
+          'default': false,
+          'priority': 0,
+          'scope': 'all',
+        },
+        'active': {
+          'default': false,
+          'priority': 1,
+          'scope': 'all',
+        },
+      },
+    },
+    'appearance': {
+      'default': {
+        'mapping': {
+          'backgroundColor': 'white',
+          'borderColor': 'gray-light',
+          'borderWidth': 1.2,
+          'text': {
+            'color': 'blue-pitch-dark',
+            'fontWeight': '600',
+          },
+          'icon': {
+            'tintColor': 'blue-pitch-dark',
+          },
+          'state': {
+            'disabled': {
+              'backgroundColor': 'gray-dark',
+            },
+            'active': {
+              'text': {
+                'color': 'blue-primary',
+              },
+              'icon': {
+                'tintColor': 'blue-primary',
+              },
+            },
+          },
+        },
+        'variant': {
+          'size': {
+            'small': {
+              'minHeight': 40,
+              'padding': 10,
+              'text': {
+                'fontSize': 13,
+                'marginHorizontal': 6,
+              },
+              'icon': {
+                'width': 20,
+                'height': 20,
+                'marginHorizontal': 6,
+              },
+            },
+            'medium': {
+              'minHeight': 48,
+              'padding': 12,
+              'text': {
+                'fontSize': 15,
+                'marginHorizontal': 8,
+              },
+              'icon': {
+                'width': 24,
+                'height': 24,
+                'marginHorizontal': 8,
+              },
+            },
+            'large': {
+              'minHeight': 56,
+              'padding': 14,
+              'text': {
+                'fontSize': 17,
+                'marginHorizontal': 10,
+              },
+              'icon': {
+                'width': 28,
+                'height': 28,
+                'marginHorizontal': 10,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const theme: ThemeType = {
+  'blue-primary': '#3366FF',
+  'blue-dark': '#2541CC',
+  'blue-pitch-dark': '#0D1C2E',
+  'gray-light': '#DDE1EB',
+  'gray-primary': '#A6AEBD',
+  'gray-dark': '#8992A3',
+  'gray-highlight': '#EDF0F5',
+  'pink-primary': '#FF3D71',
+  'text-primary': '#000000',
+  'text-primary-inverse': '#ffffff',
+
+  'gray-100': '#f7f8fa',
+  'gray-200': '#edf0f5',
+  'gray-300': '#c8cedb',
+  'gray-400': '#a6aebd',
+};
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
new file mode 100644
index 000000000..077050c0d
--- /dev/null
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
@@ -0,0 +1,259 @@
+import React from 'react';
+import {
+  Image,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  fireEvent,
+  render,
+  RenderAPI,
+  shallow,
+  waitForElement,
+} from 'react-native-testing-library';
+import { ReactTestInstance } from 'react-test-renderer';
+import {
+  styled,
+  StyleProvider,
+  StyleProviderProps,
+  StyleType,
+} from '@kitten/theme';
+import {
+  OverflowMenuItem as OverflowMenuItemComponent,
+  Props as OverflowMenuItemComponentProps,
+} from './overflowMenuItem.component';
+import {
+  MenuItemType,
+  OverflowMenu as OverflowMenuComponent,
+  Props as OverflowMenuComponentProps,
+} from './overflowMenu.component';
+import * as config from './overflowMenu.spec.config';
+
+const OverflowMenuItem =
+  styled<OverflowMenuItemComponent, OverflowMenuItemComponentProps>(OverflowMenuItemComponent);
+const OverflowMenu =
+  styled<OverflowMenuComponent, OverflowMenuComponentProps>(OverflowMenuComponent);
+
+const MockMenu = (props?: OverflowMenuComponentProps): React.ReactElement<StyleProviderProps> => (
+  <StyleProvider mapping={config.mapping} theme={config.theme} styles={{}}>
+    <OverflowMenu {...props} />
+  </StyleProvider>
+);
+
+const MockMenuItem = (props?: OverflowMenuItemComponentProps): React.ReactElement<StyleProviderProps> => (
+  <StyleProvider mapping={config.mapping} theme={config.theme} styles={{}}>
+    <OverflowMenuItem {...props} />
+  </StyleProvider>
+);
+
+const iconUri1: string = 'https://akveo.github.io/eva-icons/fill/png/128/star.png';
+const iconUri2: string = 'https://akveo.github.io/eva-icons/fill/png/128/alert-triangle.png';
+const iconUri3: string = 'https://akveo.github.io/eva-icons/fill/png/128/book-open.png';
+const menuIconUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/menu.png';
+const MenuAppShowTestId: string = '@app/show-menu';
+
+const menuItems: MenuItemType[] = [
+  {
+    text: 'Menu Item 1',
+    icon: (style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>,
+  },
+  {
+    text: 'Menu Item 2',
+    icon: (style: StyleType) => <Image source={{ uri: iconUri2 }} style={style}/>,
+    disabled: true,
+  },
+  {
+    text: 'Menu Item 3',
+  },
+  {
+    text: 'Menu Item 4',
+    icon: (style: StyleType) => <Image source={{ uri: iconUri3 }} style={style}/>,
+  },
+];
+
+const menuItemsSingle: MenuItemType[] = [{
+  text: 'Menu Item 1',
+  icon: (style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>,
+}];
+
+describe('@overflow-menu-item: component checks', () => {
+
+  it('* menu item with "set-1" props', () => {
+    const component: RenderAPI = render(
+      <MockMenuItem
+        text='Test Menu Item'
+        icon={(style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>}
+        size='small'
+        isLastItem={false}
+        disabled={true}
+        onPress={() => 1}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('* menu item with "set-2" props', () => {
+    const component: RenderAPI = render(
+      <MockMenuItem
+        text='Test Menu Item'
+        size='big'
+        isLastItem={true}
+        disabled={false}
+        onPress={() => 2}
+      />,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('* menu item onPress prop checks', () => {
+    const menuItemTestId = 'menu-item-1';
+    const onPress = jest.fn();
+    const component: RenderAPI = render(
+      <MockMenuItem
+        text='Test Menu Item'
+        icon={(style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>}
+        size='small'
+        disabled={false}
+        onPress={onPress}
+        testID={menuItemTestId}
+      />,
+    );
+    fireEvent.press(component.getByTestId(menuItemTestId));
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  it('* menu item onPress method checks', () => {
+    const onPress = jest.fn();
+    const component: RenderAPI = render(
+      <MockMenuItem
+        text='Test Menu Item'
+        icon={(style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>}
+        size='small'
+        disabled={false}
+        onPress={onPress}
+      />,
+    );
+    fireEvent.press(component.getByType(TouchableOpacity));
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  it('* menu item active checks', async () => {
+    const onPressIn = jest.fn();
+    const onPressOut = jest.fn();
+    const component: RenderAPI = render(
+      <MockMenuItem
+        text='Test Menu Item'
+        icon={(style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>}
+        size='small'
+        disabled={false}
+        onPress={() => 1}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+      />,
+    );
+
+    fireEvent(component.getByType(TouchableOpacity), 'pressIn');
+    const active: ReactTestInstance = await waitForElement(() => {
+      return component.getByType(OverflowMenuItemComponent);
+    });
+    const { output: activeOutput } = shallow(active);
+
+    fireEvent(component.getByType(TouchableOpacity), 'pressOut');
+    const inactive: ReactTestInstance = await waitForElement(() => {
+      return component.getByType(OverflowMenuItemComponent);
+    });
+    const { output: inactiveOutput } = shallow(inactive);
+
+    expect(activeOutput).toMatchSnapshot();
+    expect(inactiveOutput).toMatchSnapshot();
+    expect(onPressIn).toHaveBeenCalled();
+    expect(onPressOut).toHaveBeenCalled();
+  });
+
+  it('* disabled item', () => {
+    const onPress = jest.fn();
+    const onPressIn = jest.fn();
+    const onPressOut = jest.fn();
+    const component: RenderAPI = render(
+      <MockMenuItem
+        text='Test Menu Item'
+        icon={(style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>}
+        size='small'
+        disabled={true}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+      />,
+    );
+    fireEvent.press(component.getByType(TouchableOpacity));
+    fireEvent(component.getByType(TouchableOpacity), 'pressIn');
+    fireEvent(component.getByType(TouchableOpacity), 'pressOut');
+    expect(component).toMatchSnapshot();
+    expect(onPress).toBeCalledTimes(0);
+    expect(onPressIn).toBeCalledTimes(0);
+    expect(onPressOut).toBeCalledTimes(0);
+  });
+
+});
+
+describe('@overflow-menu: component checks', () => {
+
+  it('* component renders properly', () => {
+    const component: RenderAPI = render(
+      <MockMenu
+        visible={true}
+        items={menuItems}
+        onRequestClose={() => {
+        }}>
+        <View/>
+      </MockMenu>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('* single menu-item', () => {
+    const component: RenderAPI = render(
+      <MockMenu
+        visible={true}
+        items={menuItemsSingle}
+        onRequestClose={() => {}}>
+        <View/>
+      </MockMenu>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('* component onSelect checks visible', () => {
+    const onSelect = jest.fn();
+    const component: RenderAPI = render(
+      <MockMenu
+        visible={true}
+        items={menuItems}
+        onRequestClose={() => {}}
+        onSelect={onSelect}>
+        <View/>
+      </MockMenu>,
+    );
+    const items: ReactTestInstance[] = component.getAllByType(TouchableOpacity);
+    fireEvent.press(items[0]);
+    fireEvent.press(items[1]);
+    expect(onSelect).toBeCalledTimes(1);
+  });
+
+  it('* component onSelect checks invisible', () => {
+    const onSelect = jest.fn();
+    const component: RenderAPI = render(
+      <MockMenu
+        visible={false}
+        items={menuItems}
+        onRequestClose={() => {}}
+        onSelect={onSelect}>
+        <View/>
+      </MockMenu>,
+    );
+    const items: ReactTestInstance[] = component.getAllByType(TouchableOpacity);
+    fireEvent.press(items[0]);
+    expect(onSelect).toBeCalledTimes(0);
+  });
+
+});
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
new file mode 100644
index 000000000..d64d9a589
--- /dev/null
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
@@ -0,0 +1,1081 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@overflow-menu: component checks * component renders properly 1`] = `
+<View
+  style={
+    Object {
+      "opacity": 0,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={Object {}}
+    tag={0}
+  >
+    <View />
+  </View>
+  <View
+    onLayout={[Function]}
+    style={
+      Object {
+        "opacity": 0,
+        "position": "absolute",
+        "zIndex": -1,
+      }
+    }
+    tag={1}
+  >
+    <View
+      appearance="default"
+      content={
+        <View>
+          <ForwardRef(createComponent)
+            icon={[Function]}
+            isLastItem={false}
+            onPress={[Function]}
+            size="medium"
+            style={
+              Object {
+                "borderTopLeftRadius": 6,
+                "borderTopRightRadius": 6,
+              }
+            }
+            text="Menu Item 1"
+          />
+          <ForwardRef(createComponent)
+            disabled={true}
+            icon={[Function]}
+            isLastItem={false}
+            onPress={[Function]}
+            size="medium"
+            style={null}
+            text="Menu Item 2"
+          />
+          <ForwardRef(createComponent)
+            isLastItem={false}
+            onPress={[Function]}
+            size="medium"
+            style={null}
+            text="Menu Item 3"
+          />
+          <ForwardRef(createComponent)
+            icon={[Function]}
+            isLastItem={true}
+            onPress={[Function]}
+            size="medium"
+            style={
+              Object {
+                "borderBottomLeftRadius": 6,
+                "borderBottomRightRadius": 6,
+              }
+            }
+            text="Menu Item 4"
+          />
+        </View>
+      }
+      dispatch={[Function]}
+      indicatorOffset={2}
+      items={
+        Array [
+          Object {
+            "icon": [Function],
+            "text": "Menu Item 1",
+          },
+          Object {
+            "disabled": true,
+            "icon": [Function],
+            "text": "Menu Item 2",
+          },
+          Object {
+            "text": "Menu Item 3",
+          },
+          Object {
+            "icon": [Function],
+            "text": "Menu Item 4",
+          },
+        ]
+      }
+      onRequestClose={[Function]}
+      size="medium"
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "transparent",
+          "flexDirection": "column",
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+        }
+      }
+      theme={
+        Object {
+          "blue-dark": "#2541CC",
+          "blue-pitch-dark": "#0D1C2E",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
+        }
+      }
+      themedStyle={Object {}}
+      visible={true}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "height": 6,
+              "transform": Array [
+                Object {
+                  "rotate": "180deg",
+                },
+                Object {
+                  "rotate": "180deg",
+                },
+                Object {
+                  "translateX": 0,
+                },
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 6,
+            },
+            Object {
+              "backgroundColor": "transparent",
+              "borderBottomColor": "white",
+              "borderBottomWidth": 6,
+              "borderLeftColor": "transparent",
+              "borderLeftWidth": 6,
+              "borderRightColor": "transparent",
+              "borderRightWidth": 6,
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "white",
+            "borderRadius": 6,
+            "justifyContent": "center",
+            "maxWidth": 300,
+            "minHeight": 28,
+            "minWidth": 64,
+            "transform": Array [
+              Object {
+                "translateX": -0,
+              },
+            ],
+          }
+        }
+      >
+        <View>
+          <View
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "white",
+                "borderBottomColor": "#DDE1EB",
+                "borderBottomWidth": 1.2,
+                "borderTopLeftRadius": 6,
+                "borderTopRightRadius": 6,
+                "flexDirection": "row",
+                "minHeight": 48,
+                "opacity": 1,
+                "padding": 12,
+              }
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 24,
+                  "marginHorizontal": 8,
+                  "tintColor": "#0D1C2E",
+                  "width": 24,
+                }
+              }
+            />
+            <Text
+              dispatch={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": undefined,
+                    "fontSize": undefined,
+                  },
+                  Object {
+                    "color": "#0D1C2E",
+                    "fontSize": 15,
+                    "fontWeight": "600",
+                    "marginHorizontal": 8,
+                  },
+                ]
+              }
+              theme={
+                Object {
+                  "blue-dark": "#2541CC",
+                  "blue-pitch-dark": "#0D1C2E",
+                  "blue-primary": "#3366FF",
+                  "gray-100": "#f7f8fa",
+                  "gray-200": "#edf0f5",
+                  "gray-300": "#c8cedb",
+                  "gray-400": "#a6aebd",
+                  "gray-dark": "#8992A3",
+                  "gray-highlight": "#EDF0F5",
+                  "gray-light": "#DDE1EB",
+                  "gray-primary": "#A6AEBD",
+                  "pink-primary": "#FF3D71",
+                  "text-primary": "#000000",
+                  "text-primary-inverse": "#ffffff",
+                }
+              }
+            >
+              Menu Item 1
+            </Text>
+          </View>
+          <View
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#8992A3",
+                "borderBottomColor": "#DDE1EB",
+                "borderBottomWidth": 1.2,
+                "flexDirection": "row",
+                "minHeight": 48,
+                "opacity": 1,
+                "padding": 12,
+              }
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://akveo.github.io/eva-icons/fill/png/128/alert-triangle.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 24,
+                  "marginHorizontal": 8,
+                  "tintColor": "#0D1C2E",
+                  "width": 24,
+                }
+              }
+            />
+            <Text
+              dispatch={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": undefined,
+                    "fontSize": undefined,
+                  },
+                  Object {
+                    "color": "#0D1C2E",
+                    "fontSize": 15,
+                    "fontWeight": "600",
+                    "marginHorizontal": 8,
+                  },
+                ]
+              }
+              theme={
+                Object {
+                  "blue-dark": "#2541CC",
+                  "blue-pitch-dark": "#0D1C2E",
+                  "blue-primary": "#3366FF",
+                  "gray-100": "#f7f8fa",
+                  "gray-200": "#edf0f5",
+                  "gray-300": "#c8cedb",
+                  "gray-400": "#a6aebd",
+                  "gray-dark": "#8992A3",
+                  "gray-highlight": "#EDF0F5",
+                  "gray-light": "#DDE1EB",
+                  "gray-primary": "#A6AEBD",
+                  "pink-primary": "#FF3D71",
+                  "text-primary": "#000000",
+                  "text-primary-inverse": "#ffffff",
+                }
+              }
+            >
+              Menu Item 2
+            </Text>
+          </View>
+          <View
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "white",
+                "borderBottomColor": "#DDE1EB",
+                "borderBottomWidth": 1.2,
+                "flexDirection": "row",
+                "minHeight": 48,
+                "opacity": 1,
+                "padding": 12,
+              }
+            }
+          >
+            <Text
+              dispatch={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": undefined,
+                    "fontSize": undefined,
+                  },
+                  Object {
+                    "color": "#0D1C2E",
+                    "fontSize": 15,
+                    "fontWeight": "600",
+                    "marginHorizontal": 8,
+                  },
+                ]
+              }
+              theme={
+                Object {
+                  "blue-dark": "#2541CC",
+                  "blue-pitch-dark": "#0D1C2E",
+                  "blue-primary": "#3366FF",
+                  "gray-100": "#f7f8fa",
+                  "gray-200": "#edf0f5",
+                  "gray-300": "#c8cedb",
+                  "gray-400": "#a6aebd",
+                  "gray-dark": "#8992A3",
+                  "gray-highlight": "#EDF0F5",
+                  "gray-light": "#DDE1EB",
+                  "gray-primary": "#A6AEBD",
+                  "pink-primary": "#FF3D71",
+                  "text-primary": "#000000",
+                  "text-primary-inverse": "#ffffff",
+                }
+              }
+            >
+              Menu Item 3
+            </Text>
+          </View>
+          <View
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "white",
+                "borderBottomColor": null,
+                "borderBottomLeftRadius": 6,
+                "borderBottomRightRadius": 6,
+                "borderBottomWidth": null,
+                "flexDirection": "row",
+                "minHeight": 48,
+                "opacity": 1,
+                "padding": 12,
+              }
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://akveo.github.io/eva-icons/fill/png/128/book-open.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 24,
+                  "marginHorizontal": 8,
+                  "tintColor": "#0D1C2E",
+                  "width": 24,
+                }
+              }
+            />
+            <Text
+              dispatch={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": undefined,
+                    "fontSize": undefined,
+                  },
+                  Object {
+                    "color": "#0D1C2E",
+                    "fontSize": 15,
+                    "fontWeight": "600",
+                    "marginHorizontal": 8,
+                  },
+                ]
+              }
+              theme={
+                Object {
+                  "blue-dark": "#2541CC",
+                  "blue-pitch-dark": "#0D1C2E",
+                  "blue-primary": "#3366FF",
+                  "gray-100": "#f7f8fa",
+                  "gray-200": "#edf0f5",
+                  "gray-300": "#c8cedb",
+                  "gray-400": "#a6aebd",
+                  "gray-dark": "#8992A3",
+                  "gray-highlight": "#EDF0F5",
+                  "gray-light": "#DDE1EB",
+                  "gray-primary": "#A6AEBD",
+                  "pink-primary": "#FF3D71",
+                  "text-primary": "#000000",
+                  "text-primary-inverse": "#ffffff",
+                }
+              }
+            >
+              Menu Item 4
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`@overflow-menu: component checks * single menu-item 1`] = `
+<View
+  style={
+    Object {
+      "opacity": 0,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={Object {}}
+    tag={0}
+  >
+    <View />
+  </View>
+  <View
+    onLayout={[Function]}
+    style={
+      Object {
+        "opacity": 0,
+        "position": "absolute",
+        "zIndex": -1,
+      }
+    }
+    tag={1}
+  >
+    <View
+      appearance="default"
+      content={
+        <View>
+          <ForwardRef(createComponent)
+            icon={[Function]}
+            isLastItem={true}
+            onPress={[Function]}
+            size="medium"
+            style={
+              Object {
+                "borderRadius": 6,
+              }
+            }
+            text="Menu Item 1"
+          />
+        </View>
+      }
+      dispatch={[Function]}
+      indicatorOffset={2}
+      items={
+        Array [
+          Object {
+            "icon": [Function],
+            "text": "Menu Item 1",
+          },
+        ]
+      }
+      onRequestClose={[Function]}
+      size="medium"
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "backgroundColor": "transparent",
+          "flexDirection": "column",
+          "transform": Array [
+            Object {
+              "translateX": -0,
+            },
+          ],
+        }
+      }
+      theme={
+        Object {
+          "blue-dark": "#2541CC",
+          "blue-pitch-dark": "#0D1C2E",
+          "blue-primary": "#3366FF",
+          "gray-100": "#f7f8fa",
+          "gray-200": "#edf0f5",
+          "gray-300": "#c8cedb",
+          "gray-400": "#a6aebd",
+          "gray-dark": "#8992A3",
+          "gray-highlight": "#EDF0F5",
+          "gray-light": "#DDE1EB",
+          "gray-primary": "#A6AEBD",
+          "pink-primary": "#FF3D71",
+          "text-primary": "#000000",
+          "text-primary-inverse": "#ffffff",
+        }
+      }
+      themedStyle={Object {}}
+      visible={true}
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "white",
+              "height": 6,
+              "transform": Array [
+                Object {
+                  "rotate": "180deg",
+                },
+                Object {
+                  "rotate": "180deg",
+                },
+                Object {
+                  "translateX": 0,
+                },
+                Object {
+                  "translateX": 0,
+                },
+              ],
+              "width": 6,
+            },
+            Object {
+              "backgroundColor": "transparent",
+              "borderBottomColor": "white",
+              "borderBottomWidth": 6,
+              "borderLeftColor": "transparent",
+              "borderLeftWidth": 6,
+              "borderRightColor": "transparent",
+              "borderRightWidth": 6,
+            },
+          ]
+        }
+      />
+      <View
+        style={
+          Object {
+            "backgroundColor": "white",
+            "borderRadius": 6,
+            "justifyContent": "center",
+            "maxWidth": 300,
+            "minHeight": 28,
+            "minWidth": 64,
+            "transform": Array [
+              Object {
+                "translateX": -0,
+              },
+            ],
+          }
+        }
+      >
+        <View>
+          <View
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "white",
+                "borderBottomColor": null,
+                "borderBottomWidth": null,
+                "borderRadius": 6,
+                "flexDirection": "row",
+                "minHeight": 48,
+                "opacity": 1,
+                "padding": 12,
+              }
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+                }
+              }
+              style={
+                Object {
+                  "height": 24,
+                  "marginHorizontal": 8,
+                  "tintColor": "#0D1C2E",
+                  "width": 24,
+                }
+              }
+            />
+            <Text
+              dispatch={[Function]}
+              style={
+                Array [
+                  Object {
+                    "color": undefined,
+                    "fontSize": undefined,
+                  },
+                  Object {
+                    "color": "#0D1C2E",
+                    "fontSize": 15,
+                    "fontWeight": "600",
+                    "marginHorizontal": 8,
+                  },
+                ]
+              }
+              theme={
+                Object {
+                  "blue-dark": "#2541CC",
+                  "blue-pitch-dark": "#0D1C2E",
+                  "blue-primary": "#3366FF",
+                  "gray-100": "#f7f8fa",
+                  "gray-200": "#edf0f5",
+                  "gray-300": "#c8cedb",
+                  "gray-400": "#a6aebd",
+                  "gray-dark": "#8992A3",
+                  "gray-highlight": "#EDF0F5",
+                  "gray-light": "#DDE1EB",
+                  "gray-primary": "#A6AEBD",
+                  "pink-primary": "#FF3D71",
+                  "text-primary": "#000000",
+                  "text-primary-inverse": "#ffffff",
+                }
+              }
+            >
+              Menu Item 1
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`@overflow-menu-item: component checks * disabled item 1`] = `
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#8992A3",
+      "borderBottomColor": "#DDE1EB",
+      "borderBottomWidth": 1.2,
+      "flexDirection": "row",
+      "minHeight": 40,
+      "opacity": 1,
+      "padding": 10,
+    }
+  }
+>
+  <Image
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Object {
+        "height": 20,
+        "marginHorizontal": 6,
+        "tintColor": "#0D1C2E",
+        "width": 20,
+      }
+    }
+  />
+  <Text
+    dispatch={[Function]}
+    style={
+      Array [
+        Object {
+          "color": undefined,
+          "fontSize": undefined,
+        },
+        Object {
+          "color": "#0D1C2E",
+          "fontSize": 13,
+          "fontWeight": "600",
+          "marginHorizontal": 6,
+        },
+      ]
+    }
+    theme={
+      Object {
+        "blue-dark": "#2541CC",
+        "blue-pitch-dark": "#0D1C2E",
+        "blue-primary": "#3366FF",
+        "gray-100": "#f7f8fa",
+        "gray-200": "#edf0f5",
+        "gray-300": "#c8cedb",
+        "gray-400": "#a6aebd",
+        "gray-dark": "#8992A3",
+        "gray-highlight": "#EDF0F5",
+        "gray-light": "#DDE1EB",
+        "gray-primary": "#A6AEBD",
+        "pink-primary": "#FF3D71",
+        "text-primary": "#000000",
+        "text-primary-inverse": "#ffffff",
+      }
+    }
+  >
+    Test Menu Item
+  </Text>
+</View>
+`;
+
+exports[`@overflow-menu-item: component checks * menu item active checks 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  disabled={false}
+  dispatch={[Function]}
+  icon={[Function]}
+  isLastItem={false}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="small"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "borderBottomColor": "#DDE1EB",
+        "borderBottomWidth": 1.2,
+        "minHeight": 40,
+        "padding": 10,
+      },
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+  text="Test Menu Item"
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-pitch-dark": "#0D1C2E",
+      "blue-primary": "#3366FF",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+>
+  <Component
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Object {
+        "height": 20,
+        "marginHorizontal": 6,
+        "tintColor": "#3366FF",
+        "width": 20,
+      }
+    }
+  />
+  <ForwardRef(createComponent)
+    style={
+      Object {
+        "color": "#3366FF",
+        "fontSize": 13,
+        "fontWeight": "600",
+        "marginHorizontal": 6,
+      }
+    }
+  >
+    Test Menu Item
+  </ForwardRef(createComponent)>
+</TouchableOpacity>
+`;
+
+exports[`@overflow-menu-item: component checks * menu item active checks 2`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  disabled={false}
+  dispatch={[Function]}
+  icon={[Function]}
+  isLastItem={false}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="small"
+  style={
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "borderBottomColor": "#DDE1EB",
+        "borderBottomWidth": 1.2,
+        "minHeight": 40,
+        "padding": 10,
+      },
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+  text="Test Menu Item"
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-pitch-dark": "#0D1C2E",
+      "blue-primary": "#3366FF",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+>
+  <Component
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Object {
+        "height": 20,
+        "marginHorizontal": 6,
+        "tintColor": "#0D1C2E",
+        "width": 20,
+      }
+    }
+  />
+  <ForwardRef(createComponent)
+    style={
+      Object {
+        "color": "#0D1C2E",
+        "fontSize": 13,
+        "fontWeight": "600",
+        "marginHorizontal": 6,
+      }
+    }
+  >
+    Test Menu Item
+  </ForwardRef(createComponent)>
+</TouchableOpacity>
+`;
+
+exports[`@overflow-menu-item: component checks * menu item with "set-1" props 1`] = `
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#8992A3",
+      "borderBottomColor": "#DDE1EB",
+      "borderBottomWidth": 1.2,
+      "flexDirection": "row",
+      "minHeight": 40,
+      "opacity": 1,
+      "padding": 10,
+    }
+  }
+>
+  <Image
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Object {
+        "height": 20,
+        "marginHorizontal": 6,
+        "tintColor": "#0D1C2E",
+        "width": 20,
+      }
+    }
+  />
+  <Text
+    dispatch={[Function]}
+    style={
+      Array [
+        Object {
+          "color": undefined,
+          "fontSize": undefined,
+        },
+        Object {
+          "color": "#0D1C2E",
+          "fontSize": 13,
+          "fontWeight": "600",
+          "marginHorizontal": 6,
+        },
+      ]
+    }
+    theme={
+      Object {
+        "blue-dark": "#2541CC",
+        "blue-pitch-dark": "#0D1C2E",
+        "blue-primary": "#3366FF",
+        "gray-100": "#f7f8fa",
+        "gray-200": "#edf0f5",
+        "gray-300": "#c8cedb",
+        "gray-400": "#a6aebd",
+        "gray-dark": "#8992A3",
+        "gray-highlight": "#EDF0F5",
+        "gray-light": "#DDE1EB",
+        "gray-primary": "#A6AEBD",
+        "pink-primary": "#FF3D71",
+        "text-primary": "#000000",
+        "text-primary-inverse": "#ffffff",
+      }
+    }
+  >
+    Test Menu Item
+  </Text>
+</View>
+`;
+
+exports[`@overflow-menu-item: component checks * menu item with "set-2" props 1`] = `
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "white",
+      "borderBottomColor": null,
+      "borderBottomWidth": null,
+      "flexDirection": "row",
+      "minHeight": 48,
+      "opacity": 1,
+      "padding": 12,
+    }
+  }
+>
+  <Text
+    dispatch={[Function]}
+    style={
+      Array [
+        Object {
+          "color": undefined,
+          "fontSize": undefined,
+        },
+        Object {
+          "color": "#0D1C2E",
+          "fontSize": 15,
+          "fontWeight": "600",
+          "marginHorizontal": 8,
+        },
+      ]
+    }
+    theme={
+      Object {
+        "blue-dark": "#2541CC",
+        "blue-pitch-dark": "#0D1C2E",
+        "blue-primary": "#3366FF",
+        "gray-100": "#f7f8fa",
+        "gray-200": "#edf0f5",
+        "gray-300": "#c8cedb",
+        "gray-400": "#a6aebd",
+        "gray-dark": "#8992A3",
+        "gray-highlight": "#EDF0F5",
+        "gray-light": "#DDE1EB",
+        "gray-primary": "#A6AEBD",
+        "pink-primary": "#FF3D71",
+        "text-primary": "#000000",
+        "text-primary-inverse": "#ffffff",
+      }
+    }
+  >
+    Test Menu Item
+  </Text>
+</View>
+`;
diff --git a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
index b0687e9e8..efa87bff5 100644
--- a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
@@ -37,24 +37,30 @@ export class OverflowMenuItem extends React.Component<Props> {
   };
 
   private onPress = (event: GestureResponderEvent) => {
-    if (this.props.onPress) {
-      this.props.onPress(event);
+    if (!this.props.disabled) {
+      if (this.props.onPress) {
+        this.props.onPress(event);
+      }
     }
   };
 
   private onPressIn = (event: GestureResponderEvent) => {
-    this.props.dispatch([Interaction.ACTIVE]);
+    if (!this.props.disabled) {
+      this.props.dispatch([Interaction.ACTIVE]);
 
-    if (this.props.onPressIn) {
-      this.props.onPressIn(event);
+      if (this.props.onPressIn) {
+        this.props.onPressIn(event);
+      }
     }
   };
 
   private onPressOut = (event: GestureResponderEvent) => {
-    this.props.dispatch([]);
+    if (!this.props.disabled) {
+      this.props.dispatch([]);
 
-    if (this.props.onPressOut) {
-      this.props.onPressOut(event);
+      if (this.props.onPressOut) {
+        this.props.onPressOut(event);
+      }
     }
   };
 
diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
index 35bada2df..f7a452408 100644
--- a/src/framework/ui/popover/popover.component.tsx
+++ b/src/framework/ui/popover/popover.component.tsx
@@ -199,6 +199,7 @@ const styles = StyleSheet.create({
   popover: {
     position: 'absolute',
     opacity: 0,
+    zIndex: -1,
   },
   placeholder: {
     opacity: 0,
diff --git a/src/playground/src/ui/screen/overflowMenu.component.tsx b/src/playground/src/ui/screen/overflowMenu.component.tsx
index 2190f30cd..fbc13567b 100644
--- a/src/playground/src/ui/screen/overflowMenu.component.tsx
+++ b/src/playground/src/ui/screen/overflowMenu.component.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import {
-  ImageSourcePropType,
-  Text,
   View,
   Image,
   TouchableOpacity,
-  Button,
+  Alert,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import {
@@ -25,6 +23,7 @@ interface State {
   overflowMenu1Visible: boolean;
   overflowMenu2Visible: boolean;
   overflowMenu3Visible: boolean;
+  overflowMenu4Visible: boolean;
 }
 
 const iconUri1: string = 'https://akveo.github.io/eva-icons/fill/png/128/star.png';
@@ -32,7 +31,7 @@ const iconUri2: string = 'https://akveo.github.io/eva-icons/fill/png/128/alert-t
 const iconUri3: string = 'https://akveo.github.io/eva-icons/fill/png/128/book-open.png';
 const menuIconUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/menu.png';
 
-const menu1Items: OverflowMenuItemType[] = [
+const menuItems: OverflowMenuItemType[] = [
   {
     text: 'Menu Item 1',
     icon: (style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>,
@@ -53,7 +52,6 @@ const menu1Items: OverflowMenuItemType[] = [
 
 class OverflowMenu extends React.Component<Props, State> {
 
-
   static navigationOptions = {
     title: 'Overflow Menu',
   };
@@ -62,34 +60,92 @@ class OverflowMenu extends React.Component<Props, State> {
     overflowMenu1Visible: false,
     overflowMenu2Visible: false,
     overflowMenu3Visible: false,
+    overflowMenu4Visible: false,
   };
 
   private setMenu1Visible = (): void => {
     this.setState({ overflowMenu1Visible: !this.state.overflowMenu1Visible });
   };
 
+  private setMenu2Visible = (): void => {
+    this.setState({ overflowMenu2Visible: !this.state.overflowMenu2Visible });
+  };
+
+  private setMenu3Visible = (): void => {
+    this.setState({ overflowMenu3Visible: !this.state.overflowMenu3Visible });
+  };
+
+  private setMenu4Visible = (): void => {
+    this.setState({ overflowMenu4Visible: !this.state.overflowMenu4Visible });
+  };
+
   private onSelectItem = (index: number): void => {
-    console.log('Selected item\'s index: ', index);
+    Alert.alert(`Selected item\'s index: ${index}`);
   };
 
   public render(): React.ReactNode {
     return (
       <View style={this.props.themedStyle.container}>
-        <Button title={'Show menu'} onPress={this.setMenu1Visible}/>
-        <OverflowMenuComponent
-          items={menu1Items}
-          placement='bottom end'
-          visible={this.state.overflowMenu1Visible}
-          style={this.props.themedStyle.menu}
-          onSelect={(index: number) => this.onSelectItem(index)}
-          onRequestClose={this.setMenu1Visible}
-        >
-          <TouchableOpacity
-            onPress={this.setMenu1Visible}
-            style={this.props.themedStyle.menuContainer}>
-            <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
-          </TouchableOpacity>
-        </OverflowMenuComponent>
+        <View style={this.props.themedStyle.innerContainer}>
+          <OverflowMenuComponent
+            items={menuItems}
+            placement='bottom start'
+            visible={this.state.overflowMenu1Visible}
+            style={this.props.themedStyle.menu}
+            onSelect={(index: number) => this.onSelectItem(index)}
+            onRequestClose={this.setMenu1Visible}
+          >
+            <TouchableOpacity
+              onPress={this.setMenu1Visible}
+              style={this.props.themedStyle.menuContainer}>
+              <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
+            </TouchableOpacity>
+          </OverflowMenuComponent>
+          <OverflowMenuComponent
+            items={menuItems}
+            placement='bottom end'
+            visible={this.state.overflowMenu2Visible}
+            style={this.props.themedStyle.menu}
+            onSelect={(index: number) => this.onSelectItem(index)}
+            onRequestClose={this.setMenu2Visible}
+          >
+            <TouchableOpacity
+              onPress={this.setMenu2Visible}
+              style={this.props.themedStyle.menuContainer}>
+              <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
+            </TouchableOpacity>
+          </OverflowMenuComponent>
+        </View>
+        <View style={[this.props.themedStyle.innerContainer, this.props.themedStyle.bottomContainer]}>
+          <OverflowMenuComponent
+            items={menuItems}
+            placement='top start'
+            visible={this.state.overflowMenu3Visible}
+            style={this.props.themedStyle.menu}
+            onSelect={(index: number) => this.onSelectItem(index)}
+            onRequestClose={this.setMenu3Visible}
+          >
+            <TouchableOpacity
+              onPress={this.setMenu3Visible}
+              style={this.props.themedStyle.menuContainer}>
+              <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
+            </TouchableOpacity>
+          </OverflowMenuComponent>
+          <OverflowMenuComponent
+            items={menuItems}
+            placement='top end'
+            visible={this.state.overflowMenu4Visible}
+            style={this.props.themedStyle.menu}
+            onSelect={(index: number) => this.onSelectItem(index)}
+            onRequestClose={this.setMenu4Visible}
+          >
+            <TouchableOpacity
+              onPress={this.setMenu4Visible}
+              style={this.props.themedStyle.menuContainer}>
+              <Image style={this.props.themedStyle.menuIcon} source={{ uri: menuIconUri }}/>
+            </TouchableOpacity>
+          </OverflowMenuComponent>
+        </View>
       </View>
     );
   }
@@ -102,6 +158,14 @@ export const OverflowMenuScreen = withStyles(OverflowMenu, (theme: ThemeType) =>
     paddingHorizontal: 16,
     backgroundColor: '#DDE1EB',
   },
+  innerContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  bottomContainer: {
+    alignItems: 'flex-end',
+  },
   menu: {
     width: 300,
   },
@@ -111,7 +175,7 @@ export const OverflowMenuScreen = withStyles(OverflowMenu, (theme: ThemeType) =>
     tintColor: '#3366FF',
   },
   menuContainer: {
-    alignItems: 'flex-end',
+    alignSelf: 'flex-start',
   },
 }));
 

From c4a8fadc0709117cc6a54227fef4bac3f590e868 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Wed, 13 Mar 2019 19:10:52 +0300
Subject: [PATCH 4/6] refactor(ui): overflow-menu/list-menu-item code and api
 refactor

---
 src/framework/ui/list/list.spec.tsx           |  5 +-
 src/framework/ui/list/listItem.component.tsx  | 17 +---
 .../overflowMenu/overflowMenu.component.tsx   | 34 +++----
 .../ui/overflowMenu/overflowMenu.spec.tsx     | 69 ++-----------
 .../overflowMenu/overflowMenu.spec.tsx.snap   | 99 ++-----------------
 .../overflowMenuItem.component.tsx            | 53 +++++-----
 src/framework/ui/service/type.ts              | 10 ++
 .../src/ui/screen/list.component.tsx          |  3 +-
 .../src/ui/screen/overflowMenu.component.tsx  | 23 ++---
 9 files changed, 85 insertions(+), 228 deletions(-)

diff --git a/src/framework/ui/list/list.spec.tsx b/src/framework/ui/list/list.spec.tsx
index c2ec94fbb..8227eccb0 100644
--- a/src/framework/ui/list/list.spec.tsx
+++ b/src/framework/ui/list/list.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  GestureResponderEvent,
   Image,
   ImageProps,
   TouchableOpacity,
@@ -145,8 +146,8 @@ describe('@list-item: component checks', () => {
   it('* emits onPress with correct args', async () => {
     const pressIndex: number = 0;
 
-    const onPress = jest.fn((args: any[]) => {
-      expect(args).toEqual(pressIndex);
+    const onPress = jest.fn((event: GestureResponderEvent, index: number) => {
+      expect(index).toEqual(pressIndex);
     });
 
     const item = () => (
diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx
index 325c51724..733d6f2a1 100644
--- a/src/framework/ui/list/listItem.component.tsx
+++ b/src/framework/ui/list/listItem.component.tsx
@@ -18,6 +18,7 @@ import {
   Text as TextComponent,
   Props as TextProps,
 } from '../text/text.component';
+import { TouchableOpacityIndexedProps } from '../service/type';
 
 interface ListDerivedProps {
   index?: number;
@@ -39,14 +40,6 @@ interface TemplateDescriptionProps extends Partial<TemplateBaseProps> {
   description: string;
 }
 
-// @ts-ignore: props override
-interface TouchableOpacityIndexedProps extends TouchableOpacityProps {
-  onPress?: (index: number, event: GestureResponderEvent) => void;
-  onPressIn?: (index: number, event: GestureResponderEvent) => void;
-  onPressOut?: (index: number, event: GestureResponderEvent) => void;
-  onLongPress?: (index: number, event: GestureResponderEvent) => void;
-}
-
 type ListItemProps = (TemplateTitleProps | TemplateDescriptionProps) & ListDerivedProps;
 
 const Text = styled<TextComponent, TextProps>(TextComponent);
@@ -57,7 +50,7 @@ export class ListItem extends React.Component<Props> {
 
   private onPress = (event: GestureResponderEvent) => {
     if (this.props.onPress) {
-      this.props.onPress(this.props.index, event);
+      this.props.onPress(event, this.props.index);
     }
   };
 
@@ -65,7 +58,7 @@ export class ListItem extends React.Component<Props> {
     this.props.dispatch([Interaction.ACTIVE]);
 
     if (this.props.onPressIn) {
-      this.props.onPressIn(this.props.index, event);
+      this.props.onPressIn(event, this.props.index);
     }
   };
 
@@ -73,13 +66,13 @@ export class ListItem extends React.Component<Props> {
     this.props.dispatch([]);
 
     if (this.props.onPressOut) {
-      this.props.onPressOut(this.props.index, event);
+      this.props.onPressOut(event, this.props.index);
     }
   };
 
   private onLongPress = (event: GestureResponderEvent) => {
     if (this.props.onLongPress) {
-      this.props.onLongPress(this.props.index, event);
+      this.props.onLongPress(event, this.props.index);
     }
   };
 
diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
index b654585f0..4dc47ae19 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   ViewProps,
   View,
+  GestureResponderEvent,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -20,13 +21,12 @@ import {
 import { Omit } from '../service/type';
 
 type MenuItemElement = React.ReactElement<OverflowMenuItemProps>;
-export type MenuItemType = Omit<OverflowMenuItemType, 'size'>;
 
 interface OverflowMenuProps {
   children: React.ReactElement<any>;
-  items: MenuItemType[];
+  items: OverflowMenuItemType[];
   size?: string;
-  onSelect?: (index: number) => void;
+  onSelect?: (event: GestureResponderEvent, index: number) => void;
 }
 
 const Popover = styled<PopoverComponent, PopoverProps>(PopoverComponent);
@@ -37,16 +37,6 @@ export type Props = & StyledComponentProps & OverflowMenuProps & Omit<PopoverPro
 
 export class OverflowMenu extends React.Component<Props> {
 
-  static defaultProps: Partial<Props> = {
-    size: 'medium',
-  };
-
-  private onSelect = (index: number): void => {
-    if (this.props.onSelect && this.props.visible) {
-      this.props.onSelect(index);
-    }
-  };
-
   private isFirstItem = (index: number): boolean => {
     return index === 0;
   };
@@ -81,12 +71,10 @@ export class OverflowMenu extends React.Component<Props> {
       return {
         borderRadius: borderRadius,
       };
-    } else {
-      return null;
     }
   };
 
-  private renderMenuItem = (item: MenuItemType, index: number): MenuItemElement => {
+  private renderMenuItem = (item: OverflowMenuItemType, index: number): MenuItemElement => {
     const { size, themedStyle } = this.props;
     const itemStyle: StyleType = this.getMenuItemStyle(themedStyle, index);
 
@@ -97,18 +85,22 @@ export class OverflowMenu extends React.Component<Props> {
         isLastItem={this.isLastItem(index)}
         style={itemStyle}
         key={index}
-        onPress={() => this.onSelect(index)}
+        index={index}
+        onPress={this.props.onSelect}
       />
     );
   };
 
+  private renderComponentChildren = (): MenuItemElement[] => {
+    return this.props.items.map((item: OverflowMenuItemType, index: number) =>
+      this.renderMenuItem(item, index));
+  };
+
   private renderMenuContent = (): React.ReactElement<ViewProps> => {
-    const { items, style } = this.props;
-    const menuItems: MenuItemElement[] = items
-      .map((item: MenuItemType, index: number) => this.renderMenuItem(item, index));
+    const menuItems: MenuItemElement[] = this.renderComponentChildren();
 
     return (
-      <View style={style}>
+      <View style={this.props.style}>
         {menuItems}
       </View>
     );
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
index 077050c0d..0098f31bc 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
@@ -19,11 +19,11 @@ import {
   StyleType,
 } from '@kitten/theme';
 import {
+  OverflowMenuItemType,
   OverflowMenuItem as OverflowMenuItemComponent,
   Props as OverflowMenuItemComponentProps,
 } from './overflowMenuItem.component';
 import {
-  MenuItemType,
   OverflowMenu as OverflowMenuComponent,
   Props as OverflowMenuComponentProps,
 } from './overflowMenu.component';
@@ -52,7 +52,7 @@ const iconUri3: string = 'https://akveo.github.io/eva-icons/fill/png/128/book-op
 const menuIconUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/menu.png';
 const MenuAppShowTestId: string = '@app/show-menu';
 
-const menuItems: MenuItemType[] = [
+const menuItems: OverflowMenuItemType[] = [
   {
     text: 'Menu Item 1',
     icon: (style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>,
@@ -71,7 +71,7 @@ const menuItems: MenuItemType[] = [
   },
 ];
 
-const menuItemsSingle: MenuItemType[] = [{
+const menuItemsSingle: OverflowMenuItemType[] = [{
   text: 'Menu Item 1',
   icon: (style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>,
 }];
@@ -140,6 +140,7 @@ describe('@overflow-menu-item: component checks', () => {
   it('* menu item active checks', async () => {
     const onPressIn = jest.fn();
     const onPressOut = jest.fn();
+    const onLongPress = jest.fn();
     const component: RenderAPI = render(
       <MockMenuItem
         text='Test Menu Item'
@@ -149,7 +150,7 @@ describe('@overflow-menu-item: component checks', () => {
         onPress={() => 1}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
-      />,
+        onLongPress={onLongPress}/>,
     );
 
     fireEvent(component.getByType(TouchableOpacity), 'pressIn');
@@ -170,30 +171,6 @@ describe('@overflow-menu-item: component checks', () => {
     expect(onPressOut).toHaveBeenCalled();
   });
 
-  it('* disabled item', () => {
-    const onPress = jest.fn();
-    const onPressIn = jest.fn();
-    const onPressOut = jest.fn();
-    const component: RenderAPI = render(
-      <MockMenuItem
-        text='Test Menu Item'
-        icon={(style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>}
-        size='small'
-        disabled={true}
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-      />,
-    );
-    fireEvent.press(component.getByType(TouchableOpacity));
-    fireEvent(component.getByType(TouchableOpacity), 'pressIn');
-    fireEvent(component.getByType(TouchableOpacity), 'pressOut');
-    expect(component).toMatchSnapshot();
-    expect(onPress).toBeCalledTimes(0);
-    expect(onPressIn).toBeCalledTimes(0);
-    expect(onPressOut).toBeCalledTimes(0);
-  });
-
 });
 
 describe('@overflow-menu: component checks', () => {
@@ -216,44 +193,12 @@ describe('@overflow-menu: component checks', () => {
       <MockMenu
         visible={true}
         items={menuItemsSingle}
-        onRequestClose={() => {}}>
+        onRequestClose={() => {
+        }}>
         <View/>
       </MockMenu>,
     );
     expect(component).toMatchSnapshot();
   });
 
-  it('* component onSelect checks visible', () => {
-    const onSelect = jest.fn();
-    const component: RenderAPI = render(
-      <MockMenu
-        visible={true}
-        items={menuItems}
-        onRequestClose={() => {}}
-        onSelect={onSelect}>
-        <View/>
-      </MockMenu>,
-    );
-    const items: ReactTestInstance[] = component.getAllByType(TouchableOpacity);
-    fireEvent.press(items[0]);
-    fireEvent.press(items[1]);
-    expect(onSelect).toBeCalledTimes(1);
-  });
-
-  it('* component onSelect checks invisible', () => {
-    const onSelect = jest.fn();
-    const component: RenderAPI = render(
-      <MockMenu
-        visible={false}
-        items={menuItems}
-        onRequestClose={() => {}}
-        onSelect={onSelect}>
-        <View/>
-      </MockMenu>,
-    );
-    const items: ReactTestInstance[] = component.getAllByType(TouchableOpacity);
-    fireEvent.press(items[0]);
-    expect(onSelect).toBeCalledTimes(0);
-  });
-
 });
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
index d64d9a589..5125aef25 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
@@ -32,9 +32,8 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
         <View>
           <ForwardRef(createComponent)
             icon={[Function]}
+            index={0}
             isLastItem={false}
-            onPress={[Function]}
-            size="medium"
             style={
               Object {
                 "borderTopLeftRadius": 6,
@@ -46,24 +45,19 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
           <ForwardRef(createComponent)
             disabled={true}
             icon={[Function]}
+            index={1}
             isLastItem={false}
-            onPress={[Function]}
-            size="medium"
-            style={null}
             text="Menu Item 2"
           />
           <ForwardRef(createComponent)
+            index={2}
             isLastItem={false}
-            onPress={[Function]}
-            size="medium"
-            style={null}
             text="Menu Item 3"
           />
           <ForwardRef(createComponent)
             icon={[Function]}
+            index={3}
             isLastItem={true}
-            onPress={[Function]}
-            size="medium"
             style={
               Object {
                 "borderBottomLeftRadius": 6,
@@ -97,7 +91,6 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
         ]
       }
       onRequestClose={[Function]}
-      size="medium"
       style={
         Object {
           "alignItems": "center",
@@ -512,9 +505,8 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = `
         <View>
           <ForwardRef(createComponent)
             icon={[Function]}
+            index={0}
             isLastItem={true}
-            onPress={[Function]}
-            size="medium"
             style={
               Object {
                 "borderRadius": 6,
@@ -535,7 +527,6 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = `
         ]
       }
       onRequestClose={[Function]}
-      size="medium"
       style={
         Object {
           "alignItems": "center",
@@ -705,84 +696,6 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = `
 </View>
 `;
 
-exports[`@overflow-menu-item: component checks * disabled item 1`] = `
-<View
-  accessible={true}
-  isTVSelectable={true}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#8992A3",
-      "borderBottomColor": "#DDE1EB",
-      "borderBottomWidth": 1.2,
-      "flexDirection": "row",
-      "minHeight": 40,
-      "opacity": 1,
-      "padding": 10,
-    }
-  }
->
-  <Image
-    source={
-      Object {
-        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
-      }
-    }
-    style={
-      Object {
-        "height": 20,
-        "marginHorizontal": 6,
-        "tintColor": "#0D1C2E",
-        "width": 20,
-      }
-    }
-  />
-  <Text
-    dispatch={[Function]}
-    style={
-      Array [
-        Object {
-          "color": undefined,
-          "fontSize": undefined,
-        },
-        Object {
-          "color": "#0D1C2E",
-          "fontSize": 13,
-          "fontWeight": "600",
-          "marginHorizontal": 6,
-        },
-      ]
-    }
-    theme={
-      Object {
-        "blue-dark": "#2541CC",
-        "blue-pitch-dark": "#0D1C2E",
-        "blue-primary": "#3366FF",
-        "gray-100": "#f7f8fa",
-        "gray-200": "#edf0f5",
-        "gray-300": "#c8cedb",
-        "gray-400": "#a6aebd",
-        "gray-dark": "#8992A3",
-        "gray-highlight": "#EDF0F5",
-        "gray-light": "#DDE1EB",
-        "gray-primary": "#A6AEBD",
-        "pink-primary": "#FF3D71",
-        "text-primary": "#000000",
-        "text-primary-inverse": "#ffffff",
-      }
-    }
-  >
-    Test Menu Item
-  </Text>
-</View>
-`;
-
 exports[`@overflow-menu-item: component checks * menu item active checks 1`] = `
 <TouchableOpacity
   activeOpacity={1}
@@ -791,6 +704,7 @@ exports[`@overflow-menu-item: component checks * menu item active checks 1`] = `
   dispatch={[Function]}
   icon={[Function]}
   isLastItem={false}
+  onLongPress={[Function]}
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
@@ -869,6 +783,7 @@ exports[`@overflow-menu-item: component checks * menu item active checks 2`] = `
   dispatch={[Function]}
   icon={[Function]}
   isLastItem={false}
+  onLongPress={[Function]}
   onPress={[Function]}
   onPressIn={[Function]}
   onPressOut={[Function]}
diff --git a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
index efa87bff5..a047879c0 100644
--- a/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenuItem.component.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   TouchableOpacity,
-  TouchableOpacityProps,
   GestureResponderEvent,
   StyleSheet,
   ImageProps,
@@ -16,6 +15,7 @@ import {
   Text as TextComponent,
   Props as TextProps,
 } from '../text/text.component';
+import { TouchableOpacityIndexedProps } from '../service/type';
 
 export interface OverflowMenuItemType {
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
@@ -23,12 +23,12 @@ export interface OverflowMenuItemType {
   size?: string;
   isLastItem?: boolean;
   disabled?: boolean;
-  onPress?: () => void;
+  index?: number;
 }
 
 const Text = styled<TextComponent, TextProps>(TextComponent);
 
-export type Props = OverflowMenuItemType & StyledComponentProps & TouchableOpacityProps;
+export type Props = OverflowMenuItemType & StyledComponentProps & TouchableOpacityIndexedProps;
 
 export class OverflowMenuItem extends React.Component<Props> {
 
@@ -37,30 +37,30 @@ export class OverflowMenuItem extends React.Component<Props> {
   };
 
   private onPress = (event: GestureResponderEvent) => {
-    if (!this.props.disabled) {
-      if (this.props.onPress) {
-        this.props.onPress(event);
-      }
+    if (this.props.onPress) {
+      this.props.onPress(event, this.props.index);
     }
   };
 
   private onPressIn = (event: GestureResponderEvent) => {
-    if (!this.props.disabled) {
-      this.props.dispatch([Interaction.ACTIVE]);
+    this.props.dispatch([Interaction.ACTIVE]);
 
-      if (this.props.onPressIn) {
-        this.props.onPressIn(event);
-      }
+    if (this.props.onPressIn) {
+      this.props.onPressIn(event, this.props.index);
     }
   };
 
   private onPressOut = (event: GestureResponderEvent) => {
-    if (!this.props.disabled) {
-      this.props.dispatch([]);
+    this.props.dispatch([]);
 
-      if (this.props.onPressOut) {
-        this.props.onPressOut(event);
-      }
+    if (this.props.onPressOut) {
+      this.props.onPressOut(event, this.props.index);
+    }
+  };
+
+  private onLongPress = (event: GestureResponderEvent) => {
+    if (this.props.onLongPress) {
+      this.props.onLongPress(event, this.props.index);
     }
   };
 
@@ -80,13 +80,15 @@ export class OverflowMenuItem extends React.Component<Props> {
     };
   };
 
-  private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => (
-    <Text
-      style={style}
-      key={2}>
-      {this.props.text}
-    </Text>
-  );
+  private renderTextElement = (style: StyleType): React.ReactElement<TextProps> => {
+    return (
+      <Text
+        style={style}
+        key={2}>
+        {this.props.text}
+      </Text>
+    );
+  };
 
   private renderImageElement = (style: StyleType): React.ReactElement<ImageProps> | null => {
     const { icon } = this.props;
@@ -110,7 +112,8 @@ export class OverflowMenuItem extends React.Component<Props> {
         activeOpacity={1.0}
         onPress={this.onPress}
         onPressIn={this.onPressIn}
-        onPressOut={this.onPressOut}>
+        onPressOut={this.onPressOut}
+        onLongPress={this.onLongPress}>
         {componentChildren}
       </TouchableOpacity>
     );
diff --git a/src/framework/ui/service/type.ts b/src/framework/ui/service/type.ts
index f6df394bc..65f6871ee 100644
--- a/src/framework/ui/service/type.ts
+++ b/src/framework/ui/service/type.ts
@@ -3,6 +3,8 @@ import {
   NativeScrollEvent,
   TextInputFocusEventData,
   TextInputEndEditingEventData,
+  TouchableOpacityProps,
+  GestureResponderEvent,
 } from 'react-native';
 
 export type ScrollEvent = NativeSyntheticEvent<NativeScrollEvent>;
@@ -10,3 +12,11 @@ export type InputFocusEvent = NativeSyntheticEvent<TextInputFocusEventData>;
 export type InputEndEditEvent = NativeSyntheticEvent<TextInputEndEditingEventData>;
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+// @ts-ignore: props override
+export interface TouchableOpacityIndexedProps extends TouchableOpacityProps {
+  onPress?: (event: GestureResponderEvent, index: number) => void;
+  onPressIn?: (event: GestureResponderEvent, index: number) => void;
+  onPressOut?: (event: GestureResponderEvent, index: number) => void;
+  onLongPress?: (event: GestureResponderEvent, index: number) => void;
+}
diff --git a/src/playground/src/ui/screen/list.component.tsx b/src/playground/src/ui/screen/list.component.tsx
index 06cc33ab5..08e3b255f 100644
--- a/src/playground/src/ui/screen/list.component.tsx
+++ b/src/playground/src/ui/screen/list.component.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Alert,
+  GestureResponderEvent,
   ListRenderItemInfo,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
@@ -35,7 +36,7 @@ export class ListScreen extends React.Component<Props> {
     ].join(' '),
   });
 
-  private onItemPress = (index: number) => {
+  private onItemPress = (event: GestureResponderEvent, index: number) => {
     const { title, description } = this.items[index];
 
     Alert.alert(`${title} ${index + 1} says`, `${description}`);
diff --git a/src/playground/src/ui/screen/overflowMenu.component.tsx b/src/playground/src/ui/screen/overflowMenu.component.tsx
index fbc13567b..e79e4b2fc 100644
--- a/src/playground/src/ui/screen/overflowMenu.component.tsx
+++ b/src/playground/src/ui/screen/overflowMenu.component.tsx
@@ -4,6 +4,7 @@ import {
   Image,
   TouchableOpacity,
   Alert,
+  GestureResponderEvent,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import {
@@ -79,7 +80,7 @@ class OverflowMenu extends React.Component<Props, State> {
     this.setState({ overflowMenu4Visible: !this.state.overflowMenu4Visible });
   };
 
-  private onSelectItem = (index: number): void => {
+  private onSelectItem = (event: GestureResponderEvent, index: number): void => {
     Alert.alert(`Selected item\'s index: ${index}`);
   };
 
@@ -92,9 +93,8 @@ class OverflowMenu extends React.Component<Props, State> {
             placement='bottom start'
             visible={this.state.overflowMenu1Visible}
             style={this.props.themedStyle.menu}
-            onSelect={(index: number) => this.onSelectItem(index)}
-            onRequestClose={this.setMenu1Visible}
-          >
+            onSelect={this.onSelectItem}
+            onRequestClose={this.setMenu1Visible}>
             <TouchableOpacity
               onPress={this.setMenu1Visible}
               style={this.props.themedStyle.menuContainer}>
@@ -106,9 +106,8 @@ class OverflowMenu extends React.Component<Props, State> {
             placement='bottom end'
             visible={this.state.overflowMenu2Visible}
             style={this.props.themedStyle.menu}
-            onSelect={(index: number) => this.onSelectItem(index)}
-            onRequestClose={this.setMenu2Visible}
-          >
+            onSelect={this.onSelectItem}
+            onRequestClose={this.setMenu2Visible}>
             <TouchableOpacity
               onPress={this.setMenu2Visible}
               style={this.props.themedStyle.menuContainer}>
@@ -122,9 +121,8 @@ class OverflowMenu extends React.Component<Props, State> {
             placement='top start'
             visible={this.state.overflowMenu3Visible}
             style={this.props.themedStyle.menu}
-            onSelect={(index: number) => this.onSelectItem(index)}
-            onRequestClose={this.setMenu3Visible}
-          >
+            onSelect={this.onSelectItem}
+            onRequestClose={this.setMenu3Visible}>
             <TouchableOpacity
               onPress={this.setMenu3Visible}
               style={this.props.themedStyle.menuContainer}>
@@ -136,9 +134,8 @@ class OverflowMenu extends React.Component<Props, State> {
             placement='top end'
             visible={this.state.overflowMenu4Visible}
             style={this.props.themedStyle.menu}
-            onSelect={(index: number) => this.onSelectItem(index)}
-            onRequestClose={this.setMenu4Visible}
-          >
+            onSelect={this.onSelectItem}
+            onRequestClose={this.setMenu4Visible}>
             <TouchableOpacity
               onPress={this.setMenu4Visible}
               style={this.props.themedStyle.menuContainer}>

From 3cddb95077d375a2228feb97c58eff22b78e194a Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Wed, 13 Mar 2019 19:53:44 +0300
Subject: [PATCH 5/6] test(overflow-menu): overflow-menu tests update

---
 .../theme/service/style/style.service.ts      |  4 +-
 .../overflowMenu/overflowMenu.spec.config.ts  | 94 +++++++++++++++++++
 .../ui/overflowMenu/overflowMenu.spec.tsx     |  4 +-
 .../overflowMenu/overflowMenu.spec.tsx.snap   | 49 +++++-----
 4 files changed, 125 insertions(+), 26 deletions(-)

diff --git a/src/framework/theme/service/style/style.service.ts b/src/framework/theme/service/style/style.service.ts
index 604b0fef6..db6480e53 100644
--- a/src/framework/theme/service/style/style.service.ts
+++ b/src/framework/theme/service/style/style.service.ts
@@ -6,7 +6,7 @@ import {
 import { getThemeValue } from '../theme';
 
 export function createThemedStyle(mapping: ThemedStyleType, theme: ThemeType): StyleType {
-  return mapping ? Object.keys(mapping).reduce((acc: StyleType, current: string): StyleType => {
+  return Object.keys(mapping).reduce((acc: StyleType, current: string): StyleType => {
     const mappingValue: any = mapping[current];
 
     if (mappingValue instanceof Object) {
@@ -16,5 +16,5 @@ export function createThemedStyle(mapping: ThemedStyleType, theme: ThemeType): S
     }
 
     return acc;
-  }, {}) : {};
+  }, {});
 }
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.config.ts b/src/framework/ui/overflowMenu/overflowMenu.spec.config.ts
index bac8641de..dd0f2cbef 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.config.ts
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.config.ts
@@ -150,6 +150,100 @@ export const mapping: ThemeMappingType = {
       },
     },
   },
+  'Text': {
+    'meta': {
+      'scope': 'all',
+      'mapping': {
+        'color': {
+          'type': 'color',
+        },
+        'fontSize': {
+          'type': 'number',
+        },
+      },
+      'appearances': {
+        'primary': {
+          'default': true,
+        },
+      },
+      'variants': {
+        'category': {
+          'h1': {
+            'default': false,
+          },
+          'h2': {
+            'default': false,
+          },
+          'h3': {
+            'default': false,
+          },
+          'h4': {
+            'default': false,
+          },
+          'h5': {
+            'default': false,
+          },
+          'h6': {
+            'default': false,
+          },
+          'body': {
+            'default': true,
+          },
+        },
+      },
+      'states': {},
+    },
+    'appearance': {
+      'primary': {
+        'mapping': {
+          'color': 'text-primary',
+        },
+        'variant': {
+          'category': {
+            'h1': {
+              'fontSize': 64,
+            },
+            'h2': {
+              'fontSize': 40,
+            },
+            'h3': {
+              'fontSize': 32,
+            },
+            'h4': {
+              'fontSize': 24,
+            },
+            'h5': {
+              'fontSize': 16,
+            },
+            'h6': {
+              'fontSize': 14,
+            },
+            'body': {
+              'fontSize': 16,
+            },
+          },
+        },
+      },
+    },
+  },
+  'Popover': {
+    'meta': {
+      'scope': 'all',
+      'mapping': {},
+      'appearances': {
+        'default': {
+          'default': true,
+        },
+      },
+      'variants': {},
+      'states': {},
+    },
+    'appearance': {
+      'default': {
+        'mapping': {},
+      },
+    },
+  },
 };
 
 export const theme: ThemeType = {
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
index 0098f31bc..ce62ff5c7 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx
@@ -49,8 +49,6 @@ const MockMenuItem = (props?: OverflowMenuItemComponentProps): React.ReactElemen
 const iconUri1: string = 'https://akveo.github.io/eva-icons/fill/png/128/star.png';
 const iconUri2: string = 'https://akveo.github.io/eva-icons/fill/png/128/alert-triangle.png';
 const iconUri3: string = 'https://akveo.github.io/eva-icons/fill/png/128/book-open.png';
-const menuIconUri: string = 'https://akveo.github.io/eva-icons/fill/png/128/menu.png';
-const MenuAppShowTestId: string = '@app/show-menu';
 
 const menuItems: OverflowMenuItemType[] = [
   {
@@ -83,7 +81,7 @@ describe('@overflow-menu-item: component checks', () => {
       <MockMenuItem
         text='Test Menu Item'
         icon={(style: StyleType) => <Image source={{ uri: iconUri1 }} style={style}/>}
-        size='small'
+        // size='small'
         isLastItem={false}
         disabled={true}
         onPress={() => 1}
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
index 5125aef25..f59bbe884 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
@@ -217,12 +217,13 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
               }
             />
             <Text
+              appearance="primary"
               dispatch={[Function]}
               style={
                 Array [
                   Object {
-                    "color": undefined,
-                    "fontSize": undefined,
+                    "color": "#000000",
+                    "fontSize": 16,
                   },
                   Object {
                     "color": "#0D1C2E",
@@ -292,12 +293,13 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
               }
             />
             <Text
+              appearance="primary"
               dispatch={[Function]}
               style={
                 Array [
                   Object {
-                    "color": undefined,
-                    "fontSize": undefined,
+                    "color": "#000000",
+                    "fontSize": 16,
                   },
                   Object {
                     "color": "#0D1C2E",
@@ -352,12 +354,13 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
             }
           >
             <Text
+              appearance="primary"
               dispatch={[Function]}
               style={
                 Array [
                   Object {
-                    "color": undefined,
-                    "fontSize": undefined,
+                    "color": "#000000",
+                    "fontSize": 16,
                   },
                   Object {
                     "color": "#0D1C2E",
@@ -429,12 +432,13 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
               }
             />
             <Text
+              appearance="primary"
               dispatch={[Function]}
               style={
                 Array [
                   Object {
-                    "color": undefined,
-                    "fontSize": undefined,
+                    "color": "#000000",
+                    "fontSize": 16,
                   },
                   Object {
                     "color": "#0D1C2E",
@@ -652,12 +656,13 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = `
               }
             />
             <Text
+              appearance="primary"
               dispatch={[Function]}
               style={
                 Array [
                   Object {
-                    "color": undefined,
-                    "fontSize": undefined,
+                    "color": "#000000",
+                    "fontSize": 16,
                   },
                   Object {
                     "color": "#0D1C2E",
@@ -871,9 +876,9 @@ exports[`@overflow-menu-item: component checks * menu item with "set-1" props 1`
       "borderBottomColor": "#DDE1EB",
       "borderBottomWidth": 1.2,
       "flexDirection": "row",
-      "minHeight": 40,
+      "minHeight": 48,
       "opacity": 1,
-      "padding": 10,
+      "padding": 12,
     }
   }
 >
@@ -885,26 +890,27 @@ exports[`@overflow-menu-item: component checks * menu item with "set-1" props 1`
     }
     style={
       Object {
-        "height": 20,
-        "marginHorizontal": 6,
+        "height": 24,
+        "marginHorizontal": 8,
         "tintColor": "#0D1C2E",
-        "width": 20,
+        "width": 24,
       }
     }
   />
   <Text
+    appearance="primary"
     dispatch={[Function]}
     style={
       Array [
         Object {
-          "color": undefined,
-          "fontSize": undefined,
+          "color": "#000000",
+          "fontSize": 16,
         },
         Object {
           "color": "#0D1C2E",
-          "fontSize": 13,
+          "fontSize": 15,
           "fontWeight": "600",
-          "marginHorizontal": 6,
+          "marginHorizontal": 8,
         },
       ]
     }
@@ -956,12 +962,13 @@ exports[`@overflow-menu-item: component checks * menu item with "set-2" props 1`
   }
 >
   <Text
+    appearance="primary"
     dispatch={[Function]}
     style={
       Array [
         Object {
-          "color": undefined,
-          "fontSize": undefined,
+          "color": "#000000",
+          "fontSize": 16,
         },
         Object {
           "color": "#0D1C2E",

From 6d9c08cbc62886d24d849a6614107f340e1b7bfc Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Thu, 14 Mar 2019 12:45:41 +0300
Subject: [PATCH 6/6] feat(ui): overflow-menu visibility checking add

---
 .../ui/overflowMenu/overflowMenu.component.tsx        | 11 ++++++++++-
 .../ui/overflowMenu/overflowMenu.spec.tsx.snap        |  5 +++++
 src/framework/ui/popover/popover.component.tsx        |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
index 4dc47ae19..28ffbd78f 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.component.tsx
+++ b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -54,6 +54,15 @@ export class OverflowMenu extends React.Component<Props> {
     borderRadius: style.borderRadius,
   });
 
+  private onSelect = (event: GestureResponderEvent, index: number): void => {
+    const { visible, onSelect } = this.props;
+    // FIXME: this is due to popover renders always with the "opacity": 0,
+    //  so popover can listen events even it's "invisible"
+    if (visible && onSelect) {
+      onSelect(event, index);
+    }
+  };
+
   private getMenuItemStyle = (style: StyleType, index: number): StyleType => {
     const borderRadius: number = style.menuItem.borderRadius;
 
@@ -86,7 +95,7 @@ export class OverflowMenu extends React.Component<Props> {
         style={itemStyle}
         key={index}
         index={index}
-        onPress={this.props.onSelect}
+        onPress={this.onSelect}
       />
     );
   };
diff --git a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
index f59bbe884..8eec87278 100644
--- a/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
+++ b/src/framework/ui/overflowMenu/overflowMenu.spec.tsx.snap
@@ -34,6 +34,7 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
             icon={[Function]}
             index={0}
             isLastItem={false}
+            onPress={[Function]}
             style={
               Object {
                 "borderTopLeftRadius": 6,
@@ -47,17 +48,20 @@ exports[`@overflow-menu: component checks * component renders properly 1`] = `
             icon={[Function]}
             index={1}
             isLastItem={false}
+            onPress={[Function]}
             text="Menu Item 2"
           />
           <ForwardRef(createComponent)
             index={2}
             isLastItem={false}
+            onPress={[Function]}
             text="Menu Item 3"
           />
           <ForwardRef(createComponent)
             icon={[Function]}
             index={3}
             isLastItem={true}
+            onPress={[Function]}
             style={
               Object {
                 "borderBottomLeftRadius": 6,
@@ -511,6 +515,7 @@ exports[`@overflow-menu: component checks * single menu-item 1`] = `
             icon={[Function]}
             index={0}
             isLastItem={true}
+            onPress={[Function]}
             style={
               Object {
                 "borderRadius": 6,
diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
index f7a452408..1bfcf59ad 100644
--- a/src/framework/ui/popover/popover.component.tsx
+++ b/src/framework/ui/popover/popover.component.tsx
@@ -48,6 +48,7 @@ const TAG_CHILD: number = 0;
 const TAG_CONTENT: number = 1;
 const PLACEMENT_DEFAULT: Placement = Placements.BOTTOM;
 
+// FIXME: re-implement somehow "visibility" behavior
 export class Popover extends React.Component<Props, State> {
 
   static defaultProps: Partial<Props> = {