Skip to content

Resolve percentage border radii in dp for the Android elevation outline - #59964

Open
lazerg wants to merge 1 commit into
react:mainfrom
lazerg:fix/issue-59962-percent-radius-outline
Open

lazerg wants to merge 1 commit into
react:mainfrom
lazerg:fix/issue-59962-percent-radius-outline

Conversation

@lazerg

@lazerg lazerg commented Nov 12, 2026

Copy link
Copy Markdown
Contributor

Summary:

On Android, a View with a percentage borderRadius and elevation casts its shadow from an outline with corners that are too round. CompositeBackgroundDrawable.getOutline resolves the radii against bounds.width() and bounds.height(), which are in pixels, and then converts the result with dpToPx() again, so a percentage radius gets multiplied by the screen density. A 120x120 View with borderRadius: '25%' on a 3x screen casts a circle's shadow. BackgroundDrawable, BorderDrawable and OutlineDrawable already resolve against the size in dp, so this does the same in getOutline. Radii in dp don't change.

Fixes #59962

Changelog:

[ANDROID] [FIXED] - Fix elevation shadow corners for Views with a percentage borderRadius

Test Plan:

Added percentageRadiusIsResolvedAgainstTheSizeInDp to CompositeBackgroundDrawableTest: a 120x120 px drawable at density 2 with borderRadius: '25%' should get a 30 px outline radius. It fails on main (60 px) and passes with the change.

./gradlew :packages:react-native:ReactAndroid:testDebugUnitTest --tests "*uimanager.drawable*"

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Nov 12, 2026
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Nov 12, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Android: with a percentage borderRadius, the elevation shadow's corners are the radius multiplied by the screen density

1 participant