Skip to content

fix: borderRadius outline and border drawable fixes#37

Closed
janicduplessis wants to merge 1 commit intomainfrom
@janic/fix-border-radius-outline
Closed

fix: borderRadius outline and border drawable fixes#37
janicduplessis wants to merge 1 commit intomainfrom
@janic/fix-border-radius-outline

Conversation

@janicduplessis
Copy link
Copy Markdown
Collaborator

Summary

Two issues when animating borderRadius alongside other properties:

  1. Android: elevation shadow ignores style borderRadius. The custom ViewOutlineProvider set in init always read _borderRadius (the animated value, 0 when not animated). Elevation shadows rendered with square corners even when style={{ borderRadius: 16 }} was set. Fix: only use the custom provider when MASK_BORDER_RADIUS is in the bitmask; otherwise fall back to ViewOutlineProvider.BACKGROUND which reads the corner radius from the background drawable.

  2. Android: borders don't follow animated borderRadius. setAnimateBorderRadius updated the outline but not the BorderDrawable, so borders rendered with square corners during radius animations. Fix: also call BackgroundStyleApplicator.setBorderRadius each frame to sync the border drawable.

  3. iOS: masksToBounds clips shadows. We were setting masksToBounds = YES whenever borderRadius > 0, which clips content outside bounds — including shadows. Since RN defaults to overflow: visible, this was incorrect. Fix: stop setting masksToBounds entirely; cornerRadius alone handles visual rounding. Users can control clipping via style={{ overflow: 'hidden' }}.

Test Plan

  • yarn format:write && yarn lint && yarn test — all 65 tests pass.
  • Verify on iOS: animated borderRadius + shadow props render correctly (shadow not clipped).
  • Verify on Android: animated borderRadius + borderWidth render with matching rounded corners. elevation with style borderRadius shows correct shadow shape.

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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant