react-native-modal-popover icon indicating copy to clipboard operation
react-native-modal-popover copied to clipboard

Popover ScrollView Child Can't Scroll – Android Only

Open beeboopx opened this issue 3 years ago • 6 comments

Scrolling working fine on iOS, but not working on Android.

Scrollview is a direct child component inside of Popover.

TouchableOpacity inside of Popover works fine, so i know that it is receiving touch events. However there aren't any ScrollView events registered on Android like onScrollBeginDrag. Scrolling does not work.

Have tried all the tricks like setting flex, setting height, messing around with all the ScrollView and Popover props to see if anything fixes it, but can't find any solution.

Has anybody been able to make Popover with ScrollView child component work on Android? Thanks!

beeboopx avatar Apr 05 '22 05:04 beeboopx

I have this bug too

CDBridger avatar Sep 01 '22 01:09 CDBridger

same issue.

I haven't find any solution but may the point is the conflict between Animate.View and ScrollView.

FE-Sadhu avatar Jan 11 '23 02:01 FE-Sadhu

same issue.

I haven't find any solution but may the point is the conflict between Animate.View and ScrollView.

Finally, I switch to the library 'react-native-popover-view', the content of popover can scroll.

FE-Sadhu avatar Jan 11 '23 03:01 FE-Sadhu

Same bug, android

anastasia-son avatar Feb 22 '23 05:02 anastasia-son

same issue. I haven't find any solution but may the point is the conflict between Animate.View and ScrollView.

Finally, I switch to the library 'react-native-popover-view', the content of popover can scroll.

I was trying to switch to this library because 'react-native-popover-view' had the same Android related issue. Could you tell me how you managed to make it work with that other library?

chmaeuer avatar Jun 20 '23 16:06 chmaeuer

I was able to solve the issue by adding position: "relative" to the contentStyle prop of Popover like so:


<Popover
   fromRect={anchor}
   contentStyle={{
      position: "relative",
      maxHeight: Dimensions.get("screen").height / 2,
   }}
   visible={isPopoverVisible}
>
   <View>
      <Text>
         Select mailbox
      </Text>
   </View>
   <ScrollView>
      {mailboxes}
   </ScrollView>
</Popover>

It seems like ScrollViews aren't scrollable as soon as their direct parent has a position: "absolute" style property which is the case here (for positioning the Popover on the screen).

I am using the maxHeight style property to limit the Popovers height so that the ScrollView actually gets scrollable and doesn't just run out of the screen.

chmaeuer avatar Jun 20 '23 21:06 chmaeuer