Fix/ hint container position (#1891)

* fix container position

* remove zindex

* set zIndex and elevation to hint with overlay

Author: lidord-wix

generatedTypes/src/components/hint/index.d.ts

@@ -163,9 +163,9 @@ declare class Hint extends Component<HintProps, HintState> {
     get useSideTip(): boolean;
     getTargetPositionOnScreen(): TARGET_POSITIONS;
     getContainerPosition(): {
-        top: number;
-        left: number;
-    };
+        top: number | undefined;
+        left: number | undefined;
+    } | undefined;
     getHintPosition(): HintPositionStyle;
     getHintPadding(): Paddings;
     getHintAnimatedStyle: () => {
@@ -175,6 +175,7 @@ declare class Hint extends Component<HintProps, HintState> {
         }[];
     };
     getTipPosition(): Position;
+    isUsingModal: () => boolean | undefined;
     renderOverlay(): JSX.Element | undefined;
     renderHintTip(): JSX.Element;
     renderContent(): JSX.Element;

src/components/hint/index.tsx

@@ -173,7 +173,7 @@ class Hint extends Component<HintProps, HintState> {
   animationDuration = 170;
 
   state = {
-    targetLayoutInWindow: undefined as {x: number, y: number, width: number, height: number} | undefined,
+    targetLayoutInWindow: undefined as {x: number; y: number; width: number; height: number} | undefined,
     targetLayout: this.props.targetFrame,
     hintUnmounted: !this.props.visible
   };
@@ -305,9 +305,8 @@ class Hint extends Component<HintProps, HintState> {
 
   getContainerPosition() {
     if (this.targetLayout) {
-      return {top: this.targetLayout.y || 0, left: this.targetLayout.x || 0};
+      return {top: this.targetLayout.y, left: this.targetLayout.x};
     }
-    return {top: 0, left: 0};
   }
 
   getHintPosition() {
@@ -403,11 +402,16 @@ class Hint extends Component<HintProps, HintState> {
     return tipPositionStyle;
   }
 
+  isUsingModal = () => {
+    const {onBackgroundPress, useModal} = this.props;
+    return onBackgroundPress && useModal;
+  };
+
   renderOverlay() {
     const {targetLayoutInWindow} = this.state;
     const {onBackgroundPress, backdropColor, testID} = this.props;
     if (targetLayoutInWindow) {
-      const containerPosition = this.getContainerPosition();
+      const containerPosition = this.getContainerPosition() as {top: number; left: number};
       return (
         <Animated.View
           style={[
@@ -515,7 +519,7 @@ class Hint extends Component<HintProps, HintState> {
         // this view must be collapsable, don't pass testID or backgroundColor etc'.
         collapsable
         testID={undefined}
-        style={[styles.container, style, this.getContainerPosition()]}
+        style={[styles.container, style, this.getContainerPosition(), !this.isUsingModal() && styles.overlayContainer]}
       >
         {this.renderHint()}
       </View>
@@ -558,7 +562,7 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   render() {
-    const {onBackgroundPress, backdropColor, useModal, testID} = this.props;
+    const {onBackgroundPress, backdropColor, testID} = this.props;
 
     if (!this.props.visible && this.state.hintUnmounted) {
       return this.props.children || null;
@@ -567,7 +571,7 @@ class Hint extends Component<HintProps, HintState> {
     return (
       <>
         {this.renderChildren()}
-        {onBackgroundPress && useModal ? (
+        {this.isUsingModal() ? (
           <Modal
             visible={this.showHint}
             animationType={backdropColor ? 'fade' : 'none'}
@@ -594,8 +598,11 @@ class Hint extends Component<HintProps, HintState> {
 
 const styles = StyleSheet.create({
   container: {
-    position: 'absolute',
-    zIndex: 1
+    position: 'absolute'
+  },
+  overlayContainer: {
+    zIndex: 10,
+    elevation: 10
   },
   mockChildrenContainer: {
     position: 'absolute'