[ListView] releases responder to parent

I have a ListView nested inside a View.

<View style={styles.container} {...this._panGesture.panHandlers}>
  <ListView
    ref="list"
    dataSource={this.state.dataSource}
    renderRow={this._renderRow}
    style={styles.list}
  />
</View>

The outer View has a PanResponder. The ListView is not blocking the parent from taking the gesture responder but is releasing control to the parent View on move which causes the ListView to not be scrollable.

[christopherabouabdo]

@jbuffin I ran into this issue today and found that if you overwrite a couple of the responders on the ListView’s ScrollResponder you can convince it to hold on to the gesture. I added a few lines to your componentDidMount function that will tell the ListView to capture all gestures by default and to deny any termination requests unless you’re scrolled to the top of the list. You can swap the logic in scrollResponderHandleTerminationRequest to handle whatever case you need.

componentDidMount() {
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(new Array(25).fill('hello')),
  });

  // Tell ListView not to give up the gesture so easy
  Object.assign(this.refs.list.getScrollResponder(), {
    scrollResponderHandleStartShouldSetResponder: () => true,
    scrollResponderHandleTerminationRequest: () => {
      // Release the gesture if scroll content is at the top
      return this.refs.list.scrollProperties.offset < 1
    },
  });
},

EDIT: I swapped in scrollResponderHandleStartShouldSetResponder in place of scrollResponderHandleStartShouldSetResponderCapture so you don’t end up eating up all the touch events from child elements in the ListView.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don’t worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/listview-releases-responder-to-parent

ProductPains helps the community prioritize the most important issues thanks to its voting feature. It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless Product Pains has been very useful in highlighting the top bugs and feature requests: https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix. We’re a small team and rely on the community for bug fixes of issues that don’t affect fb apps.