When I use PopOver as a tooltip its opening behind other containers below it.

[vickylance]

Describe the bug When using Popover with tooltip mode its opening behind all the components below it. Sending popoverStyle as absolute and zIndex is also not working as mentioned here https://github.com/SteffeyDev/react-native-popover-view/issues/95

Reproducable snack project - https://snack.expo.dev/Zi5bAa8DV

Device/Setup Info:

• Device: Realme X50 Pro
• OS: Android
• react-native version: 0.66.4
  • react-native-popover-view version: 5.1.7

Screenshots

Debug Output

Chrome: setNativeProps is deprecated. Please update props using React state instead. sdk_gphone_x86_arm: [2022-11-09T17:18:09.798Z] calculateRectFromRef - waiting for ref sdk_gphone_x86_arm: [2022-11-09T17:18:09.967Z] setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0} sdk_gphone_x86_arm: [2022-11-09T17:18:09.969Z] calculateRectFromRef - waiting for ref sdk_gphone_x86_arm: [2022-11-09T17:18:09.969Z] calculateRectFromRef - waiting for ref to move from: {"x":8,"y":195.6666717529297,"width":344,"height":19} sdk_gphone_x86_arm: [2022-11-09T17:18:09.800Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0} sdk_gphone_x86_arm: [2022-11-09T17:18:09.973Z] handleChange - waiting 100ms to accumulate all changes sdk_gphone_x86_arm: [2022-11-09T17:18:09.971Z] measureContent - new requestedContentSize: {"width":215,"height":38} (used to be null) sdk_gphone_x86_arm: [2022-11-09T17:18:09.947Z] setDefaultDisplayArea - newDisplayArea: {"x":0,"y":0,"width":360,"height":712} sdk_gphone_x86_arm: [2022-11-09T17:18:09.927Z] calculateRectFromRef - calculated Rect: {"x":8,"y":195.6666717529297,"width":344,"height":19} sdk_gphone_x86_arm: [2022-11-09T17:18:10.089Z] handleChange - requestedContentSize: {"width":215,"height":38} sdk_gphone_x86_arm: [2022-11-09T17:18:10.089Z] handleChange - fromRect: {"x":8,"y":195.6666717529297,"width":344,"height":19} sdk_gphone_x86_arm: [2022-11-09T17:18:10.090Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":72.5,"y":214.6666717529297},"anchorPoint":{"x":180,"y":214.6666717529297},"placement":"bottom","forcedContentSize":{"width":340,"height":487.3333282470703},"viewLargerThanDisplayArea":{"height":false,"width":false}} sdk_gphone_x86_arm: [2022-11-09T17:18:10.091Z] getTranslateOrigin - popoverSize: {"width":215,"height":46} sdk_gphone_x86_arm: [2022-11-09T17:18:10.089Z] handleChange - displayArea: {"x":0,"y":0,"width":360,"height":712} sdk_gphone_x86_arm: [2022-11-09T17:18:10.091Z] handleChange - animating in sdk_gphone_x86_arm: [2022-11-09T17:18:10.089Z] handleChange - placement: "bottom" sdk_gphone_x86_arm: [2022-11-09T17:18:10.090Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":72.5,"y":214.6666717529297},"anchorPoint":{"x":180,"y":214.6666717529297},"placement":"bottom","forcedContentSize":{"width":340,"height":487.3333282470703},"viewLargerThanDisplayArea":{"height":false,"width":false}} sdk_gphone_x86_arm: [2022-11-09T17:18:10.091Z] getTranslateOrigin - anchorPoint: {"x":180,"y":214.6666717529297} sdk_gphone_x86_arm: [2022-11-09T17:18:10.092Z] animateIn - translatePoint: {"x":72.5,"y":214.6666717529297} sdk_gphone_x86_arm: [2022-11-09T17:18:10.092Z] animateIn - translateStart: {"x":72.5,"y":1615.6666717529297} sdk_gphone_x86_arm: [2022-11-09T17:18:10.099Z] Setting up keyboard listeners sdk_gphone_x86_arm: [2022-11-09T17:18:10.431Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":99.66666412353516,"y":-1424,"width":18,"height":10} sdk_gphone_x86_arm: [2022-11-09T17:18:10.429Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1416,"width":215,"height":38} sdk_gphone_x86_arm: [2022-11-09T17:18:10.127Z] measureContent - Skipping, content size did not change

[SteffeyDev]

You can fix this by re-positing the location of the Popover component in the order of components. You will need to detach the Popover from the touchable and use refs to link them (see https://github.com/SteffeyDev/react-native-popover-view#showing-popover-from-a-reference-to-an-element). The touchable can stay in the same place, but the popover will need to be moved below the other elements in the code, so that it is rendered above them (in RN, items further down in the JSX are rendered on top). Even though it is moved down, it will still show as a tooltip to the touchable, as long as they have roughly the same parent (due to the limitations of RN, this is a bit of an art). See https://github.com/SteffeyDev/react-native-popover-view#tips-for-using-js-modal-and-tooltip as well

[vickylance]

@SteffeyDev Thanks a lot it worked. Updated the snack expo with the example

[SteffeyDev]

Glad to hear!