React-native: PanResponder onPanResponderRelease doesn't calls on Android

[shahen94]

I have this code in my render function.

<Animated.View
        style={[styles.wrap, { left }]}
        {...this.scrollResponder.panHandlers}
      >
        {initialRender &&
          <View style={styles.wrap} {...this.listViewResponder.panHandlers}>
            <ListView
              ref={ref => this.listView = ref}
              onScroll={this.handleScroll}
              dataSource={posts}
              renderRow={this.renderRow}
              renderSectionHeader={this.renderHeader}
              onEndReachedThreshold={300}
              onEndReached={this.getPosts}
              enableEmptySections={true}
              refreshControl={
                <RefreshControl
                  refreshing={refreshing}
                  onRefresh={this.onRefresh}
                />
              }
            />
            {!onProfile && this.renderSettings()}
          </View>
        }
        {this.renderComments()}
        {loading && !refreshing && <Loading />}
      </Animated.View>

componentWillMount() {
    this.listViewResponder = PanResponder.create({
      onMoveShouldSetPanResponderCapture: this.setMove,
      onPanResponderMove: this.handleMove,
      onPanResponderRelease: this.handleMoveEnd,
      onPanResponderTerminationRequest: () => false
    });
    this.scrollResponder = PanResponder.create({
      onStartShouldSetPanResponderCapture: (e) => e.nativeEvent.pageY < THUMB_SIZE,
      onPanResponderRelease: this.handlePress,
    });
  }

It's works fine on iOS,
But on Android onPanResponderRelease doesn't calls every time.

[smallpath]

Hello, on Android, onPanResponderTerminate will be called rather than onPanResponderRelease, you can add following statement to make it work

onPanResponderTerminate: this.handleMoveEnd

[mikeygee]

I am also having an issue with Android only. In my case, I am putting pan responder handlers on a ListView. It detects my gesture starting, but if the gesture also scrolls the list view, it seems to stop responding (stops calling onPanResponderMove and also never calls onPanResponderTerminate or onPanResponderRelease). It works fine on iOS. For Android, it seems to only work on non-scrolling views.

[viix]

+1

[AlbertBrand]

As a workaround, I found out that you should add the panResponders to an inner view of a ScrollView. An Android listview/scrollview natively intercepts touches which kills JS touch events on the listview/scrollview and its parents but not on any children.

[shahen94]

@AlbertBrand Thank you for your feedback.
But in that case how we can render row , header, separator etc. ?

[AlbertBrand]

Sorry, my bad, my proposed solution only works for ScrollViews, not ListViews:
<ScrollView><View {...panResponder.panHandlers}>[children]</View></ScrollView>.

But I suspect that the following will work: add the panHandlers on all the inner views rendered in renderRow and renderSectionHeader. Also you should add onPanResponderTerminationRequest() => false to the panresponder to make sure you're taking over touch events. That's what you're trying to do, right?

[shahen94]

@AlbertBrand Yes, That's it.
But it didn't help me.

[Mohamed-Abo-El-Soud]

I'm having a similar issue here. Testing on an iPhone simulator the onPanResponderRelease calls but doesn't on my android phone. Is this not implemented on the native side?

[shahen94]

@Mohamed-Abo-El-Soud It's implemented, Looks like it's fixed in this version.

[reinisseredzins]

+1

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.