Samuel
@samuel.fm
#reactnative question: is this an acceptable way to use RNGH? I don't want the identity of `nativeGesture` to change, so as `drawerGesture` changes I just keep adding them endlessly in an effect seems cursed but fixes a gnarly perf problem!
function DrawerGestureRequireFail({children}: {children: React.ReactNode}) {
  const drawerGesture = useContext(DrawerGestureContext)

  const nativeGesture = useMemo(() => Gesture.Native(), [])

  // the drawer gesture identity changes whenever the drawer opens/closes,
  // but we don't want the GestureDetector to rerender when that happens
  // therefore we just keep adding the gestures every time it changes to the same
  // native gesture -sfn
  useEffect(() => {
    if (drawerGesture) {
      nativeGesture.requireExternalGestureToFail(drawerGesture)
    }

    // TODO: figure out how to clean this up
  }, [drawerGesture, nativeGesture])

  return <GestureDetector gesture={nativeGesture}>{children}</GestureDetector>
} 2 22
Samuel
I can't tell if it's a problem that it'll leave a pile dead gestures attached to it. like I guess they'll never be garbage collected
2 2
Samuel
hmmmm. the real question is: why is something that should be entirely UI thread getting janked up by the JS thread? looking at the drawer code, it looks like it calls `runOnJS` *prior* to triggering the animation. maybe we should start the anim first also, these are optional callbacks 🤔
react-navigation/packages/react-native-drawer-layout/src/views/Drawer.native.tsx at main · react-navigation/react-navigation
Routing and navigation for React Native and Web apps - react-navigation/react-navigation
github.com
1 2
Samuel
yeah lol this completely works on device. love a one-liner will open a pr with react navigation and finally end the scourge of every react native app having laggy drawers 😇
2 9
Samuel
3 lessons here 1. remember to profile your stuff 2. profiling isn’t everything, think deeply about what’s *actually* going on 3. if your fix is suspicious (telltale signs: useEffect, setTimeout, eslint-ignore) it probably is not the optimal solution, and you should keep digging
4 2 13
Samuel
update: I was completely wrong and a future version of React Navigation already has the fix
Samuel@samuel.fm· 2 Sept 2025
I was wrong. it was a third thing: the drawer would start animating, it would change the `open` prop, and then an effect would fire starting the animation again (hence jittering back to a previous position) luckily has already been fixed upstream 😁
3
puelocesar.bsky.social
I'm currently struggling with profiling after latest react native updates. Before, I would connect with normal chrome dev tools, and get this beautiful flame chart, which was very good to find bottlenecks in the legacy JS code I maintain. Now, that's gone, and the new one works very differently
1 1
Samuel
that’s not the react profiler, that’s the chrome profiler. I also had this issue - you need to make sure the react devtools are installed in chrome for all profiles
1
puelocesar.bsky.social
I thought chrome dev tools support was removed from newer versions of react native At least my setup completely stopped working after I updated
1
Samuel
no chrome dev tools is the blessed one now if I understand correctly. it *should* work
2
2 more replies
alec
“the dan in the back of my head” is a wonderful turn of phrase to describe a feeling several thousand react devs have
Krzysztof Magiera
If the drawer changes frequently this could be a problem. The native gesture will be accumulating all the previous drawer gesture references which may become too big. It actually only keeps the id so each one wont contribute a lot but if it grows indefinitely it could be a problem
1 1
Krzysztof Magiera
Another way to do it is to keep the drawer gesture references which may stable too with useMemo and only co figure it once. You can reassign the gesture instance to new components and I think you should be able to event have it used in two different components at the same time
1 1
Samuel
unfortunately the drawer gesture is not stable, it changes every time the drawer opens and closes luckily I think that’s fine, the issue I was looking for (the drawer jittering) was actual an unrelated animation problem. The perf problem here is actually fine to keep around
1
Samuel
ah ok never mind then. the issue is, the drawer gesture needs the `open` state in the onEnd handler, and thus `open` is a dependency of the gesture's useMemo. every time the drawer opens and closes, the gesture needs to be recreated in order to pass in the `open` state
1
Samuel
ah ok I was being dumb - I just needed to memoize the component that the GestureDectector was wrapping and it’s all good