Not seeing popover on Android #146

smadan · 2022-10-05T19:11:30Z

Describe the bug
Looks like the popover is not showing at all on Android. I noticed this after I changed my Android target SDK to 31.

Device/Setup Info:

Device: Pixel 5 emulator (Android Studio Chipmunk)
OS: Android 12, API 31
react-native version: 0.63.3
react-native-popover-view version: 5.1.5

Debug Output
[Wed Oct 05 2022 13:58:05.260] LOG [Wed Oct 05 2022 13:58:05.290] LOG [Wed Oct 05 2022 13:58:05.244] LOG [Wed Oct 05 2022 13:58:05.276] LOG [Wed Oct 05 2022 13:58:05.278] LOG [Wed Oct 05 2022 13:58:05.285] LOG [Wed Oct 05 2022 13:58:05.288] LOG [Wed Oct 05 2022 13:58:05.310] LOG [Wed Oct 05 2022 13:58:05.311] LOG [Wed Oct 05 2022 13:58:05.432] LOG [Wed Oct 05 2022 13:58:05.433] LOG [Wed Oct 05 2022 13:58:05.434] LOG [Wed Oct 05 2022 13:58:05.434] LOG [Wed Oct 05 2022 13:58:05.434] LOG [Wed Oct 05 2022 13:58:05.434] LOG [Wed Oct 05 2022 13:58:05.435] LOG [Wed Oct 05 2022 13:58:05.435] LOG [Wed Oct 05 2022 13:58:05.435] LOG [Wed Oct 05 2022 13:58:05.436] LOG [Wed Oct 05 2022 13:58:05.441] LOG [Wed Oct 05 2022 13:58:05.441] LOG [Wed Oct 05 2022 13:58:05.444] LOG [Wed Oct 05 2022 13:58:05.447] LOG [Wed Oct 05 2022 13:58:05.448] LOG [Wed Oct 05 2022 13:58:05.454] LOG [Wed Oct 05 2022 13:58:05.465] LOG [Wed Oct 05 2022 13:58:05.466] LOG [Wed Oct 05 2022 13:58:05.466] LOG [Wed Oct 05 2022 13:58:05.470] LOG [Wed Oct 05 2022 13:58:05.579] LOG [Wed Oct 05 2022 13:58:05.580] LOG [Wed Oct 05 2022 13:58:05.582] LOG [Wed Oct 05 2022 13:58:05.582] LOG [Wed Oct 05 2022 13:58:05.583] LOG [Wed Oct 05 2022 13:58:05.588] LOG [Wed Oct 05 2022 13:58:05.589] LOG [Wed Oct 05 2022 13:58:05.599] LOG [Wed Oct 05 2022 13:58:05.601] LOG [Wed Oct 05 2022 13:58:05.601] LOG [Wed Oct 05 2022 13:58:05.602] LOG [Wed Oct 05 2022 13:58:05.603] LOG [Wed Oct 05 2022 13:58:05.618] LOG [Wed Oct 05 2022 13:58:05.639] LOG [Wed Oct 05 2022 13:58:05.641] LOG [Wed Oct 05 2022 13:58:05.941] LOG [Wed Oct 05 2022 13:58:05.942] LOG [Wed Oct 05 2022 13:58:36.599] LOG [Wed Oct 05 2022 13:58:36.601] LOG [Wed Oct 05 2022 13:58:36.602] LOG [Wed Oct 05 2022 13:58:36.711] LOG [Wed Oct 05 2022 13:58:36.714] LOG [Wed Oct 05 2022 13:58:36.715] LOG [Wed Oct 05 2022 13:58:36.715] LOG [Wed Oct 05 2022 13:58:36.716] LOG [Wed Oct 05 2022 13:58:36.716] LOG [Wed Oct 05 2022 13:58:36.716] LOG [Wed Oct 05 2022 13:58:36.727] LOG [2022-10-05T17:58:02.664Z] calculateRectFromRef - waiting for ref
[2022-10-05T17:58:02.665Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}
[2022-10-05T17:58:02.923Z] calculateRectFromRef - calculated Rect: {"x":0,"y":4000,"width":0,"height":0}
[2022-10-05T17:58:02.957Z] setDefaultDisplayArea - newDisplayArea: {"x":0,"y":0.000055486505743829184,"width":392.7272644042969,"height":802.9091186523438}
[2022-10-05T17:58:02.961Z] setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0}
[2022-10-05T17:58:02.968Z] calculateRectFromRef - waiting for ref
[2022-10-05T17:58:02.969Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":4000,"width":0,"height":0}
[2022-10-05T17:58:02.992Z] measureContent - new requestedContentSize: {"width":90.18181610107422,"height":35.272727966308594} (used to be null)
[2022-10-05T17:58:02.995Z] handleChange - waiting 100ms to accumulate all changes
[2022-10-05T17:58:03.109Z] handleChange - requestedContentSize: {"width":90.18181610107422,"height":35.272727966308594}
[2022-10-05T17:58:03.109Z] handleChange - displayArea: {"x":0,"y":0.000055486505743829184,"width":392.7272644042969,"height":802.9091186523438}
[2022-10-05T17:58:03.109Z] handleChange - fromRect: {"x":0,"y":4000,"width":0,"height":0}
[2022-10-05T17:58:03.110Z] handleChange - placement: "auto"
[2022-10-05T17:58:03.111Z] computeAutoGeometry - displayArea: {"x":0,"y":0.000055486505743829184,"width":392.7272644042969,"height":802.9091186523438}
[2022-10-05T17:58:03.111Z] computeAutoGeometry - fromRect: {"x":0,"y":4000,"width":0,"height":0}
[2022-10-05T17:58:03.112Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"right":{"sizeAvailable":376.7272644042969,"sizeRequested":90.18181610107422,"fits":true,"extraSpace":286.54544830322266},"top":{"sizeAvailable":3983.9999445134945,"sizeRequested":35.272727966308594,"fits":true,"extraSpace":3948.727216547186},"bottom":{"sizeAvailable":-3213.0908258611507,"sizeRequested":35.272727966308594,"fits":false,"extraSpace":-3248.3635538274593}}
[2022-10-05T17:58:03.113Z] computeAutoGeometry - Found best postition for placement: "top"
[2022-10-05T17:58:03.114Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":10,"y":812.9091741388495},"anchorPoint":{"x":26,"y":4000},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":3981.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:03.116Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":10,"y":812.9091741388495},"anchorPoint":{"x":26,"y":4000},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":3981.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:03.122Z] handleChange - animating in
[2022-10-05T17:58:03.123Z] getTranslateOrigin - popoverSize: {"width":90.18181610107422,"height":43.272727966308594}
[2022-10-05T17:58:03.124Z] getTranslateOrigin - anchorPoint: {"x":26,"y":4000}
[2022-10-05T17:58:03.127Z] animateIn - translateStart: {"x":-19.09090805053711,"y":5584.181817835028}
[2022-10-05T17:58:03.127Z] animateIn - translatePoint: {"x":10,"y":812.9091741388495}
[2022-10-05T17:58:03.136Z] calculateRectFromRef - calculated Rect: {"x":96.36363983154297,"y":4080,"width":200,"height":35.6363639831543}
[2022-10-05T17:58:03.146Z] [BasePopover] componentDidUpdate - changedProps: ["fromRect"]
[2022-10-05T17:58:03.147Z] componentDidUpdate - isVisible not changed, handling other changes
[2022-10-05T17:58:03.147Z] handleChange - waiting 100ms to accumulate all changes
[2022-10-05T17:58:03.151Z] Setting up keyboard listeners
[2022-10-05T17:58:03.258Z] handleChange - requestedContentSize: {"width":90.18181610107422,"height":35.272727966308594}
[2022-10-05T17:58:03.259Z] handleChange - displayArea: {"x":0,"y":0.000055486505743829184,"width":392.7272644042969,"height":802.9091186523438}
[2022-10-05T17:58:03.262Z] handleChange - fromRect: {"x":96.36363983154297,"y":4080,"width":200,"height":35.6363639831543}
[2022-10-05T17:58:03.265Z] handleChange - placement: "auto"
[2022-10-05T17:58:03.267Z] computeAutoGeometry - Top/bottom tryping to keep same, geometry: {"popoverOrigin":{"x":151.27273178100586,"y":812.9091741388495},"anchorPoint":{"x":196.36363983154297,"y":4080},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":4061.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:03.269Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":151.27273178100586,"y":812.9091741388495},"anchorPoint":{"x":196.36363983154297,"y":4080},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":4061.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:03.270Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":151.27273178100586,"y":812.9091741388495},"anchorPoint":{"x":196.36363983154297,"y":4080},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":4061.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:03.280Z] handleChange - animating in
[2022-10-05T17:58:03.281Z] getTranslateOrigin - popoverSize: {"width":90.18181610107422,"height":43.272727966308594}
[2022-10-05T17:58:03.282Z] getTranslateOrigin - anchorPoint: {"x":196.36363983154297,"y":4080}
[2022-10-05T17:58:03.285Z] animateIn - translateStart: {"x":151.27273178100586,"y":5664.181817835028}
[2022-10-05T17:58:03.285Z] animateIn - translatePoint: {"x":151.27273178100586,"y":812.9091741388495}
[2022-10-05T17:58:03.299Z] Setting up keyboard listeners
[2022-10-05T17:58:03.325Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1605.8182373046875,"width":90.18181610107422,"height":35.272727966308594}
[2022-10-05T17:58:03.326Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":37.09090805053711,"y":-1572.3636474609375,"width":18.18181800842285,"height":9.818181991577148}
[2022-10-05T17:58:03.626Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1605.8182373046875,"width":90.18181610107422,"height":35.272727966308594}
[2022-10-05T17:58:03.627Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":37.09090805053711,"y":-1572.3636474609375,"width":18.18181800842285,"height":9.818181991577148}
[2022-10-05T17:58:34.277Z] [BasePopover] componentDidUpdate - changedProps: ["verticalOffset"]
[2022-10-05T17:58:34.278Z] componentDidUpdate - isVisible not changed, handling other changes
[2022-10-05T17:58:34.281Z] handleChange - waiting 100ms to accumulate all changes
[2022-10-05T17:58:34.391Z] handleChange - requestedContentSize: {"width":90.18181610107422,"height":35.272727966308594}
[2022-10-05T17:58:34.392Z] handleChange - displayArea: {"x":0,"y":0.000055486505743829184,"width":392.7272644042969,"height":802.9091186523438}
[2022-10-05T17:58:34.392Z] handleChange - fromRect: {"x":96.36363983154297,"y":4080,"width":200,"height":35.6363639831543}
[2022-10-05T17:58:34.393Z] handleChange - placement: "auto"
[2022-10-05T17:58:34.395Z] computeAutoGeometry - Top/bottom tryping to keep same, geometry: {"popoverOrigin":{"x":151.27273178100586,"y":812.9091741388495},"anchorPoint":{"x":196.36363983154297,"y":4080},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":4061.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:34.397Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":151.27273178100586,"y":812.9091741388495},"anchorPoint":{"x":196.36363983154297,"y":4080},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":4061.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:34.397Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":151.27273178100586,"y":812.9091741388495},"anchorPoint":{"x":196.36363983154297,"y":4080},"placement":"top","forcedContentSize":{"width":372.7272644042969,"height":4061.9999445134945},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[2022-10-05T17:58:34.410Z] handleChange - no change

Here's the relevant code from my React component (this is a full screen):

  return (
    <ScrollView>
      <View
        ref={popoverRef}
        renderToHardwareTextureAndroid={true}
        collapsable={false}
        style={{ backgroundColor: '#e5beb0', height: window.height }} // Background color helps see where this view is on screen
        ></View>
      <Popover
        isVisible={true}
        onRequestClose={() => {
          console.log('Closing');
        }}
        popoverStyle={styles.popoverContainerStyle}
        debug={true}
        verticalOffset={2000} // I tried a few values here. Didn't help
        from={popoverRef}>
        <Text style={{...BaseStyles.text14Regular, ...styles.popoverTextStyle}}>
          Hello world!
        </Text>
      </Popover>
    </ScrollView>
  );

It's a bit weird because after trying a few times, it suddenly decided to appear on one attempt. But then with the exact same code, it didn't appear on another attempt so I'm not sure what's going on here.

The text was updated successfully, but these errors were encountered:

SteffeyDev · 2022-10-13T00:44:00Z

From the logs, it looks like the problem is that the anchorPoint has a y-coordinate of 4080, which is well beyond the display area height of 802.9. Try putting the Popover outside of the scroll view, and don't use a verticalOffset unless needed. I would need to see what styles you are applying to be able to tell if any of them are causing issues.

smadan · 2022-10-13T16:06:29Z

No it still doesn't work.

I tried putting it outside the scroll view and removed all custom styling and the vertical offset. Here is the entire screen now:

  return (
    <>
      <ScrollView>
        <View
          ref={popoverRef}
          renderToHardwareTextureAndroid={true}
          collapsable={false}
          style={{
            height: 200,
            backgroundColor: Colors.ERROR_BACKGROUND,
          }}></View>
      </ScrollView>
      <Popover
        isVisible={true}
        onRequestClose={() => {
          console.log('Closing');
        }}
        debug={true}
        from={popoverRef}>
        <Text>Hello world!</Text>
      </Popover>
    </>
  );

Here is what I see on screen:

Logs are showing this:
[Thu Oct 13 2022 12:05:09.818] LOG [2022-10-13T16:05:09.081Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":159.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}

smadan · 2022-10-13T16:34:37Z

Ok some information. I was able to get the popover to show up, but ONLY when the app was deleted and reinstalled into the emulator. Same screen code as above.

Logs when the popover showed up right after re-installing the app:

[Thu Oct 13 2022 12:17:59.923]  LOG      [2022-10-13T16:17:59.233Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"right":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"top":{"sizeAvailable":-16.000055486505744,"sizeRequested":35.272727966308594,"fits":false,"extraSpace":-51.27278345281434},"bottom":{"sizeAvailable":586.9091741388495,"sizeRequested":35.272727966308594,"fits":true,"extraSpace":551.6364461725409}}
[Thu Oct 13 2022 12:17:59.924]  LOG      [2022-10-13T16:17:59.234Z] computeAutoGeometry - Found best postition for placement: "bottom"
[Thu Oct 13 2022 12:17:59.924]  LOG      [2022-10-13T16:17:59.234Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:17:59.925]  LOG      [2022-10-13T16:17:59.235Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:17:59.929]  LOG      [2022-10-13T16:17:59.239Z] handleChange - animating in
[Thu Oct 13 2022 12:17:59.930]  LOG      [2022-10-13T16:17:59.239Z] getTranslateOrigin - popoverSize: {"width":90.18181610107422,"height":43.272727966308594}
[Thu Oct 13 2022 12:17:59.931]  LOG      [2022-10-13T16:17:59.240Z] getTranslateOrigin - anchorPoint: {"x":196.36363220214844,"y":200}
[Thu Oct 13 2022 12:17:59.931]  LOG      [2022-10-13T16:17:59.242Z] animateIn - translateStart: {"x":151.27272415161133,"y":1784.1818178350275}
[Thu Oct 13 2022 12:17:59.932]  LOG      [2022-10-13T16:17:59.242Z] animateIn - translatePoint: {"x":151.27272415161133,"y":200}
[Thu Oct 13 2022 12:17:59.939]  LOG      [2022-10-13T16:17:59.249Z] Setting up keyboard listeners
[Thu Oct 13 2022 12:17:59.964]  LOG      [2022-10-13T16:17:59.277Z] measureContent - Skipping, content size did not change
[Thu Oct 13 2022 12:18:00.267]  LOG      [2022-10-13T16:17:59.579Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1597.8182373046875,"width":90.18181610107422,"height":35.272727966308594}
[Thu Oct 13 2022 12:18:00.268]  LOG      [2022-10-13T16:17:59.581Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":37.09090805053711,"y":-1605.8182373046875,"width":18.18181800842285,"height":10.181818008422852}

However, then I cold-started the app and now the popover did not show. Here are the logs for that. I verified that every single line is EXACTLY the same as the logs above when the popover did show up:

[Thu Oct 13 2022 12:20:40.535]  LOG      [2022-10-13T16:20:39.847Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"right":{"sizeAvailable":-16,"sizeRequested":90.18181610107422,"fits":false,"extraSpace":-106.18181610107422},"top":{"sizeAvailable":-16.000055486505744,"sizeRequested":35.272727966308594,"fits":false,"extraSpace":-51.27278345281434},"bottom":{"sizeAvailable":586.9091741388495,"sizeRequested":35.272727966308594,"fits":true,"extraSpace":551.6364461725409}}
[Thu Oct 13 2022 12:20:40.536]  LOG      [2022-10-13T16:20:39.847Z] computeAutoGeometry - Found best postition for placement: "bottom"
[Thu Oct 13 2022 12:20:40.536]  LOG      [2022-10-13T16:20:39.848Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:20:40.536]  LOG      [2022-10-13T16:20:39.848Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":151.27272415161133,"y":200},"anchorPoint":{"x":196.36363220214844,"y":200},"placement":"bottom","forcedContentSize":{"width":372.7272644042969,"height":592.9091741388495},"viewLargerThanDisplayArea":{"height":false,"width":false}}
[Thu Oct 13 2022 12:20:40.544]  LOG      [2022-10-13T16:20:39.854Z] handleChange - animating in
[Thu Oct 13 2022 12:20:40.545]  LOG      [2022-10-13T16:20:39.855Z] getTranslateOrigin - popoverSize: {"width":90.18181610107422,"height":43.272727966308594}
[Thu Oct 13 2022 12:20:40.546]  LOG      [2022-10-13T16:20:39.855Z] getTranslateOrigin - anchorPoint: {"x":196.36363220214844,"y":200}
[Thu Oct 13 2022 12:20:40.546]  LOG      [2022-10-13T16:20:39.856Z] animateIn - translateStart: {"x":151.27272415161133,"y":1784.1818178350275}
[Thu Oct 13 2022 12:20:40.546]  LOG      [2022-10-13T16:20:39.856Z] animateIn - translatePoint: {"x":151.27272415161133,"y":200}
[Thu Oct 13 2022 12:20:40.551]  LOG      [2022-10-13T16:20:39.864Z] Setting up keyboard listeners
[Thu Oct 13 2022 12:20:40.579]  LOG      [2022-10-13T16:20:39.894Z] measureContent - Skipping, content size did not change
[Thu Oct 13 2022 12:20:40.900]  LOG      [2022-10-13T16:20:40.213Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1597.8182373046875,"width":90.18181610107422,"height":35.272727966308594}
[Thu Oct 13 2022 12:20:40.901]  LOG      [2022-10-13T16:20:40.215Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":37.09090805053711,"y":-1605.8182373046875,"width":18.18181800842285,"height":10.181818008422852}

Removing the scroll view makes no difference - the behavior is the same, ie., the popover shows up after reinstalling the app, but never after that unless I delete and reinstall.

Emulator is Pixel 5 API 31, Gradle 7.1.1, buildToolsVersion = "31.0.0", minSdkVersion = 23, compileSdkVersion = 31, targetSdkVersion = 31

SteffeyDev · 2022-10-20T00:24:22Z

@smadan Does this happen on a real device in addition to the emulator?

smadan · 2022-10-27T15:31:50Z

@SteffeyDev I sadly don't have access to a real, newer Android device to test this on.

smadan · 2022-10-31T20:23:22Z

I just tried on a Galaxy S9, Android 10. It doesn't work - I don't see popovers at all.

SteffeyDev · 2022-10-31T23:09:51Z

I'm honestly not sure what's going on here, and not sure how to debug unless you can reproduce in an expo snack. Are you seeing negative y values on device as well?

RafaelPena31 · 2022-11-04T16:17:13Z

im having this problem too

abouquet · 2022-11-18T07:52:18Z

Having same issue (Galaxy S21), no popover on Android, but still have it on Expo

zakharchenkoAndrii · 2022-12-02T08:33:11Z

Any progress here? I don't see a popover on android after updating to Expo 47.
react-native: 0.70.5

[2022-12-02T09:11:30.786Z] calculateRectFromRef - waiting for ref
[2022-12-02T09:11:30.788Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0}
[2022-12-02T09:11:30.969Z] calculateRectFromRef - rect not found, all properties undefined

SteffeyDev · 2022-12-02T17:01:19Z

@zakharchenkoAndrii are you sure your issue is related? The other users are reporting issues when upgrading to a newer Android version, not when updating to expo. Your's might be a different issue entirely. Does it still work on previous expo version?

zakharchenkoAndrii · 2022-12-05T06:05:43Z

Hi @SteffeyDev! Yes, it is working with expo 46 and react-native 0.69.5. The current behaviour is that popover is not shown and blocks the UI thread without the ability to close it with mode={PopoverMode.RN_MODAL} and with hermes engine enabled
(only on Android)

upd: Hermes is not a culprit here, doesn't work with JSC either way...

upd2: Seems like something with target when Component (TouchableOpacity in my case) passed. Without it or with Rect works.

upd3: seems like it has a problem with starting right with isVisible={true} value. As a workaround, I started with a falsy value, and in useEffect hook changed setState value after 50 millisecsec timeout.

bennidi · 2022-12-22T18:58:43Z

Hey. I am seeing the same error using Expo 47 and RN 0.70.5.
I tried two other libraries offering a similar functionality. All of them work fine on IOS and crash on Android:

react-native-toast-message
react-native-modal-popover

This could be a RN issue. One error I received was about not being able to set some css property on a shadow node.
My technical in-depth knowledge of RN is not enough to interpret that.
But somehow it smells like a bug in the rendering process...

vsofroniev · 2023-01-31T12:04:43Z

I'm was facing the same issue, here's how I managed to solve it.

From the documentation: https://reactnative.dev/docs/view.html#collapsable views are removed if they're only used to layout children or don't draw anything on screen. In my case, the view was purely for layout purposes, and was therefore removed by react-native. In which case, the ref did not exist and the popover was unable to anchor itself.

To fix the issue, add collapsable={false} to the view you wish to anchor from. A potential reason why not all android users face this issue, is that views with styling are not collapsed. In my case, the view had no styling i.e. didn't draw anything on screen.

References:

Thanks to @bennidi for pointing to the other libraries. Hope this helps!

SteffeyDev · 2023-01-31T16:41:17Z

@vsofroniev Thanks for finding this, hopefully this fixes for a few people. I will add this to the README under troubleshooting.

smadan · 2023-01-31T20:20:13Z

@vsofroniev I'm not sure if that's the fix for this issue. See my code in my original post above - I already have collapsable={false} set everywhere. This seems to be a different problem.

ZhengKehang · 2023-03-08T12:46:46Z

I already have collapsable={false} is not work

ingridelin · 2023-03-08T16:35:27Z

I'm seeing the same as zakharchenkoAndrii; I was testing with isVisible set to true, and was not seeing the tooltip. I changed to the below and it works now (note: it only works when using setTimeout, not when calling setVisibility(true) directly):

const [isVisible, setVisibility] = useState(false);

useEffect(() => {
    setTimeout(() => setVisibility(true));
}, [])

EDIT: Only works when collapsable={false} is set

ZhengKehang · 2023-03-09T01:35:12Z

collapsable

sorry is not work

smadan · 2023-05-31T18:35:21Z

Any updates on this? @SteffeyDev ?

dieppe · 2023-07-04T14:43:59Z

diff --git a/dist/Utility.js b/dist/Utility.js
index 35c6c1de3708a82f6453e871c25795d6249e8746..2cd6009a69fd8d5e154ffb097c8e460250b3cb80 100644
--- a/dist/Utility.js
+++ b/dist/Utility.js
@@ -39,8 +39,8 @@ import { Placement, Rect, Size } from './Types';
 import { DEFAULT_ARROW_SIZE, DEFAULT_BORDER_RADIUS } from './Constants';
 export function getRectForRef(ref) {
     return new Promise(function (resolve, reject) {
-        if (ref.current) {
-            NativeModules.UIManager.measure(findNodeHandle(ref.current), function (_1, _2, width, height, x, y) {
+        if (ref.current) {        
+            ref.current.measureInWindow(function (x, y, width, height) {
                 return resolve(new Rect(x, y, width, height));
             });
         }

I had the same problem than mentioned, and this change made the library work properly again on Android without setVisible timeout tricks or collapsable false — btw UIManager.measure and UIManager.measureInWindow are deprecated.

Hope it helps you solve the problem :)

marvinsaga123 · 2023-08-28T16:29:35Z

diff --git a/dist/Utility.js b/dist/Utility.js
index 35c6c1de3708a82f6453e871c25795d6249e8746..2cd6009a69fd8d5e154ffb097c8e460250b3cb80 100644
--- a/dist/Utility.js
+++ b/dist/Utility.js
@@ -39,8 +39,8 @@ import { Placement, Rect, Size } from './Types';
 import { DEFAULT_ARROW_SIZE, DEFAULT_BORDER_RADIUS } from './Constants';
 export function getRectForRef(ref) {
     return new Promise(function (resolve, reject) {
-        if (ref.current) {
-            NativeModules.UIManager.measure(findNodeHandle(ref.current), function (_1, _2, width, height, x, y) {
+        if (ref.current) {        
+            ref.current.measureInWindow(function (x, y, width, height) {
                 return resolve(new Rect(x, y, width, height));
             });
         }

I had the same problem than mentioned, and this change made the library work properly again on Android without setVisible timeout tricks or collapsable false — btw UIManager.measure and UIManager.measureInWindow are deprecated.

Hope it helps you solve the problem :)

This worked for me, great find @dieppe 🙌🏽

zackify · 2023-08-29T15:11:06Z

worked for me too... dang we need to get that merged. thanks

Lihao0510 · 2023-10-27T09:34:09Z

I'm was facing the same issue, here's how I managed to solve it.

From the documentation: https://reactnative.dev/docs/view.html#collapsable views are removed if they're only used to layout children or don't draw anything on screen. In my case, the view was purely for layout purposes, and was therefore removed by react-native. In which case, the ref did not exist and the popover was unable to anchor itself.

To fix the issue, add collapsable={false} to the view you wish to anchor from. A potential reason why not all android users face this issue, is that views with styling are not collapsed. In my case, the view had no styling i.e. didn't draw anything on screen.

References:

https://github.com/doomsower/react-native-modal-popover/issues/43

RCTUIManager.measure not working on Android facebook/react-native#12966

Thanks to @bennidi for pointing to the other libraries. Hope this helps!

Its worked for me, thanks!

BruceWind · 2024-04-12T13:10:15Z

, add collapsable={false}

It works for me too, thanks!

SteffeyDev added doc-update bug labels Jan 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not seeing popover on Android #146

Not seeing popover on Android #146

smadan commented Oct 5, 2022

SteffeyDev commented Oct 13, 2022

smadan commented Oct 13, 2022 •

edited

Loading

smadan commented Oct 13, 2022 •

edited

Loading

SteffeyDev commented Oct 20, 2022

smadan commented Oct 27, 2022

smadan commented Oct 31, 2022

SteffeyDev commented Oct 31, 2022

RafaelPena31 commented Nov 4, 2022

abouquet commented Nov 18, 2022

zakharchenkoAndrii commented Dec 2, 2022 •

edited

Loading

SteffeyDev commented Dec 2, 2022

zakharchenkoAndrii commented Dec 5, 2022 •

edited

Loading

bennidi commented Dec 22, 2022

vsofroniev commented Jan 31, 2023

SteffeyDev commented Jan 31, 2023

smadan commented Jan 31, 2023

ZhengKehang commented Mar 8, 2023

ingridelin commented Mar 8, 2023 •

edited

Loading

ZhengKehang commented Mar 9, 2023

smadan commented May 31, 2023

dieppe commented Jul 4, 2023

marvinsaga123 commented Aug 28, 2023

zackify commented Aug 29, 2023

Lihao0510 commented Oct 27, 2023

BruceWind commented Apr 12, 2024 •

edited

Loading

Not seeing popover on Android #146

Not seeing popover on Android #146

Comments

smadan commented Oct 5, 2022

SteffeyDev commented Oct 13, 2022

smadan commented Oct 13, 2022 • edited Loading

smadan commented Oct 13, 2022 • edited Loading

SteffeyDev commented Oct 20, 2022

smadan commented Oct 27, 2022

smadan commented Oct 31, 2022

SteffeyDev commented Oct 31, 2022

RafaelPena31 commented Nov 4, 2022

abouquet commented Nov 18, 2022

zakharchenkoAndrii commented Dec 2, 2022 • edited Loading

SteffeyDev commented Dec 2, 2022

zakharchenkoAndrii commented Dec 5, 2022 • edited Loading

bennidi commented Dec 22, 2022

vsofroniev commented Jan 31, 2023

SteffeyDev commented Jan 31, 2023

smadan commented Jan 31, 2023

ZhengKehang commented Mar 8, 2023

ingridelin commented Mar 8, 2023 • edited Loading

ZhengKehang commented Mar 9, 2023

smadan commented May 31, 2023

dieppe commented Jul 4, 2023

marvinsaga123 commented Aug 28, 2023

zackify commented Aug 29, 2023

Lihao0510 commented Oct 27, 2023

BruceWind commented Apr 12, 2024 • edited Loading

smadan commented Oct 13, 2022 •

edited

Loading

smadan commented Oct 13, 2022 •

edited

Loading

zakharchenkoAndrii commented Dec 2, 2022 •

edited

Loading

zakharchenkoAndrii commented Dec 5, 2022 •

edited

Loading

ingridelin commented Mar 8, 2023 •

edited

Loading

BruceWind commented Apr 12, 2024 •

edited

Loading