Skip to content

Fix image disappearing on Nougat with antialiased border radius clipping #55527

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Abbondanzo wants to merge 1 commit into
base: main
Choose a base branch
from
+14 −9
Open

Fix image disappearing on Nougat with antialiased border radius clipping #55527

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions ...tive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -590,16 +590,21 @@ public object BackgroundStyleApplicator {
paddingBoxPath.setFillType(Path.FillType.INVERSE_WINDING)
canvas.drawPath(paddingBoxPath, maskPaint)
} else {
// Create an inverse path: outer rect minus the rounded rect (using even-odd fill rule)
val inversePath = Path()
inversePath.addRect(0f, 0f, view.width.toFloat(), view.height.toFloat(), Path.Direction.CW)
inversePath.addPath(paddingBoxPath)
inversePath.setFillType(Path.FillType.EVEN_ODD)

// Use DST_OUT to remove content where the mask is drawn (outside the rounded rect)
maskPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
// API < 28: Use a nested saveLayer with DST_IN compositing to mask content to the
// padding box path. EVEN_ODD fill + DST_OUT has rendering bugs on API 24's hardware
// renderer, so we avoid that technique. Instead, draw the mask shape into a separate
// layer; when restored with DST_IN, content is preserved only where the mask is opaque.
val dstInPaint = Paint()
dstInPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
val maskSave =
canvas.saveLayer(0f, 0f, view.width.toFloat(), view.height.toFloat(), dstInPaint)
// Clear the layer to ensure it starts fully transparent. On API 24, saveLayer may not
// initialize the buffer to transparent, causing DST_IN to see non-zero alpha everywhere.
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
maskPaint.xfermode = null
maskPaint.color = Color.BLACK
canvas.drawPath(inversePath, maskPaint)
canvas.drawPath(paddingBoxPath, maskPaint)
canvas.restoreToCount(maskSave)
}

// Restore the layer
Expand Down
Loading