withRef/simultaneousHandlers usage in RNGH v3

[lovegaoshi]

hi! i wonder whats the correct usage/migration of Gesture.withRef/simultaneousHandlers (which accepts a ref of gesture) in RNGH v3? the new docs have 0 mentions of this. This is relevant in eg. #3595 Many thanks in advance!

[m-bert]

Hi @lovegaoshi! Could you show example which you find confusing to migrate? In general, if you don't use relations hooks, you should be able to pass gestures objects to the relevant config fields, e.g.:

const innerTap = useTapGesture({});
const outerTap = useTapGesture({
  requireToFail: innerTap,
});

[lovegaoshi]

thanks for the response, im specifically looking at withRef as I need to pass it to another legacy prop RNGHScrollView.overrideProps.simutaneousHandlers the goal is to enable both the scrollivew's native handler + an additional handler. specifically my case is I want to use scrollview's pull down to refresh at the beginning + a custom gesture's pull up to refresh at the bottom. my previous testing using simultaneous with nativeGesture and panGesture doesnt work, only via overrideProps.simutaneousHandlers.

[m-bert]

im specifically looking at withRef

In that case it won't work, mixing old API with new hook-based API is not supported 😞

In this situation I see two options:

1. Migrate to new API (in that case usePanGesture)
2. Keep using old API (i.e. LegacyScrollView)

Of course I recommend the first one, but since you already have Gesture Handler 3, using old component for transition period is fine.

[lovegaoshi]

id like to migrate to the new API but whats the equipvalent of RNGHScrollView.overrideProps.simutaneousHandlers? im getting theres no way to get a refObject<panGesture> with v3 which is fine. then i can't use RNGHScrollView.overrideProps.simutaneousHandlers and need the v3 way.

[m-bert]

simultaneousHandlers still exists as a property, it just accepts a hook-based gesture (not ref). So in your case you should migrate Gesture.Pan() to usePanGesture.

[rafaax]

Hi @lovegaoshi, just to add a concrete example to @m-bert's answer, since the v3 docs don't spell out this exact migration.

withRef (and ref-based simultaneousHandlers) belongs to the legacy API, so it can't be mixed with hook-based gestures, as you were told. In v3 you don't pass a ref anymore: you pass the gesture object returned by the hook. Reading the 3.3.0 sources, the relation props are simultaneousWith, requireToFail and block (ExternalRelations), and they are accepted both by the gesture hooks and by the RNGH wrapped components (ScrollView, FlatList, ...).

For "native scroll + pull-up gesture at the bottom" that gives something like:

import { GestureDetector, ScrollView, usePanGesture } from 'react-native-gesture-handler';

const pan = usePanGesture({
  // only react to upward drags; check your own "at bottom" condition here
  onUpdate: (e) => { /* e.translationY < 0 && atBottom.current -> show pull-up indicator */ },
  onDeactivate: () => { /* trigger refresh if the threshold was passed */ },
});

<GestureDetector gesture={pan}>
  <ScrollView
    simultaneousWith={pan}   // replaces overrideProps.simultaneousHandlers + withRef
    onScroll={...}           // track whether you're at the end of the content
    scrollEventThrottle={16}
  />
</GestureDetector>

Notes:

• Relations are made symmetric internally (makeSimultaneousWithSymmetric), so declaring it on one side should be enough.
• The pull-down refresh keeps working through the scroll view's native gesture because it now runs simultaneously with your pan.
• I haven't run this against your SongList (that's a FlashList with renderScrollComponent), so I can't promise it covers every detail there. If it doesn't, share a minimal repro or the exact property you pass and I'll take another look.

[lovegaoshi]

TYSM! I can confirm simultaneousWith is the equivalent v3 migration prop to simutaneousHandlers

[m-bert]

Thank you for clarifying this @rafaax!

I made a mistake saying simultaneousHandlers is still available - I had simultaneousWith in mind, my bad 😅

I've opened #4595 - let me know if it's helpful!