diff --git a/node_modules/react-native-walkthrough-tooltip/src/tooltip.js b/node_modules/react-native-walkthrough-tooltip/src/tooltip.js index 3098692..f4189aa 100644 --- a/node_modules/react-native-walkthrough-tooltip/src/tooltip.js +++ b/node_modules/react-native-walkthrough-tooltip/src/tooltip.js @@ -4,6 +4,8 @@ import { Dimensions, InteractionManager, Modal, + Platform, + StatusBar, TouchableWithoutFeedback, View, } from 'react-native'; @@ -274,7 +276,9 @@ class Tooltip extends Component { ) { this.childWrapper.current.measure( (x, y, width, height, pageX, pageY) => { - const childRect = new Rect(pageX, pageY, width, height); + const notEdgeToEdge = Platform.OS === 'android' && Platform.Version < 30; + const offset = notEdgeToEdge ? StatusBar.currentHeight : 0; + const childRect = new Rect(pageX, pageY + (offset ?? 0), width, height); if ( Object.values(childRect).every(value => value !== undefined) ) { @@ -397,6 +401,35 @@ class Tooltip extends Component { ); }; + renderBackgroundWithHole = () => { + const { x, y, width, height } = this.state.childRect; + const backgroundColor = this.props.backgroundColor; + + const onPress = () => { + if (this.props.closeOnBackgroundInteraction) { + this.props.onClose(); + } + }; + + // Four rectangles surrounding the child rect, leaving it exposed + const rects = [ + // top + { top: 0, left: 0, right: 0, height: y }, + // bottom + { top: y + height, left: 0, right: 0, bottom: 0 }, + // left + { top: y, left: 0, width: x, height }, + // right + { top: y, left: x + width, right: 0, height }, + ]; + + return rects.map((rect, i) => ( + + + + )); + }; + renderContentForTooltip = () => { const generatedStyles = styleGenerator({ adjustedContentSize: this.state.adjustedContentSize, @@ -412,12 +445,6 @@ class Tooltip extends Component { const hasChildren = React.Children.count(this.props.children) > 0; - const onPressBackground = () => { - if (this.props.closeOnBackgroundInteraction) { - this.props.onClose(); - } - }; - const onPressContent = () => { if (this.props.closeOnContentInteraction) { this.props.onClose(); @@ -425,32 +452,36 @@ class Tooltip extends Component { }; return ( - - - - - {hasChildren ? : null} - - - {this.props.content} - - - + + {hasChildren && this.state.childRect.width > 0 + ? this.renderBackgroundWithHole() + : ( + this.props.closeOnBackgroundInteraction && this.props.onClose()} + accessible={this.props.accessible} + > + + + ) + } + + {hasChildren ? : null} + + + {this.props.content} + - {hasChildren && this.props.showChildInTooltip - ? this.renderChildInTooltip() - : null} - + {hasChildren && this.props.showChildInTooltip + ? this.renderChildInTooltip() + : null} + ); }; @@ -474,6 +505,7 @@ class Tooltip extends Component { visible={showTooltip} onRequestClose={this.props.onClose} supportedOrientations={this.props.supportedOrientations} + statusBarTranslucent={true} > {this.renderContentForTooltip()} @@ -483,6 +515,7 @@ class Tooltip extends Component { {hasChildren ? (