#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>
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:p2cp5gopk7mgjegy6wadk3ep/bafkreiaziaxbybpj3gx62iea7pynsa5rubsykhetq4nawbmbxbxrjpb2tu "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 2 22PR here
the dan in the back of my head says it does not pass the vibe check but I'm frankly out of ideas at this point
github.com/bluesky-soci...
[Perf] Fix drawer jank issue (maybe) by mozzius · Pull Request #8947 · bluesky-social/social-app
The cause of the drawer jank is due to our use of the drawer gesture, as we use it to set requireExternalGestureToFail on the main home screen pager.
Unfortunately, the drawer gesture is in a useMe...
github.com
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
waiiit - it doesn't use the final translation value. it might be a one line patch fix 🤦♂️
[Perf] Better fix for drawer jitter by mozzius · Pull Request #8949 · bluesky-social/social-app
Better fix for #8947
I found a better fix for the jitter issue! While #8947 improves things by reducing the amount of work the device is doing and thus hiding the problem better, the real issue is ...
github.com
Samuel
@samuel.fm
update: I was completely wrong and a future version of React Navigation already has the fix
Samuel@samuel.fm· 2 Sept 2025I 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 😁