feat: animate SVG props in CSS pseudo selectors on native#9717
Draft
MatiPl01 wants to merge 3 commits into
Draft
feat: animate SVG props in CSS pseudo selectors on native#9717MatiPl01 wants to merge 3 commits into
MatiPl01 wants to merge 3 commits into
Conversation
Pseudo selectors such as :active and :hover now drive react-native-svg props (e.g. fill) on iOS and Android, without requiring the element to opt in via onStartShouldSetResponder.
Route :active-deepest through the SvgView compound host (per-path reactTagForTouch), sharing one host touch listener across :active and :active-deepest. Track multiple :hover SVG shapes per host. Ref-count setResponsible and revert it on detach. Drop the onStartShouldSetResponder workaround from the SVG examples and add multi-shape, nested-group, and overlapping-circles cases. iOS: collapse the remaining recognizer signatures via the REAGestureRecognizer typedef and document the deferred SVG deepest-arbitration TODO.
Keep SVG fill + SVG radius (:active) and the overlapping-circles deepest test; drop the multiple-shapes and nested-group cards (redundant) and the Circle-over-Rect case (can't distinguish per-path from bounding-box). Remove now-unused Rect/G imports.
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
1 participant
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.
Makes CSS pseudo selectors (
:active,:hover) animate react-native-svg props such asfillon iOS and Android, matching existing Web behavior. Previously these only fired for SVG shapes when the element opted in withonStartShouldSetResponder.:active/:hoverthrough the shape's compound host (SvgView) viareactTagForTouch, defers host resolution until the shape attaches, and enables per-shape hit testing throughsetResponsible.Draft pending broader validation (hover on Android, lint/tests, and example-screen cleanup).