fix: add missing dependency arrays to useDerivedValue hooks in drawer #12743
Conversation
Adds dependency arrays to useDerivedValue hooks to prevent worklet recompilation on every render. This fixes performance issues with drawer animations, especially on Android devices. - Add dependencies to translateX calculation - Add dependencies to progress calculation These dependencies are required for React Native Reanimated v3 compatibility and significantly improve drawer gesture performance. Fixes react-navigation#12742
|
Hey @anivar! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines. |
|
Hey @autofix-ci[bot]! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines. |
✅ Deploy Preview for react-navigation-example ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for react-navigation-example ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
satya164
left a comment
There was a problem hiding this comment.
Thanks for the PR. The Reanimated babel plugin is supposed to add dependencies automatically, and they shouldn't be necessary to do it manually.
Reanimated docs say dependency array is only necessary when using without the Babel plugin on Web https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support/#web-without-the-babel-plugin - and Reanimated is not used for the drawer on the web.
Can you provide repro and videos to verify the issue and the change? The text in the issue conflicts with Reanimated docs. Pull requests also need a test plan to ensure the that the changes can be tested.
1573758 to
05ca74a
Compare
Fixes #12742
Added dependency arrays to translateX and progress useDerivedValue hooks to prevent worklet recompilation on every render.
Tested on iOS and Android. No breaking changes.