[iOS: Expo 47] velocity is 0 in useAnimatedGestureHandler

[jjenzz]

Description

With Expo 47 on iOS, I'm always getting a 0 value when trying to access the event.velocityY property in useAnimatedGestureHandler.

Steps to reproduce

1. npx create-expo-app reanimated-velocity
2. npx expo install react-native-reanimated
3. npx expo install react-native-gesture-handler
4. update babel.config.js to include react-native-reanimated/plugin
5. add the following code to your App.js and then npm run ios
6. click "Open" and then swipe down on the red box, velocity will alert as 0

import * as React from "react";
import * as ReactNative from "react-native";
import * as GestureHandler from "react-native-gesture-handler";
import Animated, * as Reanimated from "react-native-reanimated";

export default function App() {
  const [open, setOpen] = React.useState(false);
  const translateY = Reanimated.useSharedValue(0);

  const handleGestureEvent = Reanimated.useAnimatedGestureHandler({
    onActive: (event) => (translateY.value = event.translationY),
    onEnd: (event) => {
      Reanimated.runOnJS(alert)(event.velocityY);
      translateY.value = Reanimated.withSpring(0, null, () => {
        return Reanimated.runOnJS(setOpen)(false);
      });
    },
  });

  const boxStyle = Reanimated.useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <GestureHandler.GestureHandlerRootView
      style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
    >
      {open && (
        <GestureHandler.PanGestureHandler onGestureEvent={handleGestureEvent}>
          <Animated.View
            style={[
              boxStyle,
              { width: 300, height: 300, backgroundColor: "red" },
            ]}
          />
        </GestureHandler.PanGestureHandler>
      )}
      <ReactNative.Button title="Open" onPress={() => setOpen(true)} />
    </GestureHandler.GestureHandlerRootView>
  );
}

Snack or a link to a repository

https://github.com/jjenzz/reanimated-velocity

Reanimated version

2.12.0

React Native version

0.70.5

Platforms

iOS

JavaScript runtime

No response

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone X iOS 15.4

Acknowledgements

Yes

[stefanoortisi]

same for me

[tbaustin]

@jjenzz Any feedback from this?

[jjenzz]

@tbaustin nope, nothing to report unfortunately

[nickrugge]

same for me

    "expo": "~48.0.9",
    "react-native": "0.71.4",
    "react-native-reanimated": "~2.14.4",
    "react-native-gesture-handler": "~2.9.0"

[nemrosim]

Same for me (expo 48), event.velocityY will always be zero for iOS simulator;

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, context: any) => {
      context.startY = offset.value;
    },
    onActive: (event, context) => {
      offset.value = event.translationY + context.startY;
    },
    onEnd: (event) => {
      offset.value = withDecay({
        velocity: event.velocityY / 5,
      });
    },
  });

package.json:

"dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "expo": "~48.0.15",
    "react": "18.2.0",
    "react-native": "0.71.7",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-web": "~0.18.10"
...
  },

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // required for reanimated - web
      // https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support/
      '@babel/plugin-proposal-export-namespace-from',
      'react-native-reanimated/plugin',
    ],
  };
};

Works without issues on Android/iOS devices and Web.

[CostasCF]

any updates?

[minawalphonce]

I have managed to make it work by upgrading to sdk 49

    "expo": "49",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",

[dprevost-LMI]

If your problem is iOS only with velocityX and you are also pulling react-native-pager-view >= 6.2.0, your problem might be similar to mine. See callstack/react-native-pager-view#972