#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 22Samuel
@samuel.fm
PR 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
Samuelhmmmm. 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
Samuelwaiiit - 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
Samuelyeah 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 9Samuel3 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 13Samuelupdate: 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 😁
puelocesar.bsky.socialI'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 1Samuelthat’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
1puelocesar.bsky.socialI thought chrome dev tools support was removed from newer versions of react native
At least my setup completely stopped working after I updated
1Samuelno chrome dev tools is the blessed one now if I understand correctly. it *should* work
2puelocesar.bsky.socialgithub.com/react-native...
See the compatibility session:
Chrome Browser DevTools — unsupported
Connecting to React Native via chrome://inspect is no longer
supported.
--
Now you are forced to use the React Native DevTools, which is almost the same, but lacks the profiler
[0.76] React Native DevTools — Issues and Feedback · react-native-community discussions-and-proposals · Discussion #819
Introduction In React Native 0.76, we're shipping the first stable release of React Native DevTools, our new debugging experience for React Native apps using Hermes. React Native DevTools features:...
github.com
Samueloh I see. that's very confusing
anyway the profiler should be in there
Chrome for DevelopersTo help our team investigate the connection issue you're seeing, please file a bug with the details of your setup here: crbug.com/new
Frank CaliseLove a good `sleep` fix
1
Steve SyfuhsTalk to your doctor today if you suffer from laggy drawers
1
alec“the dan in the back of my head” is a wonderful turn of phrase to describe a feeling several thousand react devs have