Scroll View doesnt scroll if used inside ModalBox

[gs-akhan]

The title explains it .

Thanks

[kinhunt]

+1

[maxs15]

Hmm I guess there is a conflict with the pan responder. Will check that, thanks for the feedback

[maxs15]

I could reproduce this issue. For now you have an easy way to make your ScrollView works, just define the swipeArea property. The touches outside of this area will respond to the ScrollView.

[maxs15]

I would like to implement the possibility to close the modal only if the ScrollView is at the top or reached the end but that's another feature :)

[kinhunt]

@maxs15 tried with swipeToClose={false} swipeArea={0}

problem still exists with ListView inside

[maxs15]

Android or IOS ? It worked on my side running on IOS

[gs-akhan]

IOS

[maxs15]

Could you please check with the Example in the project ? Let's take the first Modal as an example, just add the swipeArea property and wrap the content with a ScrollView. You should have something like that:

<Modal style={[styles.modal, styles.modal1]} ref={"modal1"} swipeToClose={this.state.swipeToClose} swipeArea={50} onClosed={this.onClose} onOpened={this.onOpen} onClosingState={this.onClosingState}>
          <ScrollView contentContainerStyle={styles.modal}>
            <Text style={styles.text}>Basic modal</Text>
            <Button onPress={this.toggleSwipeToClose} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
          </ScrollView>
</Modal>

[gs-akhan]

Sure will check it out.. Thanks

[BenjaminPaap]

I had a similar issue with this modalbox. I just disabled all handlers of the PanResponder when swipeToClose is false and it worked perfectly. I don't know if thats the correct way but none of these hints helped to solve the problem on my iOS device (iPhone 6). You can review my changes here: https://github.com/BenjaminPaap/react-native-modalbox/commit/4903c1945eeca39dbc1be38db2d66bc01c277fa7

I'm handling the open and close completely manually.

[BenjaminPaap]

I have to add, that it is not a simple ListView. Instead it is a RefreshableListView (https://github.com/jsdf/react-native-refreshable-listview)

[maxs15]

I'll check that as soon as I can, looks like the pan responder stop the propagation on the events

[maxs15]

There is indeed an issue with a ListView component inside the ModalBox. For now you could just use the swipeArea property, that way the user will only be able to swipe at the top of the modal. I'll plan to integrate the ListView support but I need some time to think about it. Would love to integrate it working the same way as the Pictures modal works on the Facebook app. When you reach the end of the list, it will slide to the top !

[dcflow]

It's strange that it doesn't respond at all with the ListView. Maybe changing something at contentContainerStyle property of ListView could fix it?

[DurgaManickam]

Mention height for the scrollview it will scroll even with the listview

[maxs15]

I've updated to Example folder with a test using a ScrollView. Everything is working on my side

[Chris-Petty]

Chipping in that on RN 0.30 using a ListView in the modalBox, @DurgaManickam correctly points out that giving the ListView a height in the style makes the ListView scroll as expected.

[azanli]

Wrapping the ScrollView inside a View within the Modal should make it work.

[farzadso]

@maxs15 Thanks for supporting ScrollView, but it only works when the entire modal contents are wrapped with a component. What if we want just one part of our modal contents to be scrollable?

[herarya]

@maxs15 thanks bro, work 💯

[msqar]

Hola, en el modalbox al comienzo de correr la app, me permite el scroll pero luego de soltar no me deja hacer scroll en ninguno de los modales

English bro, use google translate at least... i'll translate it for you this time, i'm argentinian.

"Hi, in modalbox whenever i start the app, it allows me to scroll but after releasing it won't let me scroll in any of the modals that i have"