Skip to content

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

Closed
@dabanlee

Description

@dabanlee

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    API: PanResponderRan CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.Type: QuestionIssues that are actually questions and not bug reports.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions