feat: support pseudo selectors on SVG elements on Android#9796
Merged
Conversation
react-native-svg renders elements as virtual nodes drawn on the SvgView canvas, so an element's tag does not resolve to an independently touchable Android view. Attach the :active/:active-deepest touch listener to the nearest ReactCompoundView ancestor (the SvgView) and resolve the pressed element per touch via reactTagForTouch; match :hover by react tag in the hit-test path. Normal views are unchanged. Drop the web-only labels from the SVG :active examples.
Demonstrates that hit-testing resolves the top-most element for stacked react-native-svg children: hovering the overlap highlights only the front circle, matching the existing overlapping-views example for plain views.
The window observer and the per-view touch listener both reconciled :hover on touch-down. For overlapping SVG elements the first reconcile applied the front element's :hover fill, which invalidates its RNSVG path, so the second reconcile hit-tested the element behind it and the wrong element won. Record the downTime of the gesture the window observer reconciled and skip the per-view reconcile for that same gesture, keeping the per-view path only as a fallback for windows the observer does not see (e.g. Modals).
wisniewskij
approved these changes
Jul 1, 2026
wisniewskij
approved these changes
Jul 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
react-native-svg renders elements as virtual nodes on the SvgView's canvas, so their tags don't resolve to independently touchable Android views. As a result,
:active/:hoverpseudo selectors on SVG elements worked on iOS and web but not on Android.This attaches the
:active/:active-deepesttouch listener to the nearestReactCompoundViewancestor (the SvgView) and resolves the pressed element viareactTagForTouch, and matches:hoverby react tag in the hit-test path. Normal views are unchanged. The web-only labels on the SVG:activeexamples are dropped, and an overlapping-SVG:hoverexample is added.Verified on Android: single and overlapping SVG elements resolve correctly (on overlap the front/top-most element wins); iOS and web already worked.