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

why both onTouchStart and onTouchEnd has two executions in a encapsulation of PanResponder #24131

Closed
dabanlee opened this issue Mar 25, 2019 · 1 comment
Labels
API: PanResponder Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot. Type: Question Issues that are actually questions and not bug reports.

Comments

@dabanlee
Copy link

dabanlee commented Mar 25, 2019

"react": "16.8.3",
"react-native": "0.59.1",

I just made a simple encapsulation of PanResponder.

// Eventify
import React from 'react';
import { View, PanResponder } from 'react-native';

export default function Eventify(props) {
    const { onTouchStart, onTouching, onTouchEnd } = props;
    const responder = PanResponder.create({
        // ...
        onPanResponderGrant: () => onTouchStart(),
        onPanResponderMove: () => onTouching(),
        onPanResponderRelease: (_, gestureState) => {
            console.log('onPanResponderRelease');
            onTouchEnd(gestureState);
        },
    });
    return (
        <View
             {...props}
             {...responder.panHandlers}
        >{props.children}</View>
    );
}
import React, { Component } from 'react';
import { View } from 'react-native';
import Eventify from '../components/Eventify';

export default class extends Component {
    onTouchStart = (event) => {
        console.log('onTouchStart');
    }
    onTouching = (event) => {
        console.log('onTouching');
    }
    onTouchEnd = (event) => {
        console.log('onTouchEnd');
    }
    render() {
        return (
            <Eventify
                onTouchStart={this.onTouchStart}
                onTouching={this.onTouching}
                onTouchEnd={this.onTouchEnd}
            >
                <View style={styles.view}></View>
            </Eventify>
        )
    }
}

const styles = rnc`
view {
    width: 375;
    height: 200;
    background-color: #ddd;
}
`;

When I tap the Eventify component, I got the following logs:

onTouchStart              Demo.js:9
onTouchStart              Demo.js:9
onPanResponderRelease     Event.js:16
onTouchEnd                Demo.js:15
onTouchEnd                Demo.js:15

The method onTouchStart and onTouchEnd has two execution. And the method onPanResponderRelease just once execution.

It's troubling me.

@dabanlee dabanlee added the Type: Question Issues that are actually questions and not bug reports. label Mar 25, 2019
@react-native-bot
Copy link
Collaborator

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

👉 Click here if you want to report a reproducible bug or regression in React Native.

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Resolution: No Template labels Mar 25, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Mar 25, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 25, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: PanResponder Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot. Type: Question Issues that are actually questions and not bug reports.
Projects
None yet
Development

No branches or pull requests

2 participants