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.

[maboelsoud]

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