Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PanResponder not work for Android when the target View is outside the ScrollView #26082

Closed
Ayaybob opened this issue Aug 16, 2019 · 2 comments
Closed
Labels
API: PanResponder Bug Component: ScrollView Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@Ayaybob
Copy link

Ayaybob commented Aug 16, 2019

onMoveShouldSetPanResponder/onMoveShouldSetPanResponderCapture/onPanResponderTerminationRequest/onShouldBlockNativeResponder not work in scrollview's outer view.
When the finger is dragged quickly on the ScrollView, The move responder of the view is quickly snatched away by the ScrollView(onPanResponderGrant -> onShouldBlockNativeResponder return true -> onPanResponderMove -> onPanResponderTerminate)

React Native version:

  React Native Environment Info:
    System:
      OS: Windows 7
      CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
      Memory: 6.94 GB / 15.88 GB
    Binaries:
      Node: 10.16.0 - F:\develop\js\node\node-v10.16.0-win-x64\node.EXE
      Yarn: 1.16.0 - F:\develop\js\node\node-v10.16.0-win-x64\yarn.CMD
      npm: 6.9.0 - F:\develop\js\node\node-v10.16.0-win-x64\npm.CMD
"react": "16.8.3",
"react-native": "0.59.8",

Steps To Reproduce

1.Navigate to the TestPage;
2.Quickly drag fingers on the ScrollView.

Describe what you expected to happen:
The ScrollView remains unchanged. The outer view handle move event in full, the background color of the outer View changes from light blue to blue, from blue to black and finally back to light blue.

Snack, code example, screenshot, or link to a repository:

import React, { Component } from 'react';
import { View, ScrollView, PanResponder } from 'react-native'
import { Log } from '../../common/Log';

export default class TestPage extends Component {
    state = {
        subBg: "lightgreen",
        bg: "lightblue",
    }

    render() {
        const _panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
            onPanResponderGrant: (evt, gestureState) => {
                Log.info("---------------------------------onPanResponderGrant");
                this.setState({ bg: "blue" })
            },
            onPanResponderMove: (evt, gestureState) => {
                Log.info("---------------------------------onPanResponderMove");
                this.setState({ bg: "black" })
            },
            onPanResponderRelease: (evt, gestureState) => {
                Log.info("---------------------------------onPanResponderRelease");
                this.setState({ bg: "lightblue" })
            },
            onPanResponderTerminationRequest: (evt, gestureState) => {
                const value = false;
                Log.info("---------------------------------onPanResponderTerminationRequest return " + value);
                return value
            },
            onShouldBlockNativeResponder: (evt, gestureState) => {
                const value = true;
                Log.info("---------------------------------onShouldBlockNativeResponder return " + value);
                return value;
            },
            onPanResponderTerminate: (evt, gestureState) => {
                Log.info("---------------------------------onPanResponderTerminate ");
            },
        });
        return (
            <View style={{ flex: 1 }}>
                <View {..._panResponder.panHandlers} style={{ flex: 1, backgroundColor: this.state.bg, paddingBottom: 100, paddingRight: 20 }}>
                    <ScrollView style={{ backgroundColor: this.state.subBg, height: 650, width: "100%" }}>
                        <View style={{ backgroundColor: "red", height: 300, width: "100%" }} />
                        <View style={{ backgroundColor: "pink", height: 300, width: "100%" }} />
                        <View style={{ backgroundColor: "red", height: 300, width: "100%" }} />
                        <View style={{ backgroundColor: "pink", height: 300, width: "100%" }} />
                        <View style={{ backgroundColor: "red", height: 300, width: "100%" }} />
                        <View style={{ backgroundColor: "pink", height: 300, width: "100%" }} />
                    </ScrollView>
                </View>
            </View>
        );
    }
}
@stale
Copy link

stale bot commented Nov 14, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Nov 14, 2019
@stale
Copy link

stale bot commented Nov 21, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Nov 21, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Nov 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: PanResponder Bug Component: ScrollView Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

2 participants