doomsower / react-native-modal-popover

React-Native pure JS popover that uses Modal
MIT License
322 stars 45 forks source link

Popover ScrollView Child Can't Scroll – Android Only #80

Open beeboopx opened 2 years ago

beeboopx commented 2 years ago

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!

CDBridger commented 1 year ago

I have this bug too

FE-Sadhu commented 1 year ago

same issue.

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

FE-Sadhu commented 1 year ago

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.

anastasia-son commented 1 year ago

Same bug, android

chmaeuer commented 1 year ago

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 commented 1 year ago

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.