Remove withDecay velocity fix on Web

[kacperkapusciak]

Summary

In #4270 withDecay rubberBandFactor got fixed on the Web with a fix where velocity got multiplied by 1000 to overcome an issue present in RNGH.

This got addressed in software-mansion/react-native-gesture-handler#2443 and released in Gesture Handler 2.10 thus making the fix unnecessary.

Recordings

Before with RNGH 2.10

Screen.Recording.2023-05-16.at.15.31.30.mov

After with RNGH 2.10

Screen.Recording.2023-05-16.at.15.29.02.mov

Test plan

Run this snippet in WebExample

Code example

import React from 'react';
import {StyleSheet, View} from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withDecay,
} from 'react-native-reanimated';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

const SIZE = 120;

export default function App() {
  const offset = useSharedValue(0);
  const width = useSharedValue(0);

  const onLayout = event => {
    width.value = event.nativeEvent.layout.width;
  };

  const pan = Gesture.Pan()
    .onChange(event => {
      // highlight-next-line
      offset.value += event.changeX;
    })
    .onFinalize(event => {
      // highlight-start
      offset.value = withDecay({
        velocity: event.velocityX,
        rubberBandEffect: true,
        clamp: [-(width.value / 2) + SIZE / 2, width.value / 2 - SIZE / 2],
      });
      // highlight-end
    });

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{translateX: offset.value}],
  }));

  return (
    <GestureHandlerRootView style={styles.container}>
      <View onLayout={onLayout} style={styles.wrapper}>
        <GestureDetector gesture={pan}>
          <Animated.View style={[styles.box, animatedStyles]} />
        </GestureDetector>
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  wrapper: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: SIZE,
    width: SIZE,
    backgroundColor: '#b58df1',
    borderRadius: 20,
    cursor: 'grab',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[piaskowyk]

I created an issue with a solution if someone encounters a problem with this breaking change.