Not able to drag using onGestureEvent

Here is a minimal reproducible example, lmk if there are any details I’m leaving out. I was trying to recreate the pan gesture example from the course. I’m using the iOS simulator, but I click on the box, drag, and nothing happens. I’m able to log thePanGestureHandler events (onGestureEvent and onHandlerStateChange) and see that it is detecting the pan gesture, but the box doesn’t move. When I use the example from react-native-gesture-handler, it works. I think it might be something to do with the onGestureEvent helper function, but I’m new to the Animated and gesture libraries, and I realize the two examples use different Animated libraries.

package.json

...

    "react": "~16.12.0",
    "react-dom": "~16.12.0",
    "react-native": "~0.61.5",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-redash": "^9.6.0",
...

repro

import React from 'react'
import { StyleSheet, View } from 'react-native'
import Animated, { Value } from 'react-native-reanimated'

import {
  PanGestureHandler,
  State
} from 'react-native-gesture-handler'
import { onGestureEvent } from 'react-native-redash'

function Draggable (props) {
  const state = new Value(State.UNDETERMINED)
  const translationX = new Value(0)
  const translationY = new Value(0)

  const gestureHandler = onGestureEvent({
    state,
    translationX,
    translationY
  })

  const translateX = translationX
  const translateY = translationY

  return (
    <PanGestureHandler
      {...gestureHandler}
    >
      <Animated.View
        style={{
          backgroundColor: 'blue',
          height: 100,
          width: 100,
          transform: [
            { translateX },
            { translateY }
          ]
        }}
      />
    </PanGestureHandler>
  )
}

export default Draggable

[JBaczuk]

@wcandillon thanks for the quick response! That is actually good news, so I’m theoretically doing it right! I am running this in a storybook app so I’m not sure about re-rendering. I used the useValues() helper function and now it appears to work, so you must be correct about that. Thanks for your help, here is the fix:

import { onGestureEvent, useValues } from 'react-native-redash'
...
const [state, translationX, translationY] = useValues([State.UNDETERMINED, 0, 0], [])

[RobertFOConnor]

Thanks @JBaczuk Ran into the same issue following the course. Nothing worse than having exactly what is shown in the video and it not working. I had to modify the fix slightly to exclude the array. const [state, translationX, translationY] = useValues(State.UNDETERMINED, 0, 0);