react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

Web velocity is way too small compared to Native

Open karol-bisztyga opened this issue 4 years ago • 1 comments

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

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

karol-bisztyga avatar Jan 20 '21 11:01 karol-bisztyga

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.

m-bert avatar Sep 21 '22 12:09 m-bert

I'll close the issue since the new web implementation is enabled by default starting with 2.10.0.

j-piasecki avatar May 17 '23 10:05 j-piasecki