React-native: Prop to disable vertical scrolling on FlatList and SectionList while row item is being interacted with

[SamMatthewsIsACommonName]

Description

I'm using the SwipeRow component from React Native Swipe List View, in an attempt to migrate away from ListView as it is becoming deprecated.

However, there doesn't seem to be a way to disable the vertical scrolling on either FlatList or SectionList while the horizontal scrolling of the row item is happening. This makes it very buggy to implement any kind of swipable drawer, as the two animations seem to be fighting each other at times.

Reproduction Steps and Sample Code

import React, { Component } from 'react';
import { FlatList, View, Text, TouchableOpacity } from 'react-native';
import { SwipeRow } from 'react-native-swipe-list-view';

import Item from './myItem';

class MyList extends Component {

  constructor(props){
    super(props);
    this.handleRowPress = this.handleRowPress.bind(this);
    this.renderRow = this.renderRow.bind(this);
  }

  handleRowPress(value) {
    this.props.onSlideButtonPress(value);
  }

  renderRow(item) {
    return (
      <SwipeRow
        disableRightSwipe
        rightOpenValue={-120}
        recalculateHiddenLayout
        tension={20}
      >
        <TouchableOpacity style={styles.row}
          onPress={() => this.handleRowPress(edit)}
        >
          <Text>
            Press Me
          </Text>
        </TouchableOpacity>
        <Item
          item={item}
        />
      </SwipeRow>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.props.dataList}
          removeClippedSubviews={false}
          renderItem={({item}) => this.renderRow(item)}
        />
      </View>
    );
  }
}

Solution

If there was a prop for FlatList / SectionList such as 'verticalScrollingDisabled', this could be set by a panGestureResponder callback on children components, to disable scrolling while they are being interacted with. This would make for a much less buggy experience for the user.

Additional Information

• React Native version: [0.44.2]
• Platform: [both]
• Development Operating System: [macOS]
• Dev tools: [Xcode 8.3.2, Android Studio 2.3.2]

[gezichenshan]

+1
Here the doc about ScrollView:

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

When to support?That will be awesome.

[octopitus]

SwipeableRow provides 2 props onSwipeStart and onSwipeEnd, which can use to manually disable scroll functionality in SectionList/FlatList.

Similar to react-native-swipe-list-view's SwipeRow, they are onRowClose, onRowOpen.

_disableScroll() {
  this._list.getScrollResponder().setNativeProps({
    scrollEnabled: false
  })
}

_enableScroll() {
  this._list.getScrollResponder().setNativeProps({
    scrollEnabled: true
  })
}

<SwipeableRow onSwipeStart={this._disableScroll} onSwipeEnd={this._enableScroll}  />

_list is ref to SectionList/FlatList.

[dangbh1002-org]

Maybe this trick is what you need until the prop vertical={false} is work:
Just rotate FlatList -90deg, and rotate Image 90deg.

<FlatList style={{ transform: [{ rotate: '-90deg'}] }}
       data={this.state.imageArray}
       extraData={this.state}
       renderItem={({item, index}) =>
           <View style={{ transform: [{ rotate: '90deg'}] }}>
               <Image source={{uri: item.uri}}/>
           </View>
       }
/>

[RoarRain]

The same question, how do you solve it？

[theohdv]

@octopitus answer does the job perfectly

[RoarRain]

Thank you very much！

[kimiyang]

I tried to set scrollEnabled={false} for SectionList
worked for me

[lukewlms]

@kimiyang Thanks - scrollEnabled={false] also worked for FlatList!

[DiogoAbu]

scrollEnabled on FlatList did not work for me

[sbkl]

@DiogoAbu where did you put the flag? Just used it and it works perfectly.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.