I've tried everything, but still Expected `onGestureHandlerEvent` listener to be a function, instead got a value of `object` type.

[eduardoschneider]

Description

I'm having this issue which was previously reported and I've tried everything I could find, but nothing worked. In my case its Android, every example I've found were using iOS or Web. The "solution" was to add an Animated child to the PanGestureHandler, or wrap with GestureHandlerRootView, both solutions didnt work :(

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (event) => {
      console.log(event);
    },
    onCancel: (event) => {
      console.log(event);
    },
    onActive: (event) => {
      console.log(event);
    },
    onEnd: (event) => {
      console.log(event);
    }
  });

    <GestureHandlerRootView style={styles.container}>
      <PanGestureHandler onGestureEvent={gestureHandler}>
        <Animated.View style={[styles.circle, { transform:[{translateY : translateY}]}]}>
        </Animated.View>
      </PanGestureHandler>
    </GestureHandlerRootView>

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    flexDirection: "column",
    backgroundColor: "#fff"
  },

  circle: {
      width: 150,
      height: 150,
      backgroundColor: "#c00000",
      borderRadius: 100
    },
  });

I also tried adding useAnimatedGestureHandler<PanGestureHandlerGestureEvent>since its typescript, but it also didnt work.

Error: Expected onGestureHandlerEvent listener to be a function, instead got a value of object type.

My package.json looks like this:

{
  "name": "app-tablet-v3",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "@types/react-native": "^0.69.2",
    "axios": "^0.27.2",
    "cpf-cnpj-validator": "^1.0.3",
    "expo": "~45.0.0",
    "expo-app-loading": "~2.0.0",
    "expo-asset": "~8.5.0",
    "expo-av": "~11.2.3",
    "expo-checkbox": "~2.1.0",
    "expo-font": "~10.1.0",
    "expo-linear-gradient": "~11.3.0",
    "expo-navigation-bar": "~1.2.0",
    "expo-radio-button": "^1.0.8",
    "expo-screen-orientation": "~4.2.0",
    "expo-status-bar": "~1.3.0",
    "expo-updates": "~0.13.2",
    "lottie-react-native": "5.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-animatable": "^1.3.3",
    "react-native-circular-progress-indicator": "^4.4.0",
    "react-native-currency-input": "^1.0.1",
    "react-native-dotenv": "^3.4.2",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-marquee-scroll": "^1.0.3",
    "react-native-ratings": "^8.1.0",
    "react-native-reanimated": "~2.9.1",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-scroll-indicator": "^0.1.0",
    "react-native-svg": "12.3.0",
    "react-native-web": "0.17.7",
    "rn-range-slider": "^2.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint-import-resolver-babel-module": "^5.3.1",
    "eslint-plugin-import": "^2.26.0",
    "react-native-paper": "^4.12.2",
    "react-native-svg-transformer": "^1.0.0",
    "typescript": "~4.3.5"
  },
  "private": true
}

Any help would be appreciated.

Steps to reproduce

1. Create a new expo project
2. Install the following dependencies
3. Run the app
4. Live example at: https://snack.expo.dev/@eduschneiders/expected-to-be-a-function

Snack or a link to a repository

https://snack.expo.dev/@eduschneiders/expected-to-be-a-function

Reanimated version

2.8.0

React Native version

0.68.2

Platforms

Android

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

Debug mode

Device

Real device

Device model

Amazon Fire 7

Acknowledgements

Yes

[j-piasecki]

The problem may be with which Animated you're using. In the snack you're importing Animated from react-native, but in order for Reanimated to correctly handle the useAnimatedGestureHandler output you need to import Animated from react-native-reanimated, like so:

import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated'

[eduardoschneider]

The problem may be with which Animated you're using. In the snack you're importing Animated from react-native, but in order for Reanimated to correctly handle the useAnimatedGestureHandler output you need to import Animated from react-native-reanimated, like so:

import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated'

Oh............................................ that was it....... Thank you hahahah