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

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

[react-native-bot]

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.