From 2eeddff6609c5dcbb5d8ebcee2bea7ad057ab901 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Thu, 28 Feb 2019 14:19:19 +0300
Subject: [PATCH 1/7] refactor(ui): modal service/panel/component refactor

---
 .../component/modal/modalPanel.component.tsx  |  37 +++--
 .../theme/service/modal/modal.service.tsx     |  32 +++-
 src/framework/theme/type.ts                   |   3 +-
 src/framework/ui/modal/modal.component.tsx    |  67 +++-----
 .../ui/popover/popover.component.tsx          |   4 +-
 .../src/ui/screen/dialog.component.tsx        | 148 ++++++++++--------
 .../src/ui/screen/modal.component.tsx         |   5 +-
 7 files changed, 162 insertions(+), 134 deletions(-)

diff --git a/src/framework/theme/component/modal/modalPanel.component.tsx b/src/framework/theme/component/modal/modalPanel.component.tsx
index 4657d61d5..787c2596a 100644
--- a/src/framework/theme/component/modal/modalPanel.component.tsx
+++ b/src/framework/theme/component/modal/modalPanel.component.tsx
@@ -4,19 +4,23 @@ import {
   StyleSheet,
   ViewProps,
 } from 'react-native';
-import { ModalService } from '../../service';
+import {
+  ModalPresenting,
+  ModalService,
+} from '../../service';
 import { Modal } from '../../../ui/modal/modal.component';
+import { ModalComponentCloseProps } from '@kitten/theme';
 
 export interface ModalPanelProps {
   children: React.ReactElement<any> | React.ReactElement<any>[];
 }
 
 interface ModalPanelState {
-  dialogComponents: Map<string, React.ReactElement<any>>;
+  dialogComponents: Map<string, React.ReactElement<ModalComponentCloseProps>>;
   backdropValues: Map<string, boolean>;
 }
 
-export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState> {
+export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState> implements ModalPresenting {
 
   public state: ModalPanelState = {
     dialogComponents: new Map(),
@@ -24,33 +28,40 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
   };
 
   public componentDidMount(): void {
-    ModalService.setComponent(this);
+    ModalService.mount(this);
   }
 
   public componentWillUnmount(): void {
-    ModalService.setComponent(null);
+    ModalService.unmount();
   }
 
-  public onCloseModal = (identifier: string) => {
+  public hide = (identifier: string): void => {
+    const component: React.ReactElement<ModalComponentCloseProps> = this.state.dialogComponents
+      .get(identifier);
+    if (component) {
+      component.props.onRequestClose && component.props.onRequestClose();
+    }
     const components: Map<string, React.ReactElement<any>> = this.state.dialogComponents;
     components.delete(identifier);
-    const backdropValues: Map<string, boolean> = this.state.backdropValues;
-    backdropValues.delete(identifier);
+    const backdrops: Map<string, boolean> = this.state.backdropValues;
+    backdrops.delete(identifier);
     this.setState({
       dialogComponents: components,
-      backdropValues: backdropValues,
+      backdropValues: backdrops,
     });
   };
 
-  public showDialog(dialogComponent: React.ReactElement<any>, closeOnBackDrop: boolean): void {
+  public show(dialogComponent: React.ReactElement<any>, closeOnBackDrop: boolean): string {
     const key: string = this.generateUniqueComponentKey();
     const componentsMap: Map<string, React.ReactElement<any>> = this.state.dialogComponents
       .set(key, dialogComponent);
-    const backdropsMap: Map<string, boolean> = this.state.backdropValues.set(key, closeOnBackDrop);
+    const backdrops: Map<string, boolean> = this.state.backdropValues
+      .set(key, closeOnBackDrop);
     this.setState({
       dialogComponents: componentsMap,
-      backdropValues: backdropsMap,
+      backdropValues: backdrops,
     });
+    return key;
   }
 
   private generateUniqueComponentKey = (): string => {
@@ -72,7 +83,7 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
         isBackDropAllowed={closeOnBackdrop}
         key={index}
         identifier={identifier}
-        onCloseModal={this.onCloseModal}
+        onCloseModal={this.hide}
       >
         {modal}
       </Modal>
diff --git a/src/framework/theme/service/modal/modal.service.tsx b/src/framework/theme/service/modal/modal.service.tsx
index 14181c0ad..58c1d63e8 100644
--- a/src/framework/theme/service/modal/modal.service.tsx
+++ b/src/framework/theme/service/modal/modal.service.tsx
@@ -1,21 +1,37 @@
 import React from 'react';
-import { ModalPanel } from '../../component';
+import { ModalComponentCloseProps } from '@kitten/theme';
 
 class ModalServiceType {
 
-  component: ModalPanel | null = null;
+  panel: ModalPresenting | null = null;
 
-  public setComponent(component: ModalPanel | null): void {
-    this.component = component;
+  public mount(panel: ModalPresenting | null): void {
+    this.panel = panel;
   }
 
-  public showDialog(dialogComponent: React.ReactElement<any>,
-                    closeOnBackDrop: boolean = false): void {
+  public unmount(): void {
+    this.panel = null;
+  }
+
+  public show(element: React.ReactElement<ModalComponentCloseProps>,
+              closeOnBackDrop: boolean = false): string {
+    if (this.panel) {
+      return this.panel.show(element, closeOnBackDrop);
+    }
+  }
 
-    if (this.component) {
-      this.component.showDialog(dialogComponent, closeOnBackDrop);
+  public hide(identifier: string): void {
+    if (this.panel) {
+      this.panel.hide(identifier);
     }
   }
 }
 
+export interface ModalPresenting {
+  show(element: React.ReactElement<ModalComponentCloseProps>,
+       closeOnBackDrop: boolean): string;
+
+  hide(identifier: string): void;
+}
+
 export const ModalService = new ModalServiceType();
diff --git a/src/framework/theme/type.ts b/src/framework/theme/type.ts
index 6d3153160..561a2c505 100644
--- a/src/framework/theme/type.ts
+++ b/src/framework/theme/type.ts
@@ -27,5 +27,6 @@ export type ThemedStyleType = any;
 export type StyleSheetType = any;
 
 export interface ModalComponentCloseProps {
-  onCloseModal?: () => void;
+  [key: string]: any;
+  onRequestClose: () => void;
 }
diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
index a28e9c517..67a9e356d 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import {
-  View,
   ViewProps,
   TouchableWithoutFeedbackProps,
   StyleSheet,
-  TouchableWithoutFeedback,
   Dimensions,
   Animated,
 } from 'react-native';
@@ -63,19 +61,6 @@ export class Modal extends React.Component<Props> {
     }
   }
 
-  private getComponentStyle = (style: StyleType): StyleType | null => {
-    return {
-      container: style ? {
-        paddingHorizontal: style.paddingHorizontal,
-        paddingVertical: style.paddingVertical,
-        backgroundColor: style.backgroundColor,
-        borderColor: style.borderColor,
-        borderRadius: style.borderRadius,
-        borderWidth: style.borderWidth,
-      } : null,
-    };
-  };
-
   private getAnimationStyle(type: ModalAnimationType): StyleType | undefined {
     switch (type) {
       case 'none':
@@ -117,42 +102,45 @@ export class Modal extends React.Component<Props> {
     }
   };
 
+  private onStartShouldSetResponder = (): boolean => true;
+
+  private onStartShouldSetResponderCapture = (): boolean => false;
+
   private createComponentChild = (source: React.ReactElement<any>): React.ReactElement<any> => {
     return React.cloneElement(source, {
+      ...source.props,
       onCloseModal: this.closeModal,
-      pointerEvents: 'box-none',
+      onStartShouldSetResponder: () => true,
+      onResponderRelease: () => {},
     });
   };
 
-  private createBackdropElement = (): React.ReactElement<TouchableWithoutFeedbackProps> => {
-    return this.props.isBackDropAllowed ? (
-      <TouchableWithoutFeedback onPress={this.closeOnBackdrop}>
-        <View style={styles.backdrop}/>
-      </TouchableWithoutFeedback>
-    ) : null;
-  };
-
   private createComponentChildren = (source: React.ReactNode): React.ReactElement<any>[] => {
     return React.Children.map(source, this.createComponentChild);
   };
 
   private renderComponent = (): React.ReactElement<ViewProps> => {
-    const { style, themedStyle, animationType, children, ...derivedProps } = this.props;
-    const componentStyle: StyleType = this.getComponentStyle(themedStyle);
+    const { style, animationType, children, isBackDropAllowed, ...derivedProps } = this.props;
     const animationStyle: StyleType = this.getAnimationStyle(animationType);
-
-    const backdropElement: React.ReactElement<any> = this.createBackdropElement();
     const componentChildren: React.ReactElement<any>[] = this.createComponentChildren(children);
 
-    return (
-      <View style={styles.container}>
-        {backdropElement}
-        <Animated.View
-          {...derivedProps}
-          style={[componentStyle.container, style, animationStyle]}>
-          {componentChildren}
-        </Animated.View>
-      </View>
+    const dialog: React.ReactElement<ViewProps> =
+      <Animated.View
+        {...derivedProps}
+        style={[styles.container, style, animationStyle]}>
+        {componentChildren}
+      </Animated.View>;
+
+    return isBackDropAllowed ? (
+      React.cloneElement(dialog, {
+        onStartShouldSetResponder: this.onStartShouldSetResponder,
+        onResponderRelease: this.closeOnBackdrop,
+        onStartShouldSetResponderCapture: this.onStartShouldSetResponderCapture,
+      })
+    ) : (
+      React.cloneElement(dialog, {
+        pointerEvents: 'box-none',
+      })
     );
   };
 
@@ -163,11 +151,6 @@ export class Modal extends React.Component<Props> {
 
 const styles = StyleSheet.create({
   container: {
-    position: 'absolute',
-  },
-  backdrop: {
-    width: width,
-    height: height,
     ...StyleSheet.absoluteFillObject,
   },
 });
diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
index 7c564c1af..0ad011d2e 100644
--- a/src/framework/ui/popover/popover.component.tsx
+++ b/src/framework/ui/popover/popover.component.tsx
@@ -82,9 +82,9 @@ export class Popover extends React.Component<Props, State> {
       // Retrieve `content` from popover children
       // and clone it with measured position
       const { [TAG_CONTENT]: popoverView } = container.props.children;
-      const popover: React.ReactElement<ViewProps> = React.cloneElement(popoverView, { style });
+      const popover: React.ReactElement<any> = React.cloneElement(popoverView, { style });
 
-      ModalService.showDialog(popover, true);
+      ModalService.show(popover, true);
     }
   }
 
diff --git a/src/playground/src/ui/screen/dialog.component.tsx b/src/playground/src/ui/screen/dialog.component.tsx
index 75b629535..9c2e3ea4d 100644
--- a/src/playground/src/ui/screen/dialog.component.tsx
+++ b/src/playground/src/ui/screen/dialog.component.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {
   View,
+  Text,
   Button,
-  ViewStyle,
-  ViewProps,
+  StyleSheet,
+  Alert,
 } from 'react-native';
 import {
   ThemedComponentProps,
@@ -16,92 +17,107 @@ import { NavigationScreenProps } from 'react-navigation';
 
 type Props = & ThemedComponentProps & NavigationScreenProps;
 
-interface EndlessModalProps {
-  onContinue?: () => void;
-  onDismiss?: () => void;
-}
-
-const EndlessModal = (props?: EndlessModalProps & ModalComponentCloseProps & ViewProps) => {
-
-  const { onContinue, onDismiss, onCloseModal, ...derivedProps } = props;
-
-  const onCloseButtonPress = () => {
-    if (onDismiss) {
-      onDismiss();
-    }
-    onCloseModal();
-  };
-
-  return (
-    <View {...derivedProps}>
-      <Button
-        title='Next'
-        onPress={onContinue}
-      />
-      <Button
-        title='Close'
-        onPress={onCloseButtonPress}
-      />
-    </View>
-  );
-};
-
 class Dialog extends React.Component<Props> {
 
   static navigationOptions = {
-    title: 'Dialog',
+    title: 'Modal',
   };
 
-  private modalCount: number = 0;
+  private modalId: string | undefined = undefined;
 
-  private onNext = (): void => {
-    this.modalCount += 1;
+  private createModal = (): React.ReactElement<any> => (
+    <TestModal onRequestClose={() => console.log('Dialog close')}/>
+  );
 
-    const component = this.createModalElement();
-    ModalService.showDialog(component, true);
+  private showModal = (): void => {
+    const component = this.createModal();
+    this.modalId = ModalService.show(component, true);
   };
 
-  private onClose = (): void => {
-    this.modalCount -= 1;
+  private hideModal = () => {
+    if (this.modalId) {
+      ModalService.hide(this.modalId);
+    }
   };
 
-  private createModalElement = (): React.ReactElement<any> => {
-    const color: string = this.modalCount % 2 === 0 ? '#C0C0C0' : '#A0A1A8';
+  render() {
+    return (
+      <View>
+        <Button
+          onPress={this.showModal}
+          title='Show Modal'
+        />
+        <Button
+          onPress={this.hideModal}
+          title='Hide Modal'
+        />
+      </View>
+    );
+  }
+}
+
+export const DialogScreen = withStyles(Dialog, (theme: ThemeType) => ({}));
 
-    const additionalProps: ViewStyle = {
-      left: this.modalCount * 20,
-      top: 140 + this.modalCount * 20,
-      backgroundColor: color,
-    };
+class TestModal extends React.Component<ModalComponentCloseProps> {
+
+  private createModal = (): React.ReactElement<any> => (
+    <InnerTestModal onRequestClose={() => console.log('Inner dialog close')}/>
+  );
 
+  private showModal = (): void => {
+    const component = this.createModal();
+    ModalService.show(component, true);
+  };
+
+  render() {
     return (
-      <EndlessModal
-        style={[this.props.themedStyle.modal, additionalProps]}
-        onContinue={this.onNext}
-        onDismiss={this.onClose}
-      />
+      <View {...this.props} style={styles.outerModal}>
+        <Text>This is Test Outer Modal</Text>
+        <Button
+          title='Open Inner Modal'
+          onPress={this.showModal}
+        />
+        <Button
+          title='Close Modal'
+          onPress={this.props.onCloseModal}
+        />
+      </View>
     );
-  };
+  }
+}
+
+class InnerTestModal extends React.Component<ModalComponentCloseProps> {
 
-  public render(): React.ReactNode {
+  render(): React.ReactNode {
     return (
-      <View>
+      <View {...this.props} style={styles.innerModal}>
+        <Text>This is Test Inner Modal</Text>
         <Button
-          onPress={this.onNext}
-          title='Click me!'
+          title='Close Modal'
+          onPress={this.props.onCloseModal}
         />
       </View>
     );
   }
 }
 
-export const DialogScreen = withStyles(Dialog, (theme: ThemeType) => {
-  return {
-    modal: {
-      width: 128,
-      height: 128,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-  };
+const styles = StyleSheet.create({
+  outerModal: {
+    width: 300,
+    height: 300,
+    backgroundColor: '#d87d8f',
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: 200,
+    left: 50,
+  },
+  innerModal: {
+    width: 150,
+    height: 150,
+    backgroundColor: '#adbbd1',
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: 450,
+    left: 100,
+  },
 });
diff --git a/src/playground/src/ui/screen/modal.component.tsx b/src/playground/src/ui/screen/modal.component.tsx
index 2f8a7128a..83799b3af 100644
--- a/src/playground/src/ui/screen/modal.component.tsx
+++ b/src/playground/src/ui/screen/modal.component.tsx
@@ -76,7 +76,8 @@ class Modal extends React.Component<Props, State> {
           identifier='@modal/fade'
           visible={this.state.fadeModalVisible}
           style={this.props.themedStyle.modal}
-          onCloseModal={this.onFadeButtonPress}
+          onCloseModal={this.onFadeModalDismiss}
+          isBackDropAllowed={true}
           animationType='fade'
           animationDuration={600}>
           <ModalContent onDismiss={this.onFadeModalDismiss}/>
@@ -86,7 +87,7 @@ class Modal extends React.Component<Props, State> {
           visible={this.state.slideModalVisible}
           style={this.props.themedStyle.modal}
           isBackDropAllowed={true}
-          onCloseModal={this.onSlideButtonPress}
+          onCloseModal={this.onSlideModalDismiss}
           animationType='slideInUp'
           animationDuration={600}>
           <ModalContent onDismiss={this.onSlideModalDismiss}/>

From 473d7d031faf5bb3dc01b280a6251741102cc34f Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Fri, 1 Mar 2019 19:52:31 +0300
Subject: [PATCH 2/7] refactor(ui): modal service/panel/component refactor

---
 src/framework/ui/modal/modal.component.tsx        | 6 +++++-
 src/playground/src/ui/screen/dialog.component.tsx | 6 +++---
 src/playground/src/ui/screen/modal.component.tsx  | 1 -
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
index 67a9e356d..6fac417ef 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -112,6 +112,10 @@ export class Modal extends React.Component<Props> {
       onCloseModal: this.closeModal,
       onStartShouldSetResponder: () => true,
       onResponderRelease: () => {},
+      style: {
+        ...source.props.style,
+        ...(this.props.style as object),
+      },
     });
   };
 
@@ -127,7 +131,7 @@ export class Modal extends React.Component<Props> {
     const dialog: React.ReactElement<ViewProps> =
       <Animated.View
         {...derivedProps}
-        style={[styles.container, style, animationStyle]}>
+        style={[styles.container, animationStyle]}>
         {componentChildren}
       </Animated.View>;
 
diff --git a/src/playground/src/ui/screen/dialog.component.tsx b/src/playground/src/ui/screen/dialog.component.tsx
index 9c2e3ea4d..5be73d5d1 100644
--- a/src/playground/src/ui/screen/dialog.component.tsx
+++ b/src/playground/src/ui/screen/dialog.component.tsx
@@ -26,12 +26,12 @@ class Dialog extends React.Component<Props> {
   private modalId: string | undefined = undefined;
 
   private createModal = (): React.ReactElement<any> => (
-    <TestModal onRequestClose={() => console.log('Dialog close')}/>
+    <TestModal onRequestClose={() => Alert.alert('Dialog close')}/>
   );
 
   private showModal = (): void => {
     const component = this.createModal();
-    this.modalId = ModalService.show(component, true);
+    this.modalId = ModalService.show(component, false);
   };
 
   private hideModal = () => {
@@ -61,7 +61,7 @@ export const DialogScreen = withStyles(Dialog, (theme: ThemeType) => ({}));
 class TestModal extends React.Component<ModalComponentCloseProps> {
 
   private createModal = (): React.ReactElement<any> => (
-    <InnerTestModal onRequestClose={() => console.log('Inner dialog close')}/>
+    <InnerTestModal onRequestClose={() => Alert.alert('Inner dialog close')}/>
   );
 
   private showModal = (): void => {
diff --git a/src/playground/src/ui/screen/modal.component.tsx b/src/playground/src/ui/screen/modal.component.tsx
index 83799b3af..ccbc3c698 100644
--- a/src/playground/src/ui/screen/modal.component.tsx
+++ b/src/playground/src/ui/screen/modal.component.tsx
@@ -77,7 +77,6 @@ class Modal extends React.Component<Props, State> {
           visible={this.state.fadeModalVisible}
           style={this.props.themedStyle.modal}
           onCloseModal={this.onFadeModalDismiss}
-          isBackDropAllowed={true}
           animationType='fade'
           animationDuration={600}>
           <ModalContent onDismiss={this.onFadeModalDismiss}/>

From a13c099b34815307ada285036eb3872f09d2c3d4 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Mon, 4 Mar 2019 14:07:03 +0300
Subject: [PATCH 3/7] refactor(test): modal service/panel/component tests
 refactor

---
 .../theme/component/modal/modalPanel.spec.tsx |   2 +-
 .../theme/service/modal/modal.spec.tsx        |  14 +-
 src/framework/ui/modal/modal.component.tsx    |  11 +-
 src/framework/ui/modal/modal.spec.tsx         |  34 +-
 src/framework/ui/modal/modal.spec.tsx.snap    | 547 ++++++------------
 .../src/ui/screen/dialog.component.tsx        |   6 +-
 6 files changed, 219 insertions(+), 395 deletions(-)

diff --git a/src/framework/theme/component/modal/modalPanel.spec.tsx b/src/framework/theme/component/modal/modalPanel.spec.tsx
index 40611db6f..275e241d9 100644
--- a/src/framework/theme/component/modal/modalPanel.spec.tsx
+++ b/src/framework/theme/component/modal/modalPanel.spec.tsx
@@ -37,7 +37,7 @@ describe('@modal panel checks', () => {
     }
 
     showModal() {
-      ModalService.showDialog(<TestModal/>, true);
+      ModalService.show(<TestModal onRequestClose={() => 1}/>, true);
     }
 
     render() {
diff --git a/src/framework/theme/service/modal/modal.spec.tsx b/src/framework/theme/service/modal/modal.spec.tsx
index f935c404b..606981d3f 100644
--- a/src/framework/theme/service/modal/modal.spec.tsx
+++ b/src/framework/theme/service/modal/modal.spec.tsx
@@ -31,7 +31,7 @@ describe('@modal-service: service checks', () => {
           onCloseModal={this.props.onCloseModal}
           textTestId={ModalTextTestId}
         />;
-      ModalService.showDialog(component);
+      ModalService.show(component);
     };
 
     showMultipleModals: () => void = () => {
@@ -47,8 +47,8 @@ describe('@modal-service: service checks', () => {
           onCloseModal={this.props.onCloseModal}
           textTestId={`${ModalTextTestId}-2`}
         />;
-      ModalService.showDialog(component1);
-      ModalService.showDialog(component2);
+      ModalService.show(component1);
+      ModalService.show(component2);
     };
 
     showBackDropAllowedModal: () => void = () => {
@@ -58,7 +58,7 @@ describe('@modal-service: service checks', () => {
           onCloseModal={this.props.onCloseModal}
           textTestId={ModalTextTestId}
         />;
-      ModalService.showDialog(component, true);
+      ModalService.show(component, true);
     };
 
     render() {
@@ -99,7 +99,7 @@ describe('@modal-service: service checks', () => {
   }
 
   it('* showDialog have been called', () => {
-    const spy = jest.spyOn(ModalService, 'showDialog');
+    const spy = jest.spyOn(ModalService, 'show');
     const application = render(<TestApplication/>);
     fireEvent.press(application.getByTestId(ShowSingleModalTestId));
 
@@ -117,8 +117,8 @@ describe('@modal-service: service checks', () => {
 
   it('* unexpected branch cover', () => {
     const application = render(<TestApplication/>);
-    ModalService.setComponent(null);
-    expect(ModalService.component).toBe(null);
+    ModalService.mount(null);
+    expect(ModalService.panel).toBe(null);
     fireEvent.press(application.getByTestId(ShowSingleModalTestId));
     expect(application).toMatchSnapshot();
   });
diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
index 6fac417ef..5e70cfafc 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -106,7 +106,7 @@ export class Modal extends React.Component<Props> {
 
   private onStartShouldSetResponderCapture = (): boolean => false;
 
-  private createComponentChild = (source: React.ReactElement<any>): React.ReactElement<any> => {
+  private renderComponentChild = (source: React.ReactElement<any>): React.ReactElement<any> => {
     return React.cloneElement(source, {
       ...source.props,
       onCloseModal: this.closeModal,
@@ -119,14 +119,14 @@ export class Modal extends React.Component<Props> {
     });
   };
 
-  private createComponentChildren = (source: React.ReactNode): React.ReactElement<any>[] => {
-    return React.Children.map(source, this.createComponentChild);
+  private renderComponentChildren = (source: React.ReactNode): React.ReactElement<any>[] => {
+    return React.Children.map(source, this.renderComponentChild);
   };
 
   private renderComponent = (): React.ReactElement<ViewProps> => {
-    const { style, animationType, children, isBackDropAllowed, ...derivedProps } = this.props;
+    const { animationType, children, isBackDropAllowed, ...derivedProps } = this.props;
     const animationStyle: StyleType = this.getAnimationStyle(animationType);
-    const componentChildren: React.ReactElement<any>[] = this.createComponentChildren(children);
+    const componentChildren: React.ReactElement<any>[] = this.renderComponentChildren(children);
 
     const dialog: React.ReactElement<ViewProps> =
       <Animated.View
@@ -134,7 +134,6 @@ export class Modal extends React.Component<Props> {
         style={[styles.container, animationStyle]}>
         {componentChildren}
       </Animated.View>;
-
     return isBackDropAllowed ? (
       React.cloneElement(dialog, {
         onStartShouldSetResponder: this.onStartShouldSetResponder,
diff --git a/src/framework/ui/modal/modal.spec.tsx b/src/framework/ui/modal/modal.spec.tsx
index 832ca0b91..9e1365d5e 100644
--- a/src/framework/ui/modal/modal.spec.tsx
+++ b/src/framework/ui/modal/modal.spec.tsx
@@ -6,7 +6,6 @@ import {
 import {
   View,
   Text,
-  TouchableWithoutFeedback,
   Button,
 } from 'react-native';
 import {
@@ -143,22 +142,23 @@ describe('@modal component checks', () => {
     expect(modal).toMatchSnapshot();
   });
 
-  it('* modal component close on backDrop checks', () => {
-    const onCloseModal = jest.fn();
-    const modal = render(
-      <Modal
-        visible={true}
-        isBackDropAllowed={true}
-        identifier={MODAL_TEST_IDENTIFIER('1')}
-        onCloseModal={onCloseModal}>
-        <View><Text>Test1</Text></View>
-      </Modal>,
-    );
-    expect(modal).toMatchSnapshot();
-    fireEvent.press(modal.getByType(TouchableWithoutFeedback));
-    expect(modal).toMatchSnapshot();
-    expect(onCloseModal).toHaveBeenCalled();
-  });
+  // TODO: find a way to fire gesture event
+  // it('* modal component close on backDrop checks', () => {
+  //   const onCloseModal = jest.fn();
+  //   const modal = render(
+  //     <Modal
+  //       visible={true}
+  //       isBackDropAllowed={true}
+  //       identifier={MODAL_TEST_IDENTIFIER('1')}
+  //       onCloseModal={onCloseModal}>
+  //       <View><Text>Test1</Text></View>
+  //     </Modal>,
+  //   );
+  //   expect(modal).toMatchSnapshot();
+  //   fireEvent.press(modal.getByType(TouchableWithoutFeedback));
+  //   expect(modal).toMatchSnapshot();
+  //   expect(onCloseModal).toHaveBeenCalled();
+  // });
 
   it('* component styled with mappings', () => {
     const component = render(
diff --git a/src/framework/ui/modal/modal.spec.tsx.snap b/src/framework/ui/modal/modal.spec.tsx.snap
index f4b4b7552..ac4d5a65a 100644
--- a/src/framework/ui/modal/modal.spec.tsx.snap
+++ b/src/framework/ui/modal/modal.spec.tsx.snap
@@ -2,132 +2,119 @@
 
 exports[`@modal component checks * component styled with mappings 1`] = `
 <View
+  animationDuration={300}
+  appearance="default"
+  dispatch={[Function]}
+  pointerEvents="box-none"
   style={
     Object {
+      "bottom": 0,
+      "left": 0,
       "position": "absolute",
+      "right": 0,
+      "top": 0,
     }
   }
->
-  <View
-    animationDuration={300}
-    appearance="default"
-    dispatch={[Function]}
-    isBackDropAllowed={false}
-    style={
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "#3366FF",
-        "borderRadius": 3,
-        "borderWidth": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 8,
-      }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
     }
-    theme={
-      Object {
-        "blue-dark": "#2541CC",
-        "blue-primary": "#3366FF",
-        "gray-dark": "#8992A3",
-        "gray-highlight": "#EDF0F5",
-        "gray-light": "#DDE1EB",
-        "gray-primary": "#A6AEBD",
-        "pink-primary": "#FF3D71",
-      }
+  }
+  themedStyle={
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "#3366FF",
+      "borderRadius": 3,
+      "borderWidth": 1,
+      "paddingHorizontal": 16,
+      "paddingVertical": 8,
     }
-    visible={true}
+  }
+  visible={true}
+>
+  <Text
+    onCloseModal={[Function]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={Object {}}
   >
-    <Text
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
-    >
-      Test
-    </Text>
-  </View>
+    Test
+  </Text>
 </View>
 `;
 
 exports[`@modal component checks * modal closes on passed prop 1`] = `
 <View
+  animationDuration={300}
+  identifier="modal-test-identifier-1"
+  onCloseModal={[MockFunction]}
+  onResponderRelease={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onStartShouldSetResponderCapture={[Function]}
   style={
     Object {
+      "bottom": 0,
+      "left": 0,
       "position": "absolute",
+      "right": 0,
+      "top": 0,
     }
   }
+  visible={true}
 >
   <View
-    accessible={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
+    onCloseModal={[Function]}
     onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "bottom": 0,
-        "height": 1334,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "width": 750,
-      }
-    }
-  />
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    isBackDropAllowed={true}
-    onCloseModal={[MockFunction]}
     style={Object {}}
-    visible={true}
   >
+    <Text>
+      Test1
+    </Text>
     <View
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
+      accessibilityRole="button"
+      accessibilityStates={Array []}
+      accessible={true}
+      isTVSelectable={true}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
     >
-      <Text>
-        Test1
-      </Text>
       <View
-        accessibilityRole="button"
-        accessibilityStates={Array []}
-        accessible={true}
-        isTVSelectable={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "opacity": 1,
-          }
+          Array [
+            Object {},
+          ]
         }
       >
-        <View
+        <Text
           style={
             Array [
-              Object {},
+              Object {
+                "color": "#007AFF",
+                "fontSize": 18,
+                "padding": 8,
+                "textAlign": "center",
+              },
             ]
           }
         >
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#007AFF",
-                  "fontSize": 18,
-                  "padding": 8,
-                  "textAlign": "center",
-                },
-              ]
-            }
-          >
-            Close Modal
-          </Text>
-        </View>
+          Close Modal
+        </Text>
       </View>
     </View>
   </View>
@@ -136,240 +123,116 @@ exports[`@modal component checks * modal closes on passed prop 1`] = `
 
 exports[`@modal component checks * modal closes on passed prop 2`] = `
 <View
+  animationDuration={300}
+  identifier="modal-test-identifier-1"
+  onCloseModal={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          undefined,
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  onResponderRelease={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onStartShouldSetResponderCapture={[Function]}
   style={
     Object {
+      "bottom": 0,
+      "left": 0,
       "position": "absolute",
+      "right": 0,
+      "top": 0,
     }
   }
+  visible={true}
 >
   <View
-    accessible={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
+    onCloseModal={[Function]}
     onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "bottom": 0,
-        "height": 1334,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "width": 750,
-      }
-    }
-  />
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    isBackDropAllowed={true}
-    onCloseModal={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            undefined,
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
     style={Object {}}
-    visible={true}
   >
+    <Text>
+      Test1
+    </Text>
     <View
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
+      accessibilityRole="button"
+      accessibilityStates={Array []}
+      accessible={true}
+      isTVSelectable={true}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
     >
-      <Text>
-        Test1
-      </Text>
       <View
-        accessibilityRole="button"
-        accessibilityStates={Array []}
-        accessible={true}
-        isTVSelectable={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "opacity": 1,
-          }
+          Array [
+            Object {},
+          ]
         }
       >
-        <View
+        <Text
           style={
             Array [
-              Object {},
+              Object {
+                "color": "#007AFF",
+                "fontSize": 18,
+                "padding": 8,
+                "textAlign": "center",
+              },
             ]
           }
         >
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#007AFF",
-                  "fontSize": 18,
-                  "padding": 8,
-                  "textAlign": "center",
-                },
-              ]
-            }
-          >
-            Close Modal
-          </Text>
-        </View>
+          Close Modal
+        </Text>
       </View>
     </View>
   </View>
 </View>
 `;
 
-exports[`@modal component checks * modal component close on backDrop checks 1`] = `
-<View
-  style={
-    Object {
-      "position": "absolute",
-    }
-  }
->
-  <View
-    accessible={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "bottom": 0,
-        "height": 1334,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "width": 750,
-      }
-    }
-  />
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    isBackDropAllowed={true}
-    onCloseModal={[MockFunction]}
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
-    >
-      <Text>
-        Test1
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal component close on backDrop checks 2`] = `
-<View
-  style={
-    Object {
-      "position": "absolute",
-    }
-  }
->
-  <View
-    accessible={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "bottom": 0,
-        "height": 1334,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "width": 750,
-      }
-    }
-  />
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    isBackDropAllowed={true}
-    onCloseModal={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "modal-test-identifier-1",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
-    >
-      <Text>
-        Test1
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
 exports[`@modal component checks * modal component renders properly 1`] = `
 <View
+  animationDuration={300}
+  identifier="modal-test-identifier-1"
+  onCloseModal={[Function]}
+  pointerEvents="box-none"
   style={
     Object {
+      "bottom": 0,
+      "left": 0,
       "position": "absolute",
+      "right": 0,
+      "top": 0,
     }
   }
+  visible={true}
 >
   <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    isBackDropAllowed={false}
     onCloseModal={[Function]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={Object {}}
-    visible={true}
   >
-    <View
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
-    >
-      <Text>
-        Test1
-      </Text>
-    </View>
+    <Text>
+      Test1
+    </Text>
   </View>
 </View>
 `;
@@ -420,56 +283,37 @@ exports[`@modal component checks * with animations 1`] = `
     </View>
   </View>
   <View
+    animationDuration={500}
+    identifier="modal-test-identifier-1"
+    onCloseModal={[Function]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
     style={
       Object {
+        "bottom": 0,
+        "left": 0,
         "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "translateY": 1334,
+          },
+        ],
       }
     }
+    visible={true}
   >
     <View
-      accessible={true}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
+      onCloseModal={[Function]}
       onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "bottom": 0,
-          "height": 1334,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": 750,
-        }
-      }
-    />
-    <View
-      animationDuration={500}
-      identifier="modal-test-identifier-1"
-      isBackDropAllowed={true}
-      onCloseModal={[Function]}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateY": 1334,
-            },
-          ],
-        }
-      }
-      visible={true}
+      style={Object {}}
     >
-      <View
-        onCloseModal={[Function]}
-        pointerEvents="box-none"
-      >
-        <Text>
-          Test2
-        </Text>
-      </View>
+      <Text>
+        Test2
+      </Text>
     </View>
   </View>
   ,
@@ -520,52 +364,33 @@ exports[`@modal component checks * with animations 2`] = `
     </View>
   </View>
   <View
+    animationDuration={500}
+    identifier="modal-test-identifier-1"
+    onCloseModal={[Function]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
     style={
       Object {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
         "position": "absolute",
+        "right": 0,
+        "top": 0,
       }
     }
+    visible={true}
   >
     <View
-      accessible={true}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
+      onCloseModal={[Function]}
       onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "bottom": 0,
-          "height": 1334,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-          "width": 750,
-        }
-      }
-    />
-    <View
-      animationDuration={500}
-      identifier="modal-test-identifier-1"
-      isBackDropAllowed={true}
-      onCloseModal={[Function]}
-      style={
-        Object {
-          "opacity": 0,
-        }
-      }
-      visible={true}
+      style={Object {}}
     >
-      <View
-        onCloseModal={[Function]}
-        pointerEvents="box-none"
-      >
-        <Text>
-          Test2
-        </Text>
-      </View>
+      <Text>
+        Test2
+      </Text>
     </View>
   </View>
   ,
diff --git a/src/playground/src/ui/screen/dialog.component.tsx b/src/playground/src/ui/screen/dialog.component.tsx
index 5be73d5d1..bc0e570ca 100644
--- a/src/playground/src/ui/screen/dialog.component.tsx
+++ b/src/playground/src/ui/screen/dialog.component.tsx
@@ -31,7 +31,7 @@ class Dialog extends React.Component<Props> {
 
   private showModal = (): void => {
     const component = this.createModal();
-    this.modalId = ModalService.show(component, false);
+    this.modalId = ModalService.show(component, true);
   };
 
   private hideModal = () => {
@@ -71,7 +71,7 @@ class TestModal extends React.Component<ModalComponentCloseProps> {
 
   render() {
     return (
-      <View {...this.props} style={styles.outerModal}>
+      <View style={styles.outerModal}>
         <Text>This is Test Outer Modal</Text>
         <Button
           title='Open Inner Modal'
@@ -90,7 +90,7 @@ class InnerTestModal extends React.Component<ModalComponentCloseProps> {
 
   render(): React.ReactNode {
     return (
-      <View {...this.props} style={styles.innerModal}>
+      <View style={styles.innerModal}>
         <Text>This is Test Inner Modal</Text>
         <Button
           title='Close Modal'

From 7aa5bca1926e7a8676e8049d6b9d8d4a47503c76 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Mon, 4 Mar 2019 17:32:24 +0300
Subject: [PATCH 4/7] fix(ui): popover self-placement fix

---
 src/framework/ui/popover/popoverView.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/framework/ui/popover/popoverView.component.tsx b/src/framework/ui/popover/popoverView.component.tsx
index e8f1607a7..035a2b6ff 100644
--- a/src/framework/ui/popover/popoverView.component.tsx
+++ b/src/framework/ui/popover/popoverView.component.tsx
@@ -11,7 +11,6 @@ import {
   Placement,
   Placements,
 } from './type';
-import { number } from 'prop-types';
 
 interface PopoverViewProps {
   placement?: string | Placement;
@@ -115,6 +114,7 @@ export class PopoverView extends React.Component<Props> {
 const strictStyles = StyleSheet.create({
   container: {
     backgroundColor: 'transparent',
+    alignSelf: 'flex-start',
   },
   content: {
     justifyContent: 'center',

From 884f7a12e1c33b911bfbbb3bdcb2822cde664249 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Mon, 4 Mar 2019 19:48:04 +0300
Subject: [PATCH 5/7] fix(ui): popover self-placement fix

---
 .../component/modal/modalPanel.component.tsx  |   1 +
 src/framework/ui/modal/modal.component.tsx    |  57 +-
 src/framework/ui/modal/modal.spec.tsx         |  34 +-
 src/framework/ui/modal/modal.spec.tsx.snap    | 511 ++++++++++++------
 .../ui/popover/popover.component.tsx          |  51 +-
 .../src/ui/screen/dialog.component.tsx        |   2 +-
 .../src/ui/screen/popover.component.tsx       |   9 +-
 .../src/ui/screen/tooltip.component.tsx       |   9 +-
 8 files changed, 449 insertions(+), 225 deletions(-)

diff --git a/src/framework/theme/component/modal/modalPanel.component.tsx b/src/framework/theme/component/modal/modalPanel.component.tsx
index 787c2596a..9a14b0a8a 100644
--- a/src/framework/theme/component/modal/modalPanel.component.tsx
+++ b/src/framework/theme/component/modal/modalPanel.component.tsx
@@ -79,6 +79,7 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
     const closeOnBackdrop: boolean = this.state.backdropValues.get(identifier);
     return (
       <Modal
+        {...modal.props}
         visible={true}
         isBackDropAllowed={closeOnBackdrop}
         key={index}
diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx
index 5e70cfafc..f861b4012 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import {
+  View,
   ViewProps,
-  TouchableWithoutFeedbackProps,
   StyleSheet,
   Dimensions,
   Animated,
+  TouchableOpacity,
+  TouchableOpacityProps,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -104,17 +106,17 @@ export class Modal extends React.Component<Props> {
 
   private onStartShouldSetResponder = (): boolean => true;
 
+  private onResponderRelease = (): void => { return; };
+
   private onStartShouldSetResponderCapture = (): boolean => false;
 
   private renderComponentChild = (source: React.ReactElement<any>): React.ReactElement<any> => {
     return React.cloneElement(source, {
       ...source.props,
       onCloseModal: this.closeModal,
-      onStartShouldSetResponder: () => true,
-      onResponderRelease: () => {},
       style: {
         ...source.props.style,
-        ...(this.props.style as object),
+        ...StyleSheet.flatten(this.props.style),
       },
     });
   };
@@ -123,7 +125,25 @@ export class Modal extends React.Component<Props> {
     return React.Children.map(source, this.renderComponentChild);
   };
 
-  private renderComponent = (): React.ReactElement<ViewProps> => {
+  private renderWithBackDrop = (component: React.ReactElement<ViewProps>) => (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={this.closeOnBackdrop}
+      activeOpacity={1}>
+      {component}
+    </TouchableOpacity>
+  );
+
+  private renderWithoutBackDrop = (component: React.ReactElement<ViewProps>) => (
+    <View style={styles.notVisibleWrapper}>
+      <View
+        style={styles.container}
+        pointerEvents='none'/>
+      {component}
+    </View>
+  );
+
+  private renderComponent = (): React.ReactElement<TouchableOpacityProps | ViewProps> => {
     const { animationType, children, isBackDropAllowed, ...derivedProps } = this.props;
     const animationStyle: StyleType = this.getAnimationStyle(animationType);
     const componentChildren: React.ReactElement<any>[] = this.renderComponentChildren(children);
@@ -131,23 +151,19 @@ export class Modal extends React.Component<Props> {
     const dialog: React.ReactElement<ViewProps> =
       <Animated.View
         {...derivedProps}
-        style={[styles.container, animationStyle]}>
+        style={animationStyle}
+        onStartShouldSetResponder={this.onStartShouldSetResponder}
+        onResponderRelease={this.onResponderRelease}
+        onStartShouldSetResponderCapture={this.onStartShouldSetResponderCapture}
+        pointerEvents='box-none'>
         {componentChildren}
       </Animated.View>;
-    return isBackDropAllowed ? (
-      React.cloneElement(dialog, {
-        onStartShouldSetResponder: this.onStartShouldSetResponder,
-        onResponderRelease: this.closeOnBackdrop,
-        onStartShouldSetResponderCapture: this.onStartShouldSetResponderCapture,
-      })
-    ) : (
-      React.cloneElement(dialog, {
-        pointerEvents: 'box-none',
-      })
-    );
+
+    return isBackDropAllowed ?
+      this.renderWithBackDrop(dialog) : this.renderWithoutBackDrop(dialog);
   };
 
-  public render(): React.ReactElement<ViewProps | TouchableWithoutFeedbackProps> {
+  public render(): React.ReactElement<ViewProps | TouchableOpacityProps> | null {
     return this.props.visible ? this.renderComponent() : null;
   }
 }
@@ -156,4 +172,9 @@ const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
   },
+  notVisibleWrapper: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
 });
diff --git a/src/framework/ui/modal/modal.spec.tsx b/src/framework/ui/modal/modal.spec.tsx
index 9e1365d5e..5f32078dc 100644
--- a/src/framework/ui/modal/modal.spec.tsx
+++ b/src/framework/ui/modal/modal.spec.tsx
@@ -7,6 +7,7 @@ import {
   View,
   Text,
   Button,
+  TouchableOpacity,
 } from 'react-native';
 import {
   Modal,
@@ -142,23 +143,22 @@ describe('@modal component checks', () => {
     expect(modal).toMatchSnapshot();
   });
 
-  // TODO: find a way to fire gesture event
-  // it('* modal component close on backDrop checks', () => {
-  //   const onCloseModal = jest.fn();
-  //   const modal = render(
-  //     <Modal
-  //       visible={true}
-  //       isBackDropAllowed={true}
-  //       identifier={MODAL_TEST_IDENTIFIER('1')}
-  //       onCloseModal={onCloseModal}>
-  //       <View><Text>Test1</Text></View>
-  //     </Modal>,
-  //   );
-  //   expect(modal).toMatchSnapshot();
-  //   fireEvent.press(modal.getByType(TouchableWithoutFeedback));
-  //   expect(modal).toMatchSnapshot();
-  //   expect(onCloseModal).toHaveBeenCalled();
-  // });
+  it('* modal component close on backDrop checks', () => {
+    const onCloseModal = jest.fn();
+    const modal = render(
+      <Modal
+        visible={true}
+        isBackDropAllowed={true}
+        identifier={MODAL_TEST_IDENTIFIER('1')}
+        onCloseModal={onCloseModal}>
+        <View><Text>Test1</Text></View>
+      </Modal>,
+    );
+    expect(modal).toMatchSnapshot();
+    fireEvent.press(modal.getByType(TouchableOpacity));
+    expect(modal).toMatchSnapshot();
+    expect(onCloseModal).toHaveBeenCalled();
+  });
 
   it('* component styled with mappings', () => {
     const component = render(
diff --git a/src/framework/ui/modal/modal.spec.tsx.snap b/src/framework/ui/modal/modal.spec.tsx.snap
index ac4d5a65a..4231871e7 100644
--- a/src/framework/ui/modal/modal.spec.tsx.snap
+++ b/src/framework/ui/modal/modal.spec.tsx.snap
@@ -2,119 +2,163 @@
 
 exports[`@modal component checks * component styled with mappings 1`] = `
 <View
-  animationDuration={300}
-  appearance="default"
-  dispatch={[Function]}
-  pointerEvents="box-none"
   style={
     Object {
-      "bottom": 0,
-      "left": 0,
+      "height": 0,
       "position": "absolute",
-      "right": 0,
-      "top": 0,
+      "width": 0,
     }
   }
-  theme={
-    Object {
-      "blue-dark": "#2541CC",
-      "blue-primary": "#3366FF",
-      "gray-dark": "#8992A3",
-      "gray-highlight": "#EDF0F5",
-      "gray-light": "#DDE1EB",
-      "gray-primary": "#A6AEBD",
-      "pink-primary": "#FF3D71",
+>
+  <View
+    animationDuration={300}
+    appearance="default"
+    dispatch={[Function]}
+    pointerEvents="none"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
     }
-  }
-  themedStyle={
-    Object {
-      "backgroundColor": "transparent",
-      "borderColor": "#3366FF",
-      "borderRadius": 3,
-      "borderWidth": 1,
-      "paddingHorizontal": 16,
-      "paddingVertical": 8,
+    theme={
+      Object {
+        "blue-dark": "#2541CC",
+        "blue-primary": "#3366FF",
+        "gray-dark": "#8992A3",
+        "gray-highlight": "#EDF0F5",
+        "gray-light": "#DDE1EB",
+        "gray-primary": "#A6AEBD",
+        "pink-primary": "#FF3D71",
+      }
     }
-  }
-  visible={true}
->
-  <Text
-    onCloseModal={[Function]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
+    themedStyle={
+      Object {
+        "backgroundColor": "transparent",
+        "borderColor": "#3366FF",
+        "borderRadius": 3,
+        "borderWidth": 1,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      }
+    }
+    visible={true}
+  />
+  <View
+    animationDuration={300}
+    appearance="default"
+    dispatch={[Function]}
     style={Object {}}
+    theme={
+      Object {
+        "blue-dark": "#2541CC",
+        "blue-primary": "#3366FF",
+        "gray-dark": "#8992A3",
+        "gray-highlight": "#EDF0F5",
+        "gray-light": "#DDE1EB",
+        "gray-primary": "#A6AEBD",
+        "pink-primary": "#FF3D71",
+      }
+    }
+    themedStyle={
+      Object {
+        "backgroundColor": "transparent",
+        "borderColor": "#3366FF",
+        "borderRadius": 3,
+        "borderWidth": 1,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      }
+    }
+    visible={true}
   >
-    Test
-  </Text>
+    <Text
+      onCloseModal={[Function]}
+      style={Object {}}
+    >
+      Test
+    </Text>
+  </View>
 </View>
 `;
 
 exports[`@modal component checks * modal closes on passed prop 1`] = `
 <View
-  animationDuration={300}
-  identifier="modal-test-identifier-1"
-  onCloseModal={[MockFunction]}
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
   onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onStartShouldSetResponderCapture={[Function]}
   style={
     Object {
       "bottom": 0,
       "left": 0,
+      "opacity": 1,
       "position": "absolute",
       "right": 0,
       "top": 0,
     }
   }
-  visible={true}
 >
   <View
-    onCloseModal={[Function]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
+    animationDuration={300}
+    identifier="modal-test-identifier-1"
+    onCloseModal={[MockFunction]}
     style={Object {}}
+    visible={true}
   >
-    <Text>
-      Test1
-    </Text>
     <View
-      accessibilityRole="button"
-      accessibilityStates={Array []}
-      accessible={true}
-      isTVSelectable={true}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
+      onCloseModal={[Function]}
+      style={Object {}}
     >
+      <Text>
+        Test1
+      </Text>
       <View
+        accessibilityRole="button"
+        accessibilityStates={Array []}
+        accessible={true}
+        isTVSelectable={true}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          Array [
-            Object {},
-          ]
+          Object {
+            "opacity": 1,
+          }
         }
       >
-        <Text
+        <View
           style={
             Array [
-              Object {
-                "color": "#007AFF",
-                "fontSize": 18,
-                "padding": 8,
-                "textAlign": "center",
-              },
+              Object {},
             ]
           }
         >
-          Close Modal
-        </Text>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#007AFF",
+                  "fontSize": 18,
+                  "padding": 8,
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            Close Modal
+          </Text>
+        </View>
       </View>
     </View>
   </View>
@@ -123,116 +167,233 @@ exports[`@modal component checks * modal closes on passed prop 1`] = `
 
 exports[`@modal component checks * modal closes on passed prop 2`] = `
 <View
-  animationDuration={300}
-  identifier="modal-test-identifier-1"
-  onCloseModal={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          undefined,
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
   onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  onStartShouldSetResponderCapture={[Function]}
   style={
     Object {
       "bottom": 0,
       "left": 0,
+      "opacity": 1,
       "position": "absolute",
       "right": 0,
       "top": 0,
     }
   }
-  visible={true}
 >
   <View
-    onCloseModal={[Function]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
+    animationDuration={300}
+    identifier="modal-test-identifier-1"
+    onCloseModal={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            undefined,
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
     style={Object {}}
+    visible={true}
   >
-    <Text>
-      Test1
-    </Text>
     <View
-      accessibilityRole="button"
-      accessibilityStates={Array []}
-      accessible={true}
-      isTVSelectable={true}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
+      onCloseModal={[Function]}
+      style={Object {}}
     >
+      <Text>
+        Test1
+      </Text>
       <View
+        accessibilityRole="button"
+        accessibilityStates={Array []}
+        accessible={true}
+        isTVSelectable={true}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          Array [
-            Object {},
-          ]
+          Object {
+            "opacity": 1,
+          }
         }
       >
-        <Text
+        <View
           style={
             Array [
-              Object {
-                "color": "#007AFF",
-                "fontSize": 18,
-                "padding": 8,
-                "textAlign": "center",
-              },
+              Object {},
             ]
           }
         >
-          Close Modal
-        </Text>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#007AFF",
+                  "fontSize": 18,
+                  "padding": 8,
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            Close Modal
+          </Text>
+        </View>
       </View>
     </View>
   </View>
 </View>
 `;
 
-exports[`@modal component checks * modal component renders properly 1`] = `
+exports[`@modal component checks * modal component close on backDrop checks 1`] = `
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "bottom": 0,
+      "left": 0,
+      "opacity": 1,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
+  }
+>
+  <View
+    animationDuration={300}
+    identifier="modal-test-identifier-1"
+    onCloseModal={[MockFunction]}
+    style={Object {}}
+    visible={true}
+  >
+    <View
+      onCloseModal={[Function]}
+      style={Object {}}
+    >
+      <Text>
+        Test1
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`@modal component checks * modal component close on backDrop checks 2`] = `
 <View
-  animationDuration={300}
-  identifier="modal-test-identifier-1"
-  onCloseModal={[Function]}
-  pointerEvents="box-none"
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     Object {
       "bottom": 0,
       "left": 0,
+      "opacity": 1,
       "position": "absolute",
       "right": 0,
       "top": 0,
     }
   }
-  visible={true}
 >
   <View
+    animationDuration={300}
+    identifier="modal-test-identifier-1"
+    onCloseModal={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "modal-test-identifier-1",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    style={Object {}}
+    visible={true}
+  >
+    <View
+      onCloseModal={[Function]}
+      style={Object {}}
+    >
+      <Text>
+        Test1
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`@modal component checks * modal component renders properly 1`] = `
+<View
+  style={
+    Object {
+      "height": 0,
+      "position": "absolute",
+      "width": 0,
+    }
+  }
+>
+  <View
+    animationDuration={300}
+    identifier="modal-test-identifier-1"
+    onCloseModal={[Function]}
+    pointerEvents="none"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    visible={true}
+  />
+  <View
+    animationDuration={300}
+    identifier="modal-test-identifier-1"
     onCloseModal={[Function]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={Object {}}
+    visible={true}
   >
-    <Text>
-      Test1
-    </Text>
+    <View
+      onCloseModal={[Function]}
+      style={Object {}}
+    >
+      <Text>
+        Test1
+      </Text>
+    </View>
   </View>
 </View>
 `;
@@ -283,37 +444,48 @@ exports[`@modal component checks * with animations 1`] = `
     </View>
   </View>
   <View
-    animationDuration={500}
-    identifier="modal-test-identifier-1"
-    onCloseModal={[Function]}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
     onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
     style={
       Object {
         "bottom": 0,
         "left": 0,
+        "opacity": 1,
         "position": "absolute",
         "right": 0,
         "top": 0,
-        "transform": Array [
-          Object {
-            "translateY": 1334,
-          },
-        ],
       }
     }
-    visible={true}
   >
     <View
+      animationDuration={500}
+      identifier="modal-test-identifier-1"
       onCloseModal={[Function]}
-      onResponderRelease={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "translateY": 1334,
+            },
+          ],
+        }
+      }
+      visible={true}
     >
-      <Text>
-        Test2
-      </Text>
+      <View
+        onCloseModal={[Function]}
+        style={Object {}}
+      >
+        <Text>
+          Test2
+        </Text>
+      </View>
     </View>
   </View>
   ,
@@ -364,33 +536,44 @@ exports[`@modal component checks * with animations 2`] = `
     </View>
   </View>
   <View
-    animationDuration={500}
-    identifier="modal-test-identifier-1"
-    onCloseModal={[Function]}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
     onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
     style={
       Object {
         "bottom": 0,
         "left": 0,
-        "opacity": 0,
+        "opacity": 1,
         "position": "absolute",
         "right": 0,
         "top": 0,
       }
     }
-    visible={true}
   >
     <View
+      animationDuration={500}
+      identifier="modal-test-identifier-1"
       onCloseModal={[Function]}
-      onResponderRelease={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "opacity": 0,
+        }
+      }
+      visible={true}
     >
-      <Text>
-        Test2
-      </Text>
+      <View
+        onCloseModal={[Function]}
+        style={Object {}}
+      >
+        <Text>
+          Test2
+        </Text>
+      </View>
     </View>
   </View>
   ,
diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
index 0ad011d2e..ef53af227 100644
--- a/src/framework/ui/popover/popover.component.tsx
+++ b/src/framework/ui/popover/popover.component.tsx
@@ -7,6 +7,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import {
+  ModalComponentCloseProps,
   ModalService,
   StyledComponentProps,
   StyleType,
@@ -41,7 +42,7 @@ interface State {
   layout: MeasureResult | undefined;
 }
 
-export type Props = PopoverProps & StyledComponentProps & PopoverViewProps & ViewProps;
+export type Props = PopoverProps & ModalComponentCloseProps & StyledComponentProps & PopoverViewProps & ViewProps;
 
 const TAG_CHILD: number = 0;
 const TAG_CONTENT: number = 1;
@@ -59,6 +60,7 @@ export class Popover extends React.Component<Props, State> {
   };
 
   private containerRef: React.RefObject<MeasuredNode> = React.createRef();
+  private componentId: string = '';
 
   public shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     const isLayoutChanged: boolean = nextState.layout !== undefined;
@@ -67,27 +69,38 @@ export class Popover extends React.Component<Props, State> {
     return isLayoutChanged || isVisibilityChanged;
   }
 
-  public componentDidUpdate(prevProps: Props, prevState: State) {
-    const { visible, placement } = this.props;
-
-    if (visible) {
-      const { origin: popoverPosition } = this.getPopoverFrame(placement);
-      const style: FlexStyle = {
-        left: popoverPosition.x,
-        top: popoverPosition.y,
-      };
-
-      const { current: container } = this.containerRef;
-
-      // Retrieve `content` from popover children
-      // and clone it with measured position
-      const { [TAG_CONTENT]: popoverView } = container.props.children;
-      const popover: React.ReactElement<any> = React.cloneElement(popoverView, { style });
-
-      ModalService.show(popover, true);
+  public componentDidUpdate(prevProps: Props, prevState: State): void {
+    const { visible, placement, onRequestClose } = this.props;
+
+    if (prevProps.visible !== visible) {
+      if (visible) {
+        const { origin: popoverPosition } = this.getPopoverFrame(placement);
+        const style: FlexStyle = {
+          left: popoverPosition.x,
+          top: popoverPosition.y,
+        };
+
+        const { current: container } = this.containerRef;
+
+        // Retrieve `content` from popover children
+        // and clone it with measured position
+        const { [TAG_CONTENT]: popoverView } = container.props.children;
+        const popover: React.ReactElement<ModalComponentCloseProps> =
+          React.cloneElement(popoverView, {
+            style: style,
+            onRequestClose: onRequestClose,
+          });
+        this.componentId = ModalService.show(popover, true);
+      } else {
+        ModalService.hide(this.componentId);
+      }
     }
   }
 
+  public componentWillUnmount(): void {
+    this.componentId = '';
+  }
+
   private getComponentStyle = (source: StyleType): StyleType => {
     return {
       child: {},
diff --git a/src/playground/src/ui/screen/dialog.component.tsx b/src/playground/src/ui/screen/dialog.component.tsx
index bc0e570ca..f144e4502 100644
--- a/src/playground/src/ui/screen/dialog.component.tsx
+++ b/src/playground/src/ui/screen/dialog.component.tsx
@@ -31,7 +31,7 @@ class Dialog extends React.Component<Props> {
 
   private showModal = (): void => {
     const component = this.createModal();
-    this.modalId = ModalService.show(component, true);
+    this.modalId = ModalService.show(component, false);
   };
 
   private hideModal = () => {
diff --git a/src/playground/src/ui/screen/popover.component.tsx b/src/playground/src/ui/screen/popover.component.tsx
index 536089404..c5eb1b610 100644
--- a/src/playground/src/ui/screen/popover.component.tsx
+++ b/src/playground/src/ui/screen/popover.component.tsx
@@ -73,7 +73,8 @@ class Popover extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT} start`}
             visible={this.state.startVisible}
-            content={this.createPopoverContentElement('❤️')}>
+            content={this.createPopoverContentElement('❤️')}
+            onRequestClose={this.onStartPress}>
             <TouchableOpacity
               style={tip}
               onPress={this.onStartPress}>
@@ -86,7 +87,8 @@ class Popover extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT}`}
             visible={this.state.centerVisible}
-            content={this.createPopoverContentElement('💛️')}>
+            content={this.createPopoverContentElement('💛️')}
+            onRequestClose={this.onCenterPress}>
             <TouchableOpacity
               style={tip}
               onPress={this.onCenterPress}>
@@ -99,7 +101,8 @@ class Popover extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT} end`}
             visible={this.state.endVisible}
-            content={this.createPopoverContentElement('💚')}>
+            content={this.createPopoverContentElement('💚')}
+            onRequestClose={this.onEndPress}>
             <TouchableOpacity
               style={tip}
               onPress={this.onEndPress}>
diff --git a/src/playground/src/ui/screen/tooltip.component.tsx b/src/playground/src/ui/screen/tooltip.component.tsx
index afd2ef1aa..e29c08156 100644
--- a/src/playground/src/ui/screen/tooltip.component.tsx
+++ b/src/playground/src/ui/screen/tooltip.component.tsx
@@ -62,7 +62,8 @@ class Tooltip extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT} start`}
             visible={this.state.startVisible}
-            text='❤️'>
+            text='❤️'
+            onRequestClose={this.onStartPress}>
             <TouchableOpacity
               style={tip}
               onPress={this.onStartPress}>
@@ -75,7 +76,8 @@ class Tooltip extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT}`}
             visible={this.state.centerVisible}
-            text='💛️'>
+            text='💛️'
+            onRequestClose={this.onCenterPress}>
             <TouchableOpacity
               style={tip}
               onPress={this.onCenterPress}>
@@ -88,7 +90,8 @@ class Tooltip extends React.Component<Props, State> {
             style={component}
             placement={`${PLACEMENT} end`}
             visible={this.state.endVisible}
-            text='💚'>
+            text='💚'
+            onRequestClose={this.onEndPress}>
             <TouchableOpacity
               style={tip}
               onPress={this.onEndPress}>

From 30996443db0c8b4ce1f2a413388488642e5fe701 Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Tue, 5 Mar 2019 16:24:19 +0300
Subject: [PATCH 6/7] teat(ui): modal tests update

---
 .../theme/component/modal/modalPanel.spec.tsx |  29 ++-
 .../component/modal/modalPanel.spec.tsx.snap  | 223 +++++++++++++++++-
 src/framework/ui/modal/modal.spec.tsx.snap    |  61 ++---
 3 files changed, 278 insertions(+), 35 deletions(-)

diff --git a/src/framework/theme/component/modal/modalPanel.spec.tsx b/src/framework/theme/component/modal/modalPanel.spec.tsx
index 275e241d9..2ad766118 100644
--- a/src/framework/theme/component/modal/modalPanel.spec.tsx
+++ b/src/framework/theme/component/modal/modalPanel.spec.tsx
@@ -19,7 +19,8 @@ jest.useFakeTimers();
 describe('@modal panel checks', () => {
 
   const showModalTestId: string = '@modal/show';
-  const hideModalTestId: string = '@modal/hide';
+  const hideModalTestIdInner: string = '@modal/hide-inner';
+  const hideModalTestIdOuter: string = '@modal/hide-outer';
 
   interface HooksProps {
     componentDidMount?: () => void;
@@ -28,6 +29,8 @@ describe('@modal panel checks', () => {
 
   class ModalPanelTest extends React.Component<HooksProps> {
 
+    private modalId: string = '';
+
     componentDidMount(): void {
       this.props.componentDidMount && this.props.componentDidMount();
     }
@@ -37,7 +40,11 @@ describe('@modal panel checks', () => {
     }
 
     showModal() {
-      ModalService.show(<TestModal onRequestClose={() => 1}/>, true);
+      this.modalId = ModalService.show(<TestModal onRequestClose={() => 1}/>, true);
+    }
+
+    hideModal() {
+      ModalService.hide(this.modalId);
     }
 
     render() {
@@ -51,6 +58,11 @@ describe('@modal panel checks', () => {
             onPress={() => this.showModal()}
             testID={showModalTestId}
           />
+          <Button
+            title='Hide Modal'
+            onPress={() => this.hideModal()}
+            testID={hideModalTestIdOuter}
+          />
         </ModalPanel>
       );
     }
@@ -65,7 +77,7 @@ describe('@modal panel checks', () => {
           <Button
             title='Close Modal'
             onPress={this.props.onCloseModal}
-            testID={hideModalTestId}
+            testID={hideModalTestIdInner}
           />
         </View>
       );
@@ -101,10 +113,17 @@ describe('@modal panel checks', () => {
     expect(componentWillUnmount).toHaveBeenCalled();
   });
 
-  it('* close modal checking', () => {
+  it('* close modal checking inner', () => {
+    const application = render(<ModalPanelTest/>);
+    fireEvent.press(application.getByTestId(showModalTestId));
+    fireEvent.press(application.getByTestId(hideModalTestIdInner));
+    expect(application).toMatchSnapshot();
+  });
+
+  it('* close modal checking outer', () => {
     const application = render(<ModalPanelTest/>);
     fireEvent.press(application.getByTestId(showModalTestId));
-    fireEvent.press(application.getByTestId(hideModalTestId));
+    fireEvent.press(application.getByTestId(hideModalTestIdOuter));
     expect(application).toMatchSnapshot();
   });
 
diff --git a/src/framework/theme/component/modal/modalPanel.spec.tsx.snap b/src/framework/theme/component/modal/modalPanel.spec.tsx.snap
index 7994f3a8b..170c5354f 100644
--- a/src/framework/theme/component/modal/modalPanel.spec.tsx.snap
+++ b/src/framework/theme/component/modal/modalPanel.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`@modal panel checks * close modal checking 1`] = `
+exports[`@modal panel checks * close modal checking inner 1`] = `
 <View
   style={
     Object {
@@ -54,6 +54,145 @@ exports[`@modal panel checks * close modal checking 1`] = `
       </Text>
     </View>
   </View>
+  <View
+    accessibilityRole="button"
+    accessibilityStates={Array []}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="@modal/hide-outer"
+  >
+    <View
+      style={
+        Array [
+          Object {},
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#007AFF",
+              "fontSize": 18,
+              "padding": 8,
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Hide Modal
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`@modal panel checks * close modal checking outer 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View>
+    <Text>
+      Modal Panel Test
+    </Text>
+  </View>
+  <View
+    accessibilityRole="button"
+    accessibilityStates={Array []}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="@modal/show"
+  >
+    <View
+      style={
+        Array [
+          Object {},
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#007AFF",
+              "fontSize": 18,
+              "padding": 8,
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Open Modal
+      </Text>
+    </View>
+  </View>
+  <View
+    accessibilityRole="button"
+    accessibilityStates={Array []}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="@modal/hide-outer"
+  >
+    <View
+      style={
+        Array [
+          Object {},
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#007AFF",
+              "fontSize": 18,
+              "padding": 8,
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Hide Modal
+      </Text>
+    </View>
+  </View>
 </View>
 `;
 
@@ -111,6 +250,47 @@ exports[`@modal panel checks * modal panel render with props / children checking
       </Text>
     </View>
   </View>
+  <View
+    accessibilityRole="button"
+    accessibilityStates={Array []}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="@modal/hide-outer"
+  >
+    <View
+      style={
+        Array [
+          Object {},
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#007AFF",
+              "fontSize": 18,
+              "padding": 8,
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Hide Modal
+      </Text>
+    </View>
+  </View>
 </View>
 `;
 
@@ -168,5 +348,46 @@ exports[`@modal panel checks * modal panel renders properly 1`] = `
       </Text>
     </View>
   </View>
+  <View
+    accessibilityRole="button"
+    accessibilityStates={Array []}
+    accessible={true}
+    isTVSelectable={true}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="@modal/hide-outer"
+  >
+    <View
+      style={
+        Array [
+          Object {},
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#007AFF",
+              "fontSize": 18,
+              "padding": 8,
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Hide Modal
+      </Text>
+    </View>
+  </View>
 </View>
 `;
diff --git a/src/framework/ui/modal/modal.spec.tsx.snap b/src/framework/ui/modal/modal.spec.tsx.snap
index 4231871e7..b342cb5e6 100644
--- a/src/framework/ui/modal/modal.spec.tsx.snap
+++ b/src/framework/ui/modal/modal.spec.tsx.snap
@@ -11,9 +11,6 @@ exports[`@modal component checks * component styled with mappings 1`] = `
   }
 >
   <View
-    animationDuration={300}
-    appearance="default"
-    dispatch={[Function]}
     pointerEvents="none"
     style={
       Object {
@@ -24,33 +21,15 @@ exports[`@modal component checks * component styled with mappings 1`] = `
         "top": 0,
       }
     }
-    theme={
-      Object {
-        "blue-dark": "#2541CC",
-        "blue-primary": "#3366FF",
-        "gray-dark": "#8992A3",
-        "gray-highlight": "#EDF0F5",
-        "gray-light": "#DDE1EB",
-        "gray-primary": "#A6AEBD",
-        "pink-primary": "#FF3D71",
-      }
-    }
-    themedStyle={
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "#3366FF",
-        "borderRadius": 3,
-        "borderWidth": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 8,
-      }
-    }
-    visible={true}
   />
   <View
     animationDuration={300}
     appearance="default"
     dispatch={[Function]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="box-none"
     style={Object {}}
     theme={
       Object {
@@ -110,6 +89,10 @@ exports[`@modal component checks * modal closes on passed prop 1`] = `
     animationDuration={300}
     identifier="modal-test-identifier-1"
     onCloseModal={[MockFunction]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="box-none"
     style={Object {}}
     visible={true}
   >
@@ -204,6 +187,10 @@ exports[`@modal component checks * modal closes on passed prop 2`] = `
         ],
       }
     }
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="box-none"
     style={Object {}}
     visible={true}
   >
@@ -284,6 +271,10 @@ exports[`@modal component checks * modal component close on backDrop checks 1`]
     animationDuration={300}
     identifier="modal-test-identifier-1"
     onCloseModal={[MockFunction]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="box-none"
     style={Object {}}
     visible={true}
   >
@@ -338,6 +329,10 @@ exports[`@modal component checks * modal component close on backDrop checks 2`]
         ],
       }
     }
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="box-none"
     style={Object {}}
     visible={true}
   >
@@ -364,9 +359,6 @@ exports[`@modal component checks * modal component renders properly 1`] = `
   }
 >
   <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    onCloseModal={[Function]}
     pointerEvents="none"
     style={
       Object {
@@ -377,12 +369,15 @@ exports[`@modal component checks * modal component renders properly 1`] = `
         "top": 0,
       }
     }
-    visible={true}
   />
   <View
     animationDuration={300}
     identifier="modal-test-identifier-1"
     onCloseModal={[Function]}
+    onResponderRelease={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    pointerEvents="box-none"
     style={Object {}}
     visible={true}
   >
@@ -467,6 +462,10 @@ exports[`@modal component checks * with animations 1`] = `
       animationDuration={500}
       identifier="modal-test-identifier-1"
       onCloseModal={[Function]}
+      onResponderRelease={[Function]}
+      onStartShouldSetResponder={[Function]}
+      onStartShouldSetResponderCapture={[Function]}
+      pointerEvents="box-none"
       style={
         Object {
           "transform": Array [
@@ -559,6 +558,10 @@ exports[`@modal component checks * with animations 2`] = `
       animationDuration={500}
       identifier="modal-test-identifier-1"
       onCloseModal={[Function]}
+      onResponderRelease={[Function]}
+      onStartShouldSetResponder={[Function]}
+      onStartShouldSetResponderCapture={[Function]}
+      pointerEvents="box-none"
       style={
         Object {
           "opacity": 0,

From e86741e8ce3f3a76346f313a7c5808dbe6a52acb Mon Sep 17 00:00:00 2001
From: Yauhen Penkin <e.penkin@akveo.com>
Date: Thu, 7 Mar 2019 16:11:43 +0300
Subject: [PATCH 7/7] refactor(ui): code style refactor

---
 .../component/modal/modalPanel.component.tsx  |  37 +-
 .../theme/component/modal/modalPanel.spec.tsx |  18 +-
 src/framework/ui/modal/modal.spec.tsx.snap    | 584 ------------------
 3 files changed, 29 insertions(+), 610 deletions(-)
 delete mode 100644 src/framework/ui/modal/modal.spec.tsx.snap

diff --git a/src/framework/theme/component/modal/modalPanel.component.tsx b/src/framework/theme/component/modal/modalPanel.component.tsx
index 9a14b0a8a..54a559a13 100644
--- a/src/framework/theme/component/modal/modalPanel.component.tsx
+++ b/src/framework/theme/component/modal/modalPanel.component.tsx
@@ -16,15 +16,15 @@ export interface ModalPanelProps {
 }
 
 interface ModalPanelState {
-  dialogComponents: Map<string, React.ReactElement<ModalComponentCloseProps>>;
-  backdropValues: Map<string, boolean>;
+  components: Map<string, React.ReactElement<ModalComponentCloseProps>>;
+  backdrops: Map<string, boolean>;
 }
 
 export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState> implements ModalPresenting {
 
   public state: ModalPanelState = {
-    dialogComponents: new Map(),
-    backdropValues: new Map(),
+    components: new Map(),
+    backdrops: new Map(),
   };
 
   public componentDidMount(): void {
@@ -36,30 +36,29 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
   }
 
   public hide = (identifier: string): void => {
-    const component: React.ReactElement<ModalComponentCloseProps> = this.state.dialogComponents
+    const component: React.ReactElement<ModalComponentCloseProps> = this.state.components
       .get(identifier);
     if (component) {
       component.props.onRequestClose && component.props.onRequestClose();
     }
-    const components: Map<string, React.ReactElement<any>> = this.state.dialogComponents;
+    const components: Map<string, React.ReactElement<any>> = this.state.components;
     components.delete(identifier);
-    const backdrops: Map<string, boolean> = this.state.backdropValues;
+    const backdrops: Map<string, boolean> = this.state.backdrops;
     backdrops.delete(identifier);
     this.setState({
-      dialogComponents: components,
-      backdropValues: backdrops,
+      components: components,
+      backdrops: backdrops,
     });
   };
 
   public show(dialogComponent: React.ReactElement<any>, closeOnBackDrop: boolean): string {
     const key: string = this.generateUniqueComponentKey();
-    const componentsMap: Map<string, React.ReactElement<any>> = this.state.dialogComponents
+    const componentsMap: Map<string, React.ReactElement<any>> = this.state.components
       .set(key, dialogComponent);
-    const backdrops: Map<string, boolean> = this.state.backdropValues
-      .set(key, closeOnBackDrop);
+    const backdrops: Map<string, boolean> = this.state.backdrops.set(key, closeOnBackDrop);
     this.setState({
-      dialogComponents: componentsMap,
-      backdropValues: backdrops,
+      components: componentsMap,
+      backdrops: backdrops,
     });
     return key;
   }
@@ -69,14 +68,14 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
   };
 
   private areThereAnyComponents(): boolean {
-    return this.state.dialogComponents && this.state.dialogComponents.size !== 0;
+    return this.state.components && this.state.components.size !== 0;
   }
 
   private renderModal(modal: React.ReactElement<any>, index: number) {
-    const allModalKeys: string[] = Array.from(this.state.dialogComponents.keys());
+    const allModalKeys: string[] = Array.from(this.state.components.keys());
     const identifier: string = allModalKeys
-      .find(item => this.state.dialogComponents.get(item) === modal);
-    const closeOnBackdrop: boolean = this.state.backdropValues.get(identifier);
+      .find(item => this.state.components.get(item) === modal);
+    const closeOnBackdrop: boolean = this.state.backdrops.get(identifier);
     return (
       <Modal
         {...modal.props}
@@ -92,7 +91,7 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
   }
 
   private renderModals() {
-    return Array.from(this.state.dialogComponents.values())
+    return Array.from(this.state.components.values())
       .map((component: React.ReactElement<any>, i: number) =>
         this.renderModal(component, i));
   }
diff --git a/src/framework/theme/component/modal/modalPanel.spec.tsx b/src/framework/theme/component/modal/modalPanel.spec.tsx
index 2ad766118..360565b38 100644
--- a/src/framework/theme/component/modal/modalPanel.spec.tsx
+++ b/src/framework/theme/component/modal/modalPanel.spec.tsx
@@ -31,23 +31,27 @@ describe('@modal panel checks', () => {
 
     private modalId: string = '';
 
-    componentDidMount(): void {
-      this.props.componentDidMount && this.props.componentDidMount();
+    public componentDidMount(): void {
+      if (this.props.componentDidMount) {
+        this.props.componentDidMount();
+      }
     }
 
-    componentWillUnmount() {
-      this.props.componentWillUnmount && this.props.componentWillUnmount();
+    public componentWillUnmount() {
+      if (this.props.componentWillUnmount) {
+        this.props.componentWillUnmount();
+      }
     }
 
-    showModal() {
+    public showModal() {
       this.modalId = ModalService.show(<TestModal onRequestClose={() => 1}/>, true);
     }
 
-    hideModal() {
+    public hideModal() {
       ModalService.hide(this.modalId);
     }
 
-    render() {
+    public render() {
       return (
         <ModalPanel>
           <View>
diff --git a/src/framework/ui/modal/modal.spec.tsx.snap b/src/framework/ui/modal/modal.spec.tsx.snap
deleted file mode 100644
index b342cb5e6..000000000
--- a/src/framework/ui/modal/modal.spec.tsx.snap
+++ /dev/null
@@ -1,584 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`@modal component checks * component styled with mappings 1`] = `
-<View
-  style={
-    Object {
-      "height": 0,
-      "position": "absolute",
-      "width": 0,
-    }
-  }
->
-  <View
-    pointerEvents="none"
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
-  <View
-    animationDuration={300}
-    appearance="default"
-    dispatch={[Function]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    pointerEvents="box-none"
-    style={Object {}}
-    theme={
-      Object {
-        "blue-dark": "#2541CC",
-        "blue-primary": "#3366FF",
-        "gray-dark": "#8992A3",
-        "gray-highlight": "#EDF0F5",
-        "gray-light": "#DDE1EB",
-        "gray-primary": "#A6AEBD",
-        "pink-primary": "#FF3D71",
-      }
-    }
-    themedStyle={
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "#3366FF",
-        "borderRadius": 3,
-        "borderWidth": 1,
-        "paddingHorizontal": 16,
-        "paddingVertical": 8,
-      }
-    }
-    visible={true}
-  >
-    <Text
-      onCloseModal={[Function]}
-      style={Object {}}
-    >
-      Test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal closes on passed prop 1`] = `
-<View
-  accessible={true}
-  isTVSelectable={true}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "opacity": 1,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-    }
-  }
->
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    onCloseModal={[MockFunction]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    pointerEvents="box-none"
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      style={Object {}}
-    >
-      <Text>
-        Test1
-      </Text>
-      <View
-        accessibilityRole="button"
-        accessibilityStates={Array []}
-        accessible={true}
-        isTVSelectable={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "opacity": 1,
-          }
-        }
-      >
-        <View
-          style={
-            Array [
-              Object {},
-            ]
-          }
-        >
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#007AFF",
-                  "fontSize": 18,
-                  "padding": 8,
-                  "textAlign": "center",
-                },
-              ]
-            }
-          >
-            Close Modal
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal closes on passed prop 2`] = `
-<View
-  accessible={true}
-  isTVSelectable={true}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "opacity": 1,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-    }
-  }
->
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    onCloseModal={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            undefined,
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    pointerEvents="box-none"
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      style={Object {}}
-    >
-      <Text>
-        Test1
-      </Text>
-      <View
-        accessibilityRole="button"
-        accessibilityStates={Array []}
-        accessible={true}
-        isTVSelectable={true}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Object {
-            "opacity": 1,
-          }
-        }
-      >
-        <View
-          style={
-            Array [
-              Object {},
-            ]
-          }
-        >
-          <Text
-            style={
-              Array [
-                Object {
-                  "color": "#007AFF",
-                  "fontSize": 18,
-                  "padding": 8,
-                  "textAlign": "center",
-                },
-              ]
-            }
-          >
-            Close Modal
-          </Text>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal component close on backDrop checks 1`] = `
-<View
-  accessible={true}
-  isTVSelectable={true}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "opacity": 1,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-    }
-  }
->
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    onCloseModal={[MockFunction]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    pointerEvents="box-none"
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      style={Object {}}
-    >
-      <Text>
-        Test1
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal component close on backDrop checks 2`] = `
-<View
-  accessible={true}
-  isTVSelectable={true}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "bottom": 0,
-      "left": 0,
-      "opacity": 1,
-      "position": "absolute",
-      "right": 0,
-      "top": 0,
-    }
-  }
->
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    onCloseModal={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "modal-test-identifier-1",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    pointerEvents="box-none"
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      style={Object {}}
-    >
-      <Text>
-        Test1
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal component renders properly 1`] = `
-<View
-  style={
-    Object {
-      "height": 0,
-      "position": "absolute",
-      "width": 0,
-    }
-  }
->
-  <View
-    pointerEvents="none"
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    onCloseModal={[Function]}
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    pointerEvents="box-none"
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      style={Object {}}
-    >
-      <Text>
-        Test1
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal component renders properly 2`] = `null`;
-
-exports[`@modal component checks * with animations 1`] = `
-<View>
-  <View
-    accessibilityRole="button"
-    accessibilityStates={Array []}
-    accessible={true}
-    isTVSelectable={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
-    testID="1"
-  >
-    <View
-      style={
-        Array [
-          Object {},
-        ]
-      }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#007AFF",
-              "fontSize": 18,
-              "padding": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        Open Modal
-      </Text>
-    </View>
-  </View>
-  <View
-    accessible={true}
-    isTVSelectable={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      animationDuration={500}
-      identifier="modal-test-identifier-1"
-      onCloseModal={[Function]}
-      onResponderRelease={[Function]}
-      onStartShouldSetResponder={[Function]}
-      onStartShouldSetResponderCapture={[Function]}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateY": 1334,
-            },
-          ],
-        }
-      }
-      visible={true}
-    >
-      <View
-        onCloseModal={[Function]}
-        style={Object {}}
-      >
-        <Text>
-          Test2
-        </Text>
-      </View>
-    </View>
-  </View>
-  ,
-</View>
-`;
-
-exports[`@modal component checks * with animations 2`] = `
-<View>
-  <View
-    accessibilityRole="button"
-    accessibilityStates={Array []}
-    accessible={true}
-    isTVSelectable={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "opacity": 1,
-      }
-    }
-    testID="2"
-  >
-    <View
-      style={
-        Array [
-          Object {},
-        ]
-      }
-    >
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#007AFF",
-              "fontSize": 18,
-              "padding": 8,
-              "textAlign": "center",
-            },
-          ]
-        }
-      >
-        Open Modal
-      </Text>
-    </View>
-  </View>
-  <View
-    accessible={true}
-    isTVSelectable={true}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  >
-    <View
-      animationDuration={500}
-      identifier="modal-test-identifier-1"
-      onCloseModal={[Function]}
-      onResponderRelease={[Function]}
-      onStartShouldSetResponder={[Function]}
-      onStartShouldSetResponderCapture={[Function]}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "opacity": 0,
-        }
-      }
-      visible={true}
-    >
-      <View
-        onCloseModal={[Function]}
-        style={Object {}}
-      >
-        <Text>
-          Test2
-        </Text>
-      </View>
-    </View>
-  </View>
-  ,
-</View>
-`;