Skip to content

fix(web): avoid React 19 element.ref warning in gesture path#893

Closed
dohooo wants to merge 1 commit intomainfrom
caspian/fix-react19-web-warning-857
Closed

fix(web): avoid React 19 element.ref warning in gesture path#893
dohooo wants to merge 1 commit intomainfrom
caspian/fix-react19-web-warning-857

Conversation

@dohooo
Copy link
Copy Markdown
Owner

@dohooo dohooo commented Mar 2, 2026

Summary

  • remove the ref attachment from ScrollViewGesture's GestureDetector child to avoid triggering React 19 element.ref access warnings on web paths
  • replace measure(containerRef) boundary calculation with layout.containerSize from store (already updated by onLayout)
  • add a regression test that fails when Accessing element.ref was removed in React 19 is emitted

Why

Issue #857 reports React 19 web warning:
Accessing element.ref was removed in React 19

The upstream warning is triggered when a dependency reads element.ref; passing a child ref through this path made the warning visible in carousel usage.

Tests

  • yarn test src/components/ScrollViewGesture.test.tsx --runInBand
  • yarn test src/components/Carousel.test.tsx --runInBand
  • yarn biome check src/components/ScrollViewGesture.tsx src/components/ScrollViewGesture.test.tsx

Fixes #857

@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-native-reanimated-carousel Building Building Preview, Comment Mar 2, 2026 8:48am

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 2, 2026

⚠️ No Changeset found

Latest commit: 6bf7e67

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@dosubot dosubot Bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Mar 2, 2026
@dosubot
Copy link
Copy Markdown

dosubot Bot commented Mar 2, 2026

Related Documentation

Checked 3 published document(s) in 1 knowledge base(s). No updates required.

How did I do? Any feedback?  Join Discord

@dosubot dosubot Bot added the bug Something isn't working label Mar 2, 2026
@codecov
Copy link
Copy Markdown

codecov Bot commented Mar 2, 2026

Codecov Report

❌ Patch coverage is 0% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 84.10%. Comparing base (5289d9d) to head (6bf7e67).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
src/components/ScrollViewGesture.tsx 0.00% 1 Missing and 2 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #893      +/-   ##
==========================================
+ Coverage   84.06%   84.10%   +0.03%     
==========================================
  Files          37       37              
  Lines        1042     1038       -4     
  Branches      364      362       -2     
==========================================
- Hits          876      873       -3     
- Misses         67       68       +1     
+ Partials       99       97       -2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dosubot dosubot Bot mentioned this pull request Mar 12, 2026
@dohooo dohooo closed this Mar 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"react-native-reanimated-carousel": "^5.0.0-beta.0",

1 participant