Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes a hot reload issue in React Native Gesture Handler where worklets referenced stale callbacks after hot reload. The problem occurred because the callbacks object was rebuilt on hot reload while worklets were not, causing them to reference callbacks that no longer existed.
Changes:
- Added a
didUpdateHandlersflag to track when gesture handlers are updated within a render cycle - Modified the
rebuildparameter passed to Reanimated'suseEventto include thedidUpdateHandlersflag - Removed unnecessary blank line for code formatting
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
I'm not a fan of adding workarounds like that unless necessary. You mentioned some time ago that you found a bug in worklets. Did it lead anywhere? |
I've created a PR to Reanimated with a bugfix in |
) ## Description Fast refresh was able to make gestures unresponsive - Gesture Handler uses `useMemo` to store the handler tag, which gets invalidated on the fast refresh. Reanimated's `useHandler`/`useEvent` preserves their internal state, and the worklet event handler didn't rebuild. This caused a gesture with a new tag to use the event handler built for the previous tag, which was ignoring all incoming events. This PR fixes this by tracking handler tag changes and rebuilding the event handler when it changes. Supersedes #3997 ## Test plan <details> <summary>File1.tsx</summary> ```jsx import React from 'react'; import { View } from 'react-native'; import { GestureDetector, useTapGesture } from 'react-native-gesture-handler'; function Test() { const gesture = useTapGesture({ onActivate: () => { console.log('onActivate'); }, }); const COMMENT_THIS = 2; return ( <GestureDetector gesture={gesture}> <View style={{ width: 100, height: 100, backgroundColor: 'red' }} /> </GestureDetector> ); } export default Test; ``` </details> <details> <summary>File2.tsx</summary> ```jsx import React from 'react'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import Test from './File1'; function Example() { return ( <GestureHandlerRootView> <Test /> </GestureHandlerRootView> ); } export default Example; ``` </details> 1. Navigate to `File2` 2. Verify that tap works 3. Comment `COMMENT_THIS` and save `File1` 4. Check whether the tap works
Description
On hot reload, with reanimated turned on. The first time hot reloads happens when the worklet callback did not change, but the file it was defined it has changed the gesture stops working. The next reload fixes the gesture and all subsequent reloads don't break it.
The reason was that callbacks object was rebuild on first hot reload while worklets were not, which caused the worklets to reference callback which no longer existed. This PR fixes the issue by always rebuilding when the callbacks/handlers object has changed.
Test plan
Tested on the same code this PR, only commenting the first line.