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