Broken on RN 0.57.0

[reilem]

I think this may be related to #16 . Ever since I updated to react-native 0.57, whenever I try to open the popover the entire app just "freezes". I suspect that there is some sort of invisible overlay blocking all user interaction because I can still shake to refresh and access dev menu.

[SteffeyDev]

What OS, OS version, device, and react-native-popover-view version are you using?

[SteffeyDev]

You are correct about the invisible overlay, the popover is presented invisible first until the dimensions are calculated, and then it is animated in

[reilem]

So I tried on my android device and it is still working there, but on iOS 11.4.1 on a 6th gen iPad 9.7 inch it's not working. It worked before the update when I had react 16.3.1 and react-native 0.55.4. But when I updated to react 16.5.0 and react-native 0.57.0 the issue started.

[gov-ind]

Works on my Android device, but the screen freezes on the Android emulator created from Android Studio (7 inch WSVGA Tablet, API 25).

I'm on ^1.0.9 of react-native-popover-view and 0.55.4 of react-native.

Edit: My bad. It was probably the modal from the previous bundle hanging around. Everything works fine on Android.

On iOS, I have no issues in any simulator running iOS 12, or an iPad running iOS 10.

[benesing]

I'm seeing the same. On my iOS simulator, the popover displays. It also works on my iPhone. But on my iPad Pro, it gets into a loop because this.state.isAwaitingShow never become true.

Keeping this.skipNextDefaultDisplayArea to false fixes the problem on my iPad, but I have not checked other cases with this quick fix.

10.5-Inch iPad Pro running 11.4.1

[SteffeyDev]

I think there are several issue here that are not necessarily related, I will investigate the original issue of not working on 0.57 and see if that fix helps the rest or not. @reilem thank you for providing device details.

[SteffeyDev]

Sorry I've not been able to track this down yet, my test app is built on Expo which can only go to 0.55 currently so I had to pull out an ejected app that I haven't touched for a while.... upgrading broke a lot of things, so once I get it working again I should be able to test this on 0.57

[SteffeyDev]

@reilem If you want to debug a bit on your own, you can turn on the DEBUG flag in the code and watch the console output, or even post it here.

[MLukman]

I'm having the same issue (popover not appearing & blocking interaction) when running on Android device/emulator running android 8.0. The issue does not occur on emulator running android 7.0 nor device running android 6.0.

React-native version is 0.57.3

Here is output of react-native info:

  React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
      Memory: 6.13 GB / 15.73 GB
    Binaries:
      npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5056338

While here is the debugger console log when debug={true}:

componentWillReceiveProps - Awaiting popover show
componentWillReceiveProps - Awaiting popover show
setDefaultDisplayArea - newDisplayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875}
setDefaultDisplayArea - newDisplayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875}
setDefaultDisplayArea (inside calculateRect callback) - fromRect: undefined
setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875}
setDefaultDisplayArea (inside calculateRect callback) - fromRect: undefined
setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: undefined
setDefaultDisplayArea (inside calculateRect callback) - getDisplayArea(): {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875}
setDefaultDisplayArea (inside calculateRect callback) - displayAreaStore: undefined
measureContent - Showing Popover - requestedContentSize: {"height":232.38095092773438,"width":391.6190490722656,"y":0,"x":0}
computeGeometry - displayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875}
computeGeometry - fromRect: {}
measureContent - Showing Popover - geom: {"popoverOrigin":{"x":10,"y":213.52381896972656},"anchorPoint":{"x":205.7142791748047,"y":329.71429443359375},"forcedContentSize":{"width":391.4285583496094,"height":639.4285888671875},"viewLargerThanDisplayArea":{"width":true,"height":false}}
measureContent - Showing Popover - requestedContentSize: {"height":232.38095092773438,"width":391.6190490722656,"y":0,"x":0}
computeGeometry - displayArea: {"x":10,"y":10,"width":391.4285583496094,"height":639.4285888671875}
computeGeometry - fromRect: {}
measureContent - Showing Popover - geom: {"popoverOrigin":{"x":10,"y":213.52381896972656},"anchorPoint":{"x":205.7142791748047,"y":329.71429443359375},"forcedContentSize":{"width":391.4285583496094,"height":639.4285888671875},"viewLargerThanDisplayArea":{"width":true,"height":false}}

The android emulator is having resolution of 1080x1920 so not sure why it says "viewLargerThanDisplayArea":{"width":true,"height":false}

[SteffeyDev]

To address your concern of “viewLargerThanDisplayArea”, the emulator resolution and the number of “points” available are two entirely different things. Though your device is 1080 pixels wide, it is only 411 “points” wide, which is an arbitrary value, so the popover is requesting to be wider than should be allowed. See
https://stackoverflow.com/questions/37248400/what-dimension-units-are-used-in-react-native for more info on this.

However, that is only slightly related to the core issue here. The popover is not showing because 391.6 > 391.4, which means that the Android rendering engine in RN 0.57.3 is doing some sort of point-pixel rounding that my component is not accounting for (allowing for rendering content larger than the maxWidth set by a small percentage). This constitutes a “bug” in my library, so I will address this as best I can and push an update, but I will not have time to do this before next Monday.

A temporarily solution would be for you to restrict the width of the view within the popover to be less than 21 points smaller than the width of the device. Something like maxWidth: Dimensions.get(‘window’).width - 21 on the topmost view inside the Popover.

[MLukman]

Dimensions.get(‘window’).width - 21

The suggested workaround works. Thanks.

[SteffeyDev]

Ok, just published 1.0.14 with a potential fix, if you can remove the workaround and test again to see if it is fixed, that would be awesome.

[MLukman]

Ok, just published 1.0.14 with a potential fix, if you can remove the workaround and test again to see if it is fixed, that would be awesome.

I've verified that the issue is gone with 1.0.14. Thanks for the fix and sorry for the delay.