I'm trying to implement a custom, vertical slider in React Native. For this purpose, I'm using a PanResponder. Since the slider is vertical, I'm changing the y value only. To stop the object on slider's borders I'm checking if it has reached any before calling Animated.event.
My slider works fine until I swipe the object very fast. Then onPanResponderMove callback seems to be called too rarely and the object stops outside the track, further than the border.
componentWillMount() { this.panResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, onMoveShouldSetPanResponder: (evt, gestureState) => true, onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onPanResponderGrant: this._handleOnPanResponderGrant.bind(this), onPanResponderMove: this._handleOnPanResponderMove.bind(this), onPanResponderRelease: this._handleOnPanResponderRelease.bind(this) }) } _handleOnPanResponderGrant() { this.state.pan.setOffset({ x: this.state.pan.x._value, y: this.state.pan.y._value }) this.state.pan.setValue({ x: 0, y: 0 }) } _handleOnPanResponderMove(e, gestureState) { // some calculations - seems to be correct since everything is working fine until I swipe very fast if (reachedBorders(...)) { // this takes into account also the direction so it won't get stuck on the border return true } return Animated.event([null, { dy: this.state.pan.y }])(e, gestureState) } _handleOnPanResponderRelease() { this.state.pan.flattenOffset() } What am I doing wrong? Is my approach correct (skipping Animated.event if outside the slider)?
UPDATE:
Probably the problem is that you can't stop the PanResponder move immediately during the gesture as described in this GitHub issue.
0 comments:
Post a Comment