[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.

see https://github.com/jbuffin/ListViewPanResponderBug for example code

Try onMoveShouldSetPanResponderCapture and onStartShouldSetPanResponderCapture
return true will capture the responder

@magicismight

@magicismight If I understand on*ShouldSetPanResponderCapture its purpose is to capture the responder at the higher level. The default behavior is that the lowest level responder should capture the responder and not bubble up to the higher level. That is exactly the bug here. The ListView is allowing the responder to bubble up to the View's PanResponder

+1

In your outer View component style, set flex: 1. This solved it for me.

if you look at https://github.com/jbuffin/ListViewPanResponderBug/blob/master/index.ios.js, you will see that I already have flex: 1 set on the outer View component.

@jbuffin

@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.

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.

Navigation Menu

Repository navigation

[ListView] releases responder to parent #1847

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[ListView] releases responder to parent #1847

Description

Activity

jbuffin commented on Jul 2, 2015

magicismight commented on Jul 3, 2015

jbuffin commented on Jul 3, 2015

LightningK0ala commented on Nov 12, 2015

LightningK0ala commented on Nov 12, 2015

jbuffin commented on Nov 12, 2015

christopherabouabdo commented on Jan 28, 2016

mkonicek commented on Jul 29, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions