Disable ScrollView vertical scroll whilst swipe is happening and vice versa

[ghost]

I am trying to find a way to prevent the ScrollView parent from scrolling when a gesture is being used by Swipeout to swipe. At the moment I can accidentally swipe in both the X & Y directions which makes for a bad user experience.

I tried hooking into the 'scroll' property to enable and disable the ScrollView scrolling depending on whether it gets called with true or false but this doesn't seem to work. Is there an idiomatic way of doing this that I'm missing?

[ixje]

I initially was looking for the same until I realised that the scroll prop could be used for it. This works for me

    constructor(props) {
        super(props)
        this.state = {
            allowVerticalScroll: true
        }
    }

    SwipeScrollEvent(allowParentScroll) {
        if (this.state.allowVerticalScroll != allowParentScroll) {
            this.setState({'allowVerticalScroll': allowParentScroll})
        }
    }

<ScrollView scrollEnabled={this.state.allowVerticalScroll}>
<SomeWrapper scroll={this.SwipeScrollEvent.bind(this)}/>
</ScrollView>

And for the Swipeout in the wrapper class I have

            <Swipeout right={swipeBtns} 
                autoClose={true}
                backgroundColor='white'
                scroll={this.props.scroll}
                >  

What I get is:

1. When I swipe over the x-axis the parent ScrollView does not allow Y-axis scrolling, but the Swipeout menu works. This behaviour remains true until I close the swipe menu. After closing the Swipeout menu Y-axis scrolling of the parent ScrollView works again.
2. When I swipe over the Y-axis of the parent Scrollview I cannot swipe left to open the Swipeout menu.

[ghost]

@ixje That looks pretty similar to what I was trying although I was using a FlatList rather than a ScrollView. FlatList is implemented using ScrollView so I would have thought this would have worked for both. Maybe I was doing something obvious wrong! I've since started using react-native-swipe-list-view in the end because it has this behaviour built in - and a few other built in nice-to-haves. It does however use the old style ListView so I might try this out again at some point.

[ixje]

@richg-rma Makes sense to me what you're saying. Looking at #162 it appears your not alone when it comes to FlatList usage not working as some expect. A recent issue on the react-native repo on this topic might be worth following: facebook/react-native#14240

For what it's worth, I've only tested my solution on ios.

[ghost]

@ixje this is exactly where I got, onPanResponderTerminationRequest: () => false doesn't reject the FlatList gesture for some reason... #182

[gezichenshan]

Here the doc about ScrollView:

Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.

[RoarRain]

The same question, how do you solve it？

[grubstarstar]

I ended up using another module which represented a full list in the end called react-native-swipe-list-view

[RoarRain]

Thank you. I'll take a look

[lpetkovic]

I solved this problem by doing the following:

I've added scroll callback to Swipeout component which first parameter will tell you whether swipeout is being dragged (while dragging swipeout the parameter will be false, and after you finish dragging it will become true). So I figured I could use that to control my FlatList scrolling.

<Swipeout>
	scroll={(scrollEnabled) => { this.setState({ scrollEnabled }); }}
	...
</Swipeout>

And then just added

<FlatList
	scrollEnabled={this.state.scrollEnabled}
	...
</FlatList>

Hope this is what you are looking for!