diff --git a/src/framework/theme/component/modal/modalPanel.component.tsx b/src/framework/theme/component/modal/modalPanel.component.tsx
index 4657d61d5..54a559a13 100644
--- a/src/framework/theme/component/modal/modalPanel.component.tsx
+++ b/src/framework/theme/component/modal/modalPanel.component.tsx
@@ -4,53 +4,63 @@ 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>>;
-  backdropValues: Map<string, boolean>;
+  components: Map<string, React.ReactElement<ModalComponentCloseProps>>;
+  backdrops: 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(),
-    backdropValues: new Map(),
+    components: new Map(),
+    backdrops: new Map(),
   };
 
   public componentDidMount(): void {
-    ModalService.setComponent(this);
+    ModalService.mount(this);
   }
 
   public componentWillUnmount(): void {
-    ModalService.setComponent(null);
+    ModalService.unmount();
   }
 
-  public onCloseModal = (identifier: string) => {
-    const components: Map<string, React.ReactElement<any>> = this.state.dialogComponents;
+  public hide = (identifier: string): void => {
+    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.components;
     components.delete(identifier);
-    const backdropValues: Map<string, boolean> = this.state.backdropValues;
-    backdropValues.delete(identifier);
+    const backdrops: Map<string, boolean> = this.state.backdrops;
+    backdrops.delete(identifier);
     this.setState({
-      dialogComponents: components,
-      backdropValues: backdropValues,
+      components: components,
+      backdrops: 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
+    const componentsMap: Map<string, React.ReactElement<any>> = this.state.components
       .set(key, dialogComponent);
-    const backdropsMap: 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: backdropsMap,
+      components: componentsMap,
+      backdrops: backdrops,
     });
+    return key;
   }
 
   private generateUniqueComponentKey = (): string => {
@@ -58,21 +68,22 @@ 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}
         visible={true}
         isBackDropAllowed={closeOnBackdrop}
         key={index}
         identifier={identifier}
-        onCloseModal={this.onCloseModal}
+        onCloseModal={this.hide}
       >
         {modal}
       </Modal>
@@ -80,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 40611db6f..360565b38 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,19 +29,29 @@ describe('@modal panel checks', () => {
 
   class ModalPanelTest extends React.Component<HooksProps> {
 
-    componentDidMount(): void {
-      this.props.componentDidMount && this.props.componentDidMount();
+    private modalId: string = '';
+
+    public componentDidMount(): void {
+      if (this.props.componentDidMount) {
+        this.props.componentDidMount();
+      }
+    }
+
+    public componentWillUnmount() {
+      if (this.props.componentWillUnmount) {
+        this.props.componentWillUnmount();
+      }
     }
 
-    componentWillUnmount() {
-      this.props.componentWillUnmount && this.props.componentWillUnmount();
+    public showModal() {
+      this.modalId = ModalService.show(<TestModal onRequestClose={() => 1}/>, true);
     }
 
-    showModal() {
-      ModalService.showDialog(<TestModal/>, true);
+    public hideModal() {
+      ModalService.hide(this.modalId);
     }
 
-    render() {
+    public render() {
       return (
         <ModalPanel>
           <View>
@@ -51,6 +62,11 @@ describe('@modal panel checks', () => {
             onPress={() => this.showModal()}
             testID={showModalTestId}
           />
+          <Button
+            title='Hide Modal'
+            onPress={() => this.hideModal()}
+            testID={hideModalTestIdOuter}
+          />
         </ModalPanel>
       );
     }
@@ -65,7 +81,7 @@ describe('@modal panel checks', () => {
           <Button
             title='Close Modal'
             onPress={this.props.onCloseModal}
-            testID={hideModalTestId}
+            testID={hideModalTestIdInner}
           />
         </View>
       );
@@ -101,10 +117,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/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/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/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..f861b4012 100644
--- a/src/framework/ui/modal/modal.component.tsx
+++ b/src/framework/ui/modal/modal.component.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import {
   View,
   ViewProps,
-  TouchableWithoutFeedbackProps,
   StyleSheet,
-  TouchableWithoutFeedback,
   Dimensions,
   Animated,
+  TouchableOpacity,
+  TouchableOpacityProps,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -63,19 +63,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,57 +104,77 @@ export class Modal extends React.Component<Props> {
     }
   };
 
-  private createComponentChild = (source: React.ReactElement<any>): React.ReactElement<any> => {
+  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,
-      pointerEvents: 'box-none',
+      style: {
+        ...source.props.style,
+        ...StyleSheet.flatten(this.props.style),
+      },
     });
   };
 
-  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 renderComponentChildren = (source: React.ReactNode): React.ReactElement<any>[] => {
+    return React.Children.map(source, this.renderComponentChild);
   };
 
-  private renderComponent = (): React.ReactElement<ViewProps> => {
-    const { style, themedStyle, animationType, children, ...derivedProps } = this.props;
-    const componentStyle: StyleType = this.getComponentStyle(themedStyle);
+  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 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 componentChildren: React.ReactElement<any>[] = this.renderComponentChildren(children);
+
+    const dialog: React.ReactElement<ViewProps> =
+      <Animated.View
+        {...derivedProps}
+        style={animationStyle}
+        onStartShouldSetResponder={this.onStartShouldSetResponder}
+        onResponderRelease={this.onResponderRelease}
+        onStartShouldSetResponderCapture={this.onStartShouldSetResponderCapture}
+        pointerEvents='box-none'>
+        {componentChildren}
+      </Animated.View>;
+
+    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;
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    position: 'absolute',
-  },
-  backdrop: {
-    width: width,
-    height: height,
     ...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 832ca0b91..5f32078dc 100644
--- a/src/framework/ui/modal/modal.spec.tsx
+++ b/src/framework/ui/modal/modal.spec.tsx
@@ -6,8 +6,8 @@ import {
 import {
   View,
   Text,
-  TouchableWithoutFeedback,
   Button,
+  TouchableOpacity,
 } from 'react-native';
 import {
   Modal,
@@ -155,7 +155,7 @@ describe('@modal component checks', () => {
       </Modal>,
     );
     expect(modal).toMatchSnapshot();
-    fireEvent.press(modal.getByType(TouchableWithoutFeedback));
+    fireEvent.press(modal.getByType(TouchableOpacity));
     expect(modal).toMatchSnapshot();
     expect(onCloseModal).toHaveBeenCalled();
   });
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 686b13d9e..000000000
--- a/src/framework/ui/modal/modal.spec.tsx.snap
+++ /dev/null
@@ -1,573 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`@modal component checks * component styled with mappings 1`] = `
-<View
-  style={
-    Object {
-      "position": "absolute",
-    }
-  }
->
-  <View
-    animationDuration={300}
-    appearance="default"
-    dispatch={[Function]}
-    isBackDropAllowed={false}
-    style={
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "#2541CC",
-        "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]}
-      pointerEvents="box-none"
-    >
-      Test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`@modal component checks * modal closes on passed prop 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
-        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
-  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 [
-            undefined,
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
-    >
-      <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
-  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
-  style={
-    Object {
-      "position": "absolute",
-    }
-  }
->
-  <View
-    animationDuration={300}
-    identifier="modal-test-identifier-1"
-    isBackDropAllowed={false}
-    onCloseModal={[Function]}
-    style={Object {}}
-    visible={true}
-  >
-    <View
-      onCloseModal={[Function]}
-      pointerEvents="box-none"
-    >
-      <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
-    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={500}
-      identifier="modal-test-identifier-1"
-      isBackDropAllowed={true}
-      onCloseModal={[Function]}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateY": 1334,
-            },
-          ],
-        }
-      }
-      visible={true}
-    >
-      <View
-        onCloseModal={[Function]}
-        pointerEvents="box-none"
-      >
-        <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
-    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={500}
-      identifier="modal-test-identifier-1"
-      isBackDropAllowed={true}
-      onCloseModal={[Function]}
-      style={
-        Object {
-          "opacity": 0,
-        }
-      }
-      visible={true}
-    >
-      <View
-        onCloseModal={[Function]}
-        pointerEvents="box-none"
-      >
-        <Text>
-          Test2
-        </Text>
-      </View>
-    </View>
-  </View>
-  ,
-</View>
-`;
diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
index bc0b1aaf0..d05ac1524 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<ViewProps> = React.cloneElement(popoverView, { style });
-
-      ModalService.showDialog(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/framework/ui/popover/popoverView.component.tsx b/src/framework/ui/popover/popoverView.component.tsx
index 04b93c406..f47c55c32 100644
--- a/src/framework/ui/popover/popoverView.component.tsx
+++ b/src/framework/ui/popover/popoverView.component.tsx
@@ -114,6 +114,7 @@ export class PopoverView extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'transparent',
+    alignSelf: 'flex-start',
   },
   content: {
     justifyContent: 'center',
diff --git a/src/playground/src/ui/screen/dialog.component.tsx b/src/playground/src/ui/screen/dialog.component.tsx
index 75b629535..f144e4502 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={() => Alert.alert('Dialog close')}/>
+  );
 
-    const component = this.createModalElement();
-    ModalService.showDialog(component, true);
+  private showModal = (): void => {
+    const component = this.createModal();
+    this.modalId = ModalService.show(component, false);
   };
 
-  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={() => Alert.alert('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 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 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..ccbc3c698 100644
--- a/src/playground/src/ui/screen/modal.component.tsx
+++ b/src/playground/src/ui/screen/modal.component.tsx
@@ -76,7 +76,7 @@ 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}
           animationType='fade'
           animationDuration={600}>
           <ModalContent onDismiss={this.onFadeModalDismiss}/>
@@ -86,7 +86,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}/>
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}>