react-native-gesture-handler
react-native-gesture-handler copied to clipboard
Web velocity is way too small compared to Native
Description
Consider the code I posted below. After playing around a little bit I got the following results:
On native, my max was around 11 500 while on the web I got around 50. The velocity values on native/web are not consistent.
I looked around and it seems you use this library for handling events on the web. I noticed the last release of it is from 2016, so it's been a while. Also, I haven't found any information on whether this lib is well-suited for RN, so it might be not. I think the problem lies in the hammer lib as(if I understand this correctly) you receive events from there here.
Therefore I think the velocity values should be properly adjusted or is there a better library to handle events on RN for the web?
Screenshots
Steps To Reproduce
- just use the code I posted on native and on the web
Expected behavior
Velocity values should be similar on different platforms.
Actual behavior
I think the difference between them is way too big.
Snack or minimal code example
import { View, Button } from 'react-native';
import React from 'react';
import { PanGestureHandler } from 'react-native-gesture-handler';
export default function Test() {
let maxVx = 0;
let maxVy = 0;
const handler = (e) => {
const vx = Math.abs(e.nativeEvent.velocityX);
const vy = Math.abs(e.nativeEvent.velocityY);
maxVx = Math.max(maxVx, vx);
maxVy = Math.max(maxVy, vy);
};
return (
<View>
<PanGestureHandler activeOffsetX={[-10, 10]} onGestureEvent={handler}>
<View style={[{ width: 100, height: 100, backgroundColor: 'orange' }]} />
</PanGestureHandler>
<Button title="check" onPress={()=>{
console.log('max', maxVx, maxVy);
}} />
</View>
);
}
Package versions
- React: 16.13.1
- React Native: 0.63.0
- React Native Gesture Handler: 1.9.0
- react-native-web: 0.14.7
Should be fixed in 2.6.1
Note that this change is available in new web implementation. To enable it, call enableExperimentalWebImplementation() in the root of your project.
I'll close the issue since the new web implementation is enabled by default starting with 2.10.0.