From 5c7809590bc8b14836d227729d5b3035dee7a76a Mon Sep 17 00:00:00 2001
From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
Date: Tue, 14 Jan 2020 14:29:21 +0300
Subject: [PATCH] fix(components): modal - backdrop behavior

---
 src/components/theme/modal/modal.service.tsx  |   3 +-
 .../theme/modal/modalPanel.component.tsx      |  10 +-
 .../theme/modal/modalPanel.spec.tsx           |   5 -
 .../theme/modal/modalResolver.component.tsx   | 102 +++----------
 .../theme/modal/modalResolver.spec.tsx        |  14 +-
 .../theme/modal/modalResolver.spec.tsx.snap   |  56 +++----
 src/components/ui/measure/measure.spec.ts     |   7 +
 src/components/ui/measure/type.ts             |   9 ++
 src/components/ui/modal/modal.component.tsx   | 143 ++++++------------
 src/components/ui/modal/modal.spec.tsx        |  24 ---
 .../overflowMenu/overflowMenu.component.tsx   |   3 -
 .../ui/popover/popover.component.tsx          |   8 +-
 .../ui/tooltip/tooltip.component.tsx          |   3 -
 .../modal/modalWithBackdrop.component.tsx     |   1 -
 14 files changed, 120 insertions(+), 268 deletions(-)

diff --git a/src/components/theme/modal/modal.service.tsx b/src/components/theme/modal/modal.service.tsx
index f37d1d24d..943aa058f 100644
--- a/src/components/theme/modal/modal.service.tsx
+++ b/src/components/theme/modal/modal.service.tsx
@@ -34,7 +34,7 @@ import {
  *
  *   const showModal = () => {
  *     const contentElement = this.renderModalContentElement();
- *     this.modalID = ModalService.show(contentElement, { allowBackdrop: true, onBackdropPress: this.hideModal });
+ *     this.modalID = ModalService.show(contentElement, { onBackdropPress: this.hideModal });
  *   };
  *
  *   const hideModal = () => {
@@ -90,7 +90,6 @@ class ModalServiceType {
 }
 
 export interface ModalPresentingConfig {
-  allowBackdrop?: boolean;
   backdropStyle?: StyleProp<ViewStyle>;
   onBackdropPress?: () => void;
 }
diff --git a/src/components/theme/modal/modalPanel.component.tsx b/src/components/theme/modal/modalPanel.component.tsx
index 1891d0006..c5f9fb9ab 100644
--- a/src/components/theme/modal/modalPanel.component.tsx
+++ b/src/components/theme/modal/modalPanel.component.tsx
@@ -72,9 +72,7 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
 
     const childElement: React.ReactElement = panelChild.element;
 
-    panelChild.element = React.cloneElement(childElement, {
-      children: children,
-    });
+    panelChild.element = React.cloneElement(childElement, childElement.props, children);
 
     const components: Map<string, ModalPanelChild> = this.state.components;
     components.delete(identifier);
@@ -93,11 +91,9 @@ export class ModalPanel extends React.Component<ModalPanelProps, ModalPanelState
   private renderModal = (config: ModalPanelChild, index: number): React.ReactElement<ModalResolverProps> => {
     return (
       <ModalResolver
-        {...config.element.props}
-        style={config.backdropStyle}
-        visible={true}
         key={index}
-        allowBackdrop={config.allowBackdrop}
+        visible={true}
+        backdropStyle={config.backdropStyle}
         onBackdropPress={config.onBackdropPress}>
         {config.element}
       </ModalResolver>
diff --git a/src/components/theme/modal/modalPanel.spec.tsx b/src/components/theme/modal/modalPanel.spec.tsx
index da7aaffba..fbea528ea 100644
--- a/src/components/theme/modal/modalPanel.spec.tsx
+++ b/src/components/theme/modal/modalPanel.spec.tsx
@@ -38,7 +38,6 @@ describe('@modal-service: service checks', () => {
           textTestId={textId(1)}
         />,
         {
-          allowBackdrop: false,
           onBackdropPress: () => null,
         },
       );
@@ -52,7 +51,6 @@ describe('@modal-service: service checks', () => {
           textTestId={textId(1)}
         />,
         {
-          allowBackdrop: false,
           onBackdropPress: () => null,
         },
       );
@@ -64,7 +62,6 @@ describe('@modal-service: service checks', () => {
           textTestId={textId(2)}
         />,
         {
-          allowBackdrop: false,
           onBackdropPress: () => null,
         },
       );
@@ -78,7 +75,6 @@ describe('@modal-service: service checks', () => {
           textTestId={textId(0)}
         />,
         {
-          allowBackdrop: true,
           onBackdropPress: () => null,
         },
       );
@@ -215,7 +211,6 @@ describe('@modal panel checks', () => {
       this.modalId = ModalService.show(
         <TestModal onBackdropPress={this.hideModal}/>,
         {
-          allowBackdrop: true,
           onBackdropPress: () => null,
         },
       );
diff --git a/src/components/theme/modal/modalResolver.component.tsx b/src/components/theme/modal/modalResolver.component.tsx
index 8d54acc78..4b3895bdc 100644
--- a/src/components/theme/modal/modalResolver.component.tsx
+++ b/src/components/theme/modal/modalResolver.component.tsx
@@ -6,117 +6,57 @@
 
 import React from 'react';
 import {
-  View,
-  ViewProps,
+  StyleProp,
   StyleSheet,
   TouchableOpacity,
-  TouchableOpacityProps,
+  View,
+  ViewProps,
+  ViewStyle,
 } from 'react-native';
+import { ModalPresentingConfig } from './modal.service';
 
 type ChildElement = React.ReactElement;
 type ChildrenProp = ChildElement | ChildElement[];
 
-interface ComponentProps {
+export interface ModalResolverProps extends ViewProps, ModalPresentingConfig {
   visible: boolean;
   children: ChildrenProp;
-  allowBackdrop: boolean;
+  backdropStyle: StyleProp<ViewStyle>;
   onBackdropPress: () => void;
 }
 
-export type ModalResolverProps = ViewProps & ComponentProps;
-
 export class ModalResolver extends React.Component<ModalResolverProps> {
 
   static defaultProps: Partial<ModalResolverProps> = {
     visible: false,
   };
 
-  private onBackdropPress = (): void => {
-    const { allowBackdrop, onBackdropPress } = this.props;
-
-    if (allowBackdrop) {
-      onBackdropPress();
-    }
-  };
-
-  private onStartShouldSetResponder = (): boolean => {
-    return true;
-  };
-
-  private onResponderRelease = (): void => {
-    return;
-  };
-
-  private onStartShouldSetResponderCapture = (): boolean => {
-    return false;
-  };
-
-  private renderComponentChild = (source: React.ReactElement): React.ReactElement => {
+  private renderChildElement = (source: ChildElement): ChildElement => {
     return React.cloneElement(source, {
       style: [source.props.style, this.props.style],
     });
   };
 
-  private renderComponentChildren = (source: React.ReactNode): React.ReactElement[] => {
-    return React.Children.map(source, this.renderComponentChild);
+  private renderComponentChildren = (source: ChildrenProp): ChildElement[] => {
+    return React.Children.map(source, this.renderChildElement);
   };
 
-  private renderWithBackDrop = (component: React.ReactElement<ViewProps>):
-    React.ReactElement<TouchableOpacityProps> => {
-
-    return (
-      <TouchableOpacity
-        style={[styles.container, this.props.style]}
-        onPress={this.onBackdropPress}
-        activeOpacity={1}>
-        {component}
-      </TouchableOpacity>
-    );
-  };
+  private renderComponent = (): React.ReactElement<ViewProps> => {
+    const componentChildren = this.renderComponentChildren(this.props.children);
 
-  private renderWithoutBackDrop = (component: React.ReactElement<ViewProps>): React.ReactElement<ViewProps> => {
     return (
-      <View style={styles.notVisibleWrapper}>
-        <View
-          style={styles.container}
-          pointerEvents='none'/>
-        {component}
+      <View style={StyleSheet.absoluteFill}>
+        <TouchableOpacity
+          style={[StyleSheet.absoluteFill, this.props.backdropStyle]}
+          activeOpacity={1.0}
+          onPress={this.props.onBackdropPress}
+        />
+        {componentChildren}
       </View>
     );
   };
 
-  private renderComponent = (): React.ReactElement<TouchableOpacityProps | ViewProps> => {
-    const { children, allowBackdrop, ...derivedProps } = this.props;
-    const componentChildren: React.ReactElement[] = this.renderComponentChildren(children);
-
-    const dialog: React.ReactElement<ViewProps> =
-      <View
-        {...derivedProps}
-        style={styles.contentWrapper}
-        onStartShouldSetResponder={this.onStartShouldSetResponder}
-        onResponderRelease={this.onResponderRelease}
-        onStartShouldSetResponderCapture={this.onStartShouldSetResponderCapture}
-        pointerEvents='box-none'>
-        {componentChildren}
-      </View>;
-
-    return allowBackdrop ?
-      this.renderWithBackDrop(dialog) : this.renderWithoutBackDrop(dialog);
-  };
-
-  public render(): React.ReactElement<ViewProps | TouchableOpacityProps> | null {
-    return this.props.visible ? this.renderComponent() : null;
+  public render(): React.ReactElement<ViewProps> | undefined {
+    return this.props.visible && this.renderComponent();
   }
 }
-
-const styles = StyleSheet.create({
-  container: StyleSheet.absoluteFillObject,
-  notVisibleWrapper: {
-    position: 'absolute',
-    width: 0,
-    height: 0,
-  },
-  contentWrapper: {
-    alignSelf: 'flex-start',
-  },
-});
diff --git a/src/components/theme/modal/modalResolver.spec.tsx b/src/components/theme/modal/modalResolver.spec.tsx
index 19110d10b..24409d7bf 100644
--- a/src/components/theme/modal/modalResolver.spec.tsx
+++ b/src/components/theme/modal/modalResolver.spec.tsx
@@ -18,9 +18,7 @@ describe('@modal resolver component checks', () => {
 
   it('* modal resolver component renders properly', () => {
     const modal1: RenderAPI = render(
-      <ModalResolver
-        visible={true}
-        allowBackdrop={false}>
+      <ModalResolver visible={true}>
         <View>
           <Text>
             Test1
@@ -30,9 +28,7 @@ describe('@modal resolver component checks', () => {
     );
 
     const modal2: RenderAPI = render(
-      <ModalResolver
-        visible={false}
-        allowBackdrop={false}>
+      <ModalResolver visible={false}>
         <View>
           <Text>
             Test2
@@ -51,21 +47,17 @@ describe('@modal resolver component checks', () => {
   it('* modal resolver component props checks', () => {
     const modalPassingProps = {
       visible: true,
-      allowBackdrop: false,
     };
     const modal = <ModalResolver {...modalPassingProps}/>;
 
     expect(modal.props.visible).toBe(modalPassingProps.visible);
-    expect(modal.props.allowBackdrop).toBe(modalPassingProps.allowBackdrop);
   });
 
   it('* modal resolver backdrop press calling checks', () => {
     const onBackdropPress = jest.fn();
 
     const component: RenderAPI = render(
-      <ModalResolver
-        visible={true}
-        allowBackdrop={true}>
+      <ModalResolver visible={true}>
         <View>
           <Text>Test1</Text>
           <Button
diff --git a/src/components/theme/modal/modalResolver.spec.tsx.snap b/src/components/theme/modal/modalResolver.spec.tsx.snap
index f21b0d9a8..c54159f0a 100644
--- a/src/components/theme/modal/modalResolver.spec.tsx.snap
+++ b/src/components/theme/modal/modalResolver.spec.tsx.snap
@@ -4,50 +4,42 @@ exports[`@modal resolver component checks * modal resolver component renders pro
 <View
   style={
     Object {
-      "height": 0,
+      "bottom": 0,
+      "left": 0,
       "position": "absolute",
-      "width": 0,
+      "right": 0,
+      "top": 0,
     }
   }
 >
-  <View
-    pointerEvents="none"
+  <TouchableOpacity
+    activeOpacity={1}
     style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
   />
   <View
-    onResponderRelease={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    pointerEvents="box-none"
     style={
-      Object {
-        "alignSelf": "flex-start",
-      }
+      Array [
+        undefined,
+        undefined,
+      ]
     }
-    visible={true}
   >
-    <View
-      style={
-        Array [
-          undefined,
-          undefined,
-        ]
-      }
-    >
-      <Text>
-        Test1
-      </Text>
-    </View>
+    <Text>
+      Test1
+    </Text>
   </View>
 </View>
 `;
 
-exports[`@modal resolver component checks * modal resolver component renders properly 2`] = `null`;
+exports[`@modal resolver component checks * modal resolver component renders properly 2`] = `false`;
diff --git a/src/components/ui/measure/measure.spec.ts b/src/components/ui/measure/measure.spec.ts
index 416ded4a1..519c735c7 100644
--- a/src/components/ui/measure/measure.spec.ts
+++ b/src/components/ui/measure/measure.spec.ts
@@ -47,4 +47,11 @@ describe('* frame', () => {
     expect(y).toEqual(2);
   });
 
+  it('* center of', () => {
+    const { origin: { x, y } } = rhsFrame.centerOf(lhsFrame);
+
+    expect(x).toEqual(2);
+    expect(y).toEqual(2);
+  });
+
 });
diff --git a/src/components/ui/measure/type.ts b/src/components/ui/measure/type.ts
index 9a3f0e969..e6ff0c29f 100644
--- a/src/components/ui/measure/type.ts
+++ b/src/components/ui/measure/type.ts
@@ -120,6 +120,15 @@ export class Frame {
     );
   }
 
+  public centerOf(other: Frame): Frame {
+    return new Frame(
+      other.origin.x + (other.size.width - this.size.width) / 2,
+      other.origin.y + (other.size.height - this.size.height) / 2,
+      this.size.width,
+      this.size.height,
+    );
+  }
+
   static zero(): Frame {
     return new Frame(0, 0, 0, 0);
   }
diff --git a/src/components/ui/modal/modal.component.tsx b/src/components/ui/modal/modal.component.tsx
index 1c8214427..597a365ea 100644
--- a/src/components/ui/modal/modal.component.tsx
+++ b/src/components/ui/modal/modal.component.tsx
@@ -6,39 +6,35 @@
 
 import React from 'react';
 import {
+  FlexStyle,
+  StyleSheet,
   View,
   ViewProps,
-  StyleSheet,
   ViewStyle,
-  StyleProp,
 } from 'react-native';
 import {
-  ModalService,
-  StyleType,
   ModalPresentingConfig,
+  ModalService,
 } from '@kitten/theme';
-import {
-  MeasureElement,
-  MeasuringElement,
-} from '../measure/measure.component';
+import { MeasureElement } from '../measure/measure.component';
 import {
   Frame,
-  Size,
+  Point,
 } from '../measure/type';
 
-const window: Frame = Frame.window();
-export const baseModalTestId: string = '@modal/base';
-
-type ChildElement = React.ReactElement;
-type ChildrenProp = ChildElement | ChildElement[];
-
 export interface ModalProps extends ViewProps, ModalPresentingConfig {
   visible?: boolean;
-  children: ChildrenProp;
+  children: React.ReactNode;
 }
 
 export type ModalElement = React.ReactElement<ModalProps>;
 
+interface State {
+  contentFrame: Frame;
+}
+
+const POINT_OUTSCREEN: Point = new Point(-999, -999);
+
 /**
  * `Modal` component is a wrapper than presents content above an enclosing view.
  *
@@ -48,9 +44,6 @@ export type ModalElement = React.ReactElement<ModalProps>;
  *
  * @property {ReactElement | ReactElement[]} children - Determines component's children.
  *
- * @property {boolean} allowBackdrop - Determines whether user can tap on back-drop.
- * Default is `false`.
- *
  * @property {StyleProp<ViewStyle>} backdropStyle - Determines the style of backdrop.
  *
  * @property {() => void} onBackdropPress - Determines component's behavior when the user is
@@ -62,105 +55,69 @@ export type ModalElement = React.ReactElement<ModalProps>;
  *
  * @overview-example ModalWithBackdrop
  */
-export class Modal extends React.Component<ModalProps> {
+export class Modal extends React.Component<ModalProps, State> {
 
-  static defaultProps: Partial<ModalProps> = {
-    onBackdropPress: () => null,
-  };
+  private modalId: string;
 
-  private contentSize: Size = Size.zero();
-  private id: string = '';
+  public state: State = {
+    contentFrame: Frame.zero(),
+  };
 
-  public componentDidUpdate(prevProps: ModalProps): void {
-    if (prevProps.visible !== this.props.visible) {
-      this.handleVisibility(this.props);
-    } else if (prevProps.visible && this.props.visible) {
-      const element: React.ReactElement = this.renderModal();
-      ModalService.update(this.id, element.props.children);
-    }
+  private get contentFlexPosition(): FlexStyle {
+    const derivedStyle: ViewStyle = StyleSheet.flatten(this.props.style || {});
+    const centerInWindow: Point = this.state.contentFrame.centerOf(Frame.window()).origin;
+    // @ts-ignore
+    return { left: derivedStyle.left || centerInWindow.x, top: derivedStyle.top || centerInWindow.y };
   }
 
-  private handleVisibility = (props: ModalProps): void => {
-    const { allowBackdrop, onBackdropPress } = this.props;
+  private get backdropConfig(): ModalPresentingConfig {
+    const { onBackdropPress, backdropStyle } = this.props;
+    return { onBackdropPress, backdropStyle };
+  }
 
-    if (props.visible) {
-      const element: React.ReactElement = this.renderModal();
-      this.id = ModalService.show(element, { allowBackdrop, onBackdropPress });
-    } else {
-      this.id = ModalService.hide(this.id);
+  public componentDidUpdate(): void {
+    if (!this.modalId && this.props.visible) {
+      this.modalId = ModalService.show(this.renderModalElement(this.contentFlexPosition), this.backdropConfig);
+      return;
     }
-  };
 
-  private getAbsoluteRelatedStyle = (): StyleType => {
-    const windowFrame: Frame = Frame.window();
+    if (this.modalId && !this.props.visible) {
+      this.modalId = ModalService.hide(this.modalId);
+    }
+  }
 
-    return {
-      top: (windowFrame.size.height - this.contentSize.height) / 2,
-      left: (windowFrame.size.width - this.contentSize.width) / 2,
-    };
-  };
+  private onContentMeasure = (frame: Frame): void => {
+    this.state.contentFrame = frame;
 
-  private onMeasure = (frame: Frame): void => {
-    this.contentSize = frame.size;
+    if (!this.modalId && this.props.visible) {
+      this.modalId = ModalService.show(this.renderModalElement(this.contentFlexPosition), this.backdropConfig);
+    }
   };
 
-  private renderBaseModal = (): React.ReactElement<ViewProps> => {
-    const { style, children, ...restProps } = this.props;
-    const absoluteRelatedStyle: StyleType = this.getAbsoluteRelatedStyle();
-
+  private renderModalElement = (style: ViewStyle): React.ReactElement<ViewProps> => {
     return (
       <View
-        {...restProps}
-        testID={baseModalTestId}
-        style={[styles.container, absoluteRelatedStyle, style]}>
-        {children}
-      </View>
+        {...this.props}
+        style={[this.props.style, styles.contentView, style]}
+      />
     );
   };
 
-  private renderModal = (): React.ReactElement => {
-    const { backdropStyle } = this.props;
-    const modal: React.ReactElement<ViewProps> = this.renderBaseModal();
-
-    return backdropStyle ? (
-      <React.Fragment>
-        <View
-          pointerEvents='box-none'
-          style={[styles.backdrop, backdropStyle]}/>
-        {modal}
-      </React.Fragment>
-    ) : modal;
-  };
-
-  private renderMeasureNode = (): MeasuringElement => {
-    const modal: React.ReactElement = this.renderBaseModal();
-    const measureStyledModal: React.ReactElement = React.cloneElement(modal, {
-      style: [modal.props.style, styles.hiddenModal],
-      pointerEvents: 'none',
-    });
-
+  public render(): React.ReactElement {
     return (
-      <MeasureElement onMeasure={this.onMeasure}>
-        {measureStyledModal}
+      <MeasureElement onMeasure={this.onContentMeasure}>
+        {this.renderModalElement(styles.outscreen)}
       </MeasureElement>
     );
-  };
-
-  public render(): React.ReactNode {
-    return this.renderMeasureNode();
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-  },
-  backdrop: {
+  contentView: {
     position: 'absolute',
-    width: window.size.width,
-    height: window.size.height,
   },
-  hiddenModal: {
-    opacity: 0,
+  outscreen: {
+    left: POINT_OUTSCREEN.x,
+    top: POINT_OUTSCREEN.y,
   },
 });
diff --git a/src/components/ui/modal/modal.spec.tsx b/src/components/ui/modal/modal.spec.tsx
index ffa9ddf5a..76ace0663 100644
--- a/src/components/ui/modal/modal.spec.tsx
+++ b/src/components/ui/modal/modal.spec.tsx
@@ -77,30 +77,6 @@ describe('@modal component checks', () => {
     expect(component.getByType(Modal).props.visible).toBe(false);
   });
 
-  it('* modal default center placement calculated properly', () => {
-    const window: Frame = Frame.window();
-    const modalStyle: StyleType = {
-      width: 200,
-      height: 200,
-    };
-    const component: RenderAPI = render(
-      <TestScreen modalStyle={modalStyle}/>,
-    );
-
-    fireEvent.press(component.getByTestId(buttonShowModalTestId));
-    const modalInstance: any = component.getByType(Modal).instance;
-    const expectedStyle: StyleType = {
-      top: (window.size.height - modalInstance.contentSize.height) / 2,
-      left: (window.size.width - modalInstance.contentSize.width) / 2,
-    };
-
-    const baseModalStyles: StyleType[] = component.getByTestId(baseModalTestId).props.style;
-    const expectedStyleExist: boolean = baseModalStyles[0]
-      .some((style: StyleType) => stringify(style) === stringify(expectedStyle));
-
-    expect(expectedStyleExist).toBe(true);
-  });
-
 });
 
 describe('@modal panel checks', () => {
diff --git a/src/components/ui/overflowMenu/overflowMenu.component.tsx b/src/components/ui/overflowMenu/overflowMenu.component.tsx
index f6890a824..fd9a8e1ea 100644
--- a/src/components/ui/overflowMenu/overflowMenu.component.tsx
+++ b/src/components/ui/overflowMenu/overflowMenu.component.tsx
@@ -59,9 +59,6 @@ export type OverflowMenuElement = React.ReactElement<OverflowMenuProps>;
  *
  * @property {boolean} fullWidth - Determines whether content element should have same width as child element.
  *
- * @property {boolean} allowBackdrop - Determines whether user can tap on back-drop.
- * Default is `false`.
- *
  * @property {StyleProp<ViewStyle>} backdropStyle - Determines the style of backdrop.
  *
  * @property {() => void} onBackdropPress - Determines component's behavior when the user is
diff --git a/src/components/ui/popover/popover.component.tsx b/src/components/ui/popover/popover.component.tsx
index 6f87de832..53eea5f2a 100644
--- a/src/components/ui/popover/popover.component.tsx
+++ b/src/components/ui/popover/popover.component.tsx
@@ -67,9 +67,6 @@ const POINT_OUTSCREEN: Point = new Point(-999, -999);
  *
  * @property {boolean} fullWidth - Determines whether content element should have same width as child element.
  *
- * @property {boolean} allowBackdrop - Determines whether user can tap on back-drop.
- * Default is `false`.
- *
  * @property {StyleProp<ViewStyle>} backdropStyle - Determines the style of backdrop.
  *
  * @property {() => void} onBackdropPress - Determines component's behavior when the user is
@@ -86,7 +83,6 @@ const POINT_OUTSCREEN: Point = new Point(-999, -999);
 export class Popover extends React.Component<PopoverProps, State> {
 
   static defaultProps: Partial<PopoverProps> = {
-    allowBackdrop: true,
     placement: PopoverPlacements.BOTTOM,
   };
 
@@ -112,8 +108,8 @@ export class Popover extends React.Component<PopoverProps, State> {
   }
 
   private get backdropConfig() {
-    const { allowBackdrop, onBackdropPress, backdropStyle } = this.props;
-    return { allowBackdrop, onBackdropPress, backdropStyle };
+    const { onBackdropPress, backdropStyle } = this.props;
+    return { onBackdropPress, backdropStyle };
   }
 
   public componentDidUpdate(prevProps: PopoverProps): void {
diff --git a/src/components/ui/tooltip/tooltip.component.tsx b/src/components/ui/tooltip/tooltip.component.tsx
index f04a9d994..68baac9d9 100644
--- a/src/components/ui/tooltip/tooltip.component.tsx
+++ b/src/components/ui/tooltip/tooltip.component.tsx
@@ -66,9 +66,6 @@ export type TooltipElement = React.ReactElement<TooltipProps>;
  *
  * @property {boolean} fullWidth - Determines whether content element should have same width as child element.
  *
- * @property {boolean} allowBackdrop - Determines whether user can tap on back-drop.
- * Default is `false`.
- *
  * @property {StyleProp<ViewStyle>} backdropStyle - Determines the style of backdrop.
  *
  * @property {() => void} onBackdropPress - Determines component's behavior when the user is
diff --git a/src/showcases/components/modal/modalWithBackdrop.component.tsx b/src/showcases/components/modal/modalWithBackdrop.component.tsx
index e4c41649d..e488a0829 100644
--- a/src/showcases/components/modal/modalWithBackdrop.component.tsx
+++ b/src/showcases/components/modal/modalWithBackdrop.component.tsx
@@ -29,7 +29,6 @@ export const ModalWithBackdropShowcase = () => {
         TOGGLE MODAL
       </Button>
       <Modal
-        allowBackdrop={true}
         backdropStyle={styles.backdrop}
         onBackdropPress={toggleModal}
         visible={visible}>