fix: borderRadius outline and border drawable fixes#37
Closed
janicduplessis wants to merge 1 commit intomainfrom
Closed
fix: borderRadius outline and border drawable fixes#37janicduplessis wants to merge 1 commit intomainfrom
janicduplessis wants to merge 1 commit intomainfrom
Conversation
Android: - Fall back to ViewOutlineProvider.BACKGROUND when borderRadius is not animated, so elevation shadows respect style borderRadius. - Sync animated borderRadius to BorderDrawable via BackgroundStyleApplicator.setBorderRadius so borders follow animated corner radius. iOS: - Stop setting masksToBounds for animated borderRadius. cornerRadius alone rounds the background visually; masksToBounds clips children and shadows unnecessarily (RN defaults to overflow:visible).
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
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.
Summary
Two issues when animating
borderRadiusalongside other properties:Android: elevation shadow ignores style borderRadius. The custom
ViewOutlineProviderset ininitalways read_borderRadius(the animated value, 0 when not animated). Elevation shadows rendered with square corners even whenstyle={{ borderRadius: 16 }}was set. Fix: only use the custom provider whenMASK_BORDER_RADIUSis in the bitmask; otherwise fall back toViewOutlineProvider.BACKGROUNDwhich reads the corner radius from the background drawable.Android: borders don't follow animated borderRadius.
setAnimateBorderRadiusupdated the outline but not theBorderDrawable, so borders rendered with square corners during radius animations. Fix: also callBackgroundStyleApplicator.setBorderRadiuseach frame to sync the border drawable.iOS: masksToBounds clips shadows. We were setting
masksToBounds = YESwheneverborderRadius > 0, which clips content outside bounds — including shadows. Since RN defaults tooverflow: visible, this was incorrect. Fix: stop settingmasksToBoundsentirely;cornerRadiusalone handles visual rounding. Users can control clipping viastyle={{ overflow: 'hidden' }}.Test Plan
yarn format:write && yarn lint && yarn test— all 65 tests pass.borderRadius+ shadow props render correctly (shadow not clipped).borderRadius+borderWidthrender with matching rounded corners.elevationwith styleborderRadiusshows correct shadow shape.