search

SteffeyDev / react-native-popover-view

A well-tested, adaptable, lightweight <Popover> component for react-native
MIT License
613 stars 92 forks source link

ScrollView is not working in android #160

Open styker-github opened 1 year ago

styker-github commented 1 year ago

Describe the bug When scrollview with lot of content is passed as a children to react-native-popover-view, the scrollview is not scrollable in android but works fine in iOS. This issue started after upgrading react-native version to 0.71.3

Repo link: https://github.com/styker-github/rn-popover-view-issue

Device/Setup Info:

Debug Output LOG [2023-03-28T12:54:48.479Z] [BasePopover] componentDidUpdate - changedProps: ["isVisible"] LOG [2023-03-28T12:54:48.479Z] componentDidUpdate - isVisible changed, now false LOG [2023-03-28T12:54:48.480Z] animateOut - isMounted: true LOG [2023-03-28T12:54:48.480Z] getTranslateOrigin - popoverSize: {"width":174.2857208251953,"height":663.4285888671875} LOG [2023-03-28T12:54:48.480Z] getTranslateOrigin - anchorPoint: {"x":148.28571319580078,"y":93} LOG [2023-03-28T12:54:48.483Z] componentDidUpdate - Hiding popover LOG [2023-03-28T12:54:48.497Z] Tearing down keyboard listeners LOG [2023-03-28T12:54:49.470Z] calculateRectFromRef - waiting for ref LOG [2023-03-28T12:54:49.470Z] calculateRectFromRef - waiting for ref to move from: {"x":0,"y":0,"width":0,"height":0} LOG [2023-03-28T12:54:49.614Z] calculateRectFromRef - calculated Rect: {"x":67.42857360839844,"y":70,"width":80.85713958740234,"height":46} LOG [2023-03-28T12:54:49.786Z] setDefaultDisplayArea - newDisplayArea: {"x":0,"y":0.00003487723211037519,"width":411.4285583496094,"height":683.4285888671875} LOG [2023-03-28T12:54:49.786Z] setDefaultDisplayArea - displayAreaOffset: {"x":0,"y":0} LOG [2023-03-28T12:54:49.793Z] [BasePopover] componentDidUpdate - changedProps: ["displayArea"] LOG [2023-03-28T12:54:49.793Z] componentDidUpdate - isVisible not changed, handling other changes LOG [2023-03-28T12:54:49.795Z] handleChange - no requestedContentSize, exiting... LOG [2023-03-28T12:54:49.797Z] calculateRectFromRef - waiting for ref LOG [2023-03-28T12:54:49.797Z] calculateRectFromRef - waiting for ref to move from: {"x":67.42857360839844,"y":70,"width":80.85713958740234,"height":46} LOG [2023-03-28T12:54:49.812Z] measureContent - new requestedContentSize: {"width":174.2857208251953,"height":1905.7142333984375} (used to be null) LOG [2023-03-28T12:54:49.819Z] handleChange - waiting 100ms to accumulate all changes LOG [2023-03-28T12:54:49.930Z] handleChange - requestedContentSize: {"width":174.2857208251953,"height":1905.7142333984375} LOG [2023-03-28T12:54:49.931Z] handleChange - displayArea: {"x":0,"y":0.00003487723211037519,"width":411.4285583496094,"height":683.4285888671875} LOG [2023-03-28T12:54:49.932Z] handleChange - fromRect: {"x":67.42857360839844,"y":70,"width":80.85713958740234,"height":46} LOG [2023-03-28T12:54:49.932Z] handleChange - placement: "auto" LOG [2023-03-28T12:54:49.933Z] computeAutoGeometry - displayArea: {"x":0,"y":0.00003487723211037519,"width":411.4285583496094,"height":683.4285888671875} LOG [2023-03-28T12:54:49.933Z] computeAutoGeometry - fromRect: {"x":67.42857360839844,"y":70,"width":80.85713958740234,"height":46} LOG [2023-03-28T12:54:49.934Z] computeAutoGeometry - List of available space: {"left":{"sizeAvailable":67.42857360839844,"sizeRequested":174.2857208251953,"fits":false,"extraSpace":-106.85714721679688},"right":{"sizeAvailable":263.1428451538086,"sizeRequested":174.2857208251953,"fits":true,"extraSpace":88.85712432861328},"top":{"sizeAvailable":69.99996512276789,"sizeRequested":1905.7142333984375,"fits":false,"extraSpace":-1835.7142682756696},"bottom":{"sizeAvailable":567.4286237444196,"sizeRequested":1905.7142333984375,"fits":false,"extraSpace":-1338.285609654018}} LOG [2023-03-28T12:54:49.934Z] computeAutoGeometry - Found best postition for placement: "right" LOG [2023-03-28T12:54:49.934Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":148.28571319580078,"y":10.00003487723211},"anchorPoint":{"x":148.28571319580078,"y":93},"placement":"right","forcedContentSize":{"width":253.1428451538086,"height":663.4285888671875},"viewLargerThanDisplayArea":{"height":true,"width":false}} LOG [2023-03-28T12:54:49.935Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":148.28571319580078,"y":10.00003487723211},"anchorPoint":{"x":148.28571319580078,"y":93},"placement":"right","forcedContentSize":{"width":253.1428451538086,"height":663.4285888671875},"viewLargerThanDisplayArea":{"height":true,"width":false}} LOG [2023-03-28T12:54:49.951Z] handleChange - delaying showing popover because viewLargerThanDisplayArea LOG [2023-03-28T12:54:49.980Z] measureContent - new requestedContentSize: {"width":174.2857208251953,"height":663.4285888671875} (used to be {"width":174.2857208251953,"height":1905.7142333984375}) LOG [2023-03-28T12:54:49.988Z] handleChange - waiting 100ms to accumulate all changes LOG [2023-03-28T12:54:50.096Z] handleChange - requestedContentSize: {"width":174.2857208251953,"height":663.4285888671875} LOG [2023-03-28T12:54:50.097Z] handleChange - displayArea: {"x":0,"y":0.00003487723211037519,"width":411.4285583496094,"height":683.4285888671875} LOG [2023-03-28T12:54:50.097Z] handleChange - fromRect: {"x":67.42857360839844,"y":70,"width":80.85713958740234,"height":46} LOG [2023-03-28T12:54:50.097Z] handleChange - placement: "auto" LOG [2023-03-28T12:54:50.097Z] computeAutoGeometry - Left/right tryping to keep same, geometry: {"popoverOrigin":{"x":148.28571319580078,"y":10.00003487723211},"anchorPoint":{"x":148.28571319580078,"y":93},"placement":"right","forcedContentSize":{"width":253.1428451538086,"height":663.4285888671875},"viewLargerThanDisplayArea":{"height":false,"width":false}} LOG [2023-03-28T12:54:50.097Z] computeGeometry - initial chosen geometry: {"popoverOrigin":{"x":148.28571319580078,"y":10.00003487723211},"anchorPoint":{"x":148.28571319580078,"y":93},"placement":"right","forcedContentSize":{"width":253.1428451538086,"height":663.4285888671875},"viewLargerThanDisplayArea":{"height":false,"width":false}} LOG [2023-03-28T12:54:50.098Z] computeGeometry - final chosen geometry: {"popoverOrigin":{"x":148.28571319580078,"y":10.00003487723211},"anchorPoint":{"x":148.28571319580078,"y":93},"placement":"right","forcedContentSize":{"width":253.1428451538086,"height":663.4285888671875},"viewLargerThanDisplayArea":{"height":false,"width":false}} LOG [2023-03-28T12:54:50.106Z] handleChange - animating in LOG [2023-03-28T12:54:50.107Z] getTranslateOrigin - popoverSize: {"width":174.2857208251953,"height":663.4285888671875} LOG [2023-03-28T12:54:50.107Z] getTranslateOrigin - anchorPoint: {"x":148.28571319580078,"y":93} LOG [2023-03-28T12:54:50.108Z] animateIn - translateStart: {"x":61.142852783203125,"y":1224.1428484235491} LOG [2023-03-28T12:54:50.109Z] animateIn - translatePoint: {"x":148.28571319580078,"y":10.00003487723211} LOG [2023-03-28T12:54:50.117Z] Setting up keyboard listeners LOG [2023-03-28T12:54:50.483Z] animateIn - onOpenComplete - Calculated Popover Rect: {"x":0,"y":-1462.857177734375,"width":174.2857208251953,"height":663.4285888671875} LOG [2023-03-28T12:54:50.484Z] animateIn - onOpenComplete - Calculated Arrow Rect: {"x":0,"y":-1380,"width":2,"height":2}

styker-github commented 1 year ago

Repo link: https://github.com/styker-github/rn-popover-view-issue

fizawisedv commented 1 year ago

I am facing the same issue in the latest versions as well. react-native-popover@5.1.7 and react-native@0.71.7. @styker-github did you find any solution?

styker-github commented 1 year ago

@fizawisedv No. I could not find any solution yet. If your requirements are different, you can try replacing popover with dropdown component if that helps

cumali-demir commented 1 year ago

@SteffeyDev Do you have any idea? (include workaround)

SteffeyDev commented 1 year ago

I'm not able to work on this library right now. I may consider and test PRs, but will not be doing any debugging myself.

FabianTauriello commented 1 year ago

I have this issue as well - React Native v0.71.10 and react-native-popover-view v5.1.7. Anyone found a solution?

fizawisedv commented 1 year ago

This issue got fixed for me after upgrading to react-native 0.72. I saw some relative changes and fixes in this version's changelogs. If you are on expo, upgrade to expo SDK 49.

HadiModarres commented 1 year ago

This issue got fixed for me after upgrading to react-native 0.72. I saw some relative changes and fixes in this version's changelogs. If you are on expo, upgrade to expo SDK 49.

I upgraded to expo sdk 49, but issue seems to be there still, any tips?

SalaSuresh commented 1 year ago

I got the same issue in Android only, the same implementation is working as expected in iOS. Any solution?

SalaSuresh commented 1 year ago

Is there any solution to this?

SalaSuresh commented 1 year ago

I have downgraded the package to 5.1.0 and no issue for me.

TimaRejepgulyew commented 8 months ago

I have downgraded the package to 4.0.3 and not issue for me.

imkiran22 commented 8 months ago

I am also facing the same issue only in android. Was this fixed ?

itzvarundv commented 8 months ago

@imkiran22 Did you try in React native 0.72 or above?

imkiran22 commented 8 months ago

@itzvarundv yes even in latest version I face the same problem

phamtandat1997 commented 1 month ago

Is there any solution to this?