question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting failOffsetY through panViewRef.current.setNativeProps causes activeOffsetX to not work

See original GitHub issue

Description

Setting failOffsetY through panViewRef.current.setNativeProps causes activeOffsetX to not work

Im trying to activate the panGestureHandler only when the scroll offset of my flat list is at 0, The logic i’m using works fine except one thing. As the comments in the code show, when setting failOffsetY: [-0.1, 0.1] it renders activeOffsetX: [-999, 0.1] useless and my x axis does not get activated. Are we not allowed to put these parameters together? I’m having a hard time finding where the issue is arising from.

Steps To Reproduce

Please look at the snack provided: https://snack.expo.dev/@haibert/activeoffsety

Expected behavior

I want to be able to assigning the failOffsetY of the Y axis to [-0.1, 0.1] while also assigning the activeOffsetX of the X axis to [-999, 0.1]

Actual behavior

failOffsetY gets assigned but activeOffsetX does not get assigned. ONLY when I comment out failOffsetY: [-0.1, 0.1] , activeOffsetX: [-999, 0.1] gets assigned.

Snack or minimal code example

https://snack.expo.dev/@haibert/activeoffsety

const toggleGestureActivation = useCallback((shouldLock = false) => {
        panViewRef.current.setNativeProps({
            ...(shouldLock
                ? {
                      activeOffsetY: [-999, 0.1],
                      failOffsetY: [-0.1, 999],
                      //this doesn't run
                      activeOffsetX: [-999, 0.1],
                  }
                : {
                      activeOffsetY: [-100, 100],
                      failOffsetY: [-0.1, 0.1],
                      //this doesn't run
                      activeOffsetX: [-999, 0.1],
                  }),
        })
    }, [])

Package versions

  • React: 16.13.1
  • React Native: 0.63
  • React Native Gesture Handler: ~1.10.2
  • Expo : 42

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
j-piaseckicommented, Apr 21, 2022

Yes, I that was on Android, I tried the iOS and I it looks like it’s working:

https://user-images.githubusercontent.com/21055725/164483065-32365f2f-6a97-4568-843d-00efcdc276f7.mp4

I needed to uncomment the props on PanGestureHandler and changed failOffsetY: [-0.1, 0.1] to failOffsetY: [-20, 20] in the callback. Also, it seems like scrollEventThrottle={0} results in different behavior on iOS, so I had to set it to 1.

0reactions
j-piaseckicommented, Apr 28, 2022

If I understand correctly, it’s working as intended on both platforms so I’ll close the issue. If that’s not the case, feel free to reopen it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

PanGestureHandler | React Native Gesture Handler
failOffsetY ​. When the finger moves outside this range (in points) along Y axis and handler hasn't yet activated it will fail recognizing...
Read more >
Direct Manipulation - React Native
setNativeProps is imperative and stores state in the native layer (DOM, UIView, etc.) and not within your React components, which makes your ...
Read more >
TypeError: e._panGestureHandler.current.setNativeProps is ...
I would suggest either changing the version from "^3.0.9" to "3.0.9" or changing to SDK32. Here's a working Snack: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found