Skip to content

Android: honour per-corner border radii on images #55

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
gwleuverink wants to merge 2 commits into
base: main
Choose a base branch
from
+9 −7
Open

Android: honour per-corner border radii on images #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5cc57f7
Require mobile ^4.2 for the renderer symbols this package already imp…
gwleuverink Aug 20, 2026
fab41d6
Clip images through nodeShape so per-corner radii match containers on…
gwleuverink Aug 20, 2026
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
2 changes: 1 addition & 1 deletion composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
],
"require": {
"php": "^8.2",
"nativephp/mobile": "^4.0"
"nativephp/mobile": "^4.2"
},
"autoload": {
"psr-4": {
Expand Down
14 changes: 8 additions & 6 deletions resources/android/ImageRenderer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
package com.nativephp.plugins.native_ui.ui

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import com.nativephp.mobile.ui.nativerender.NativeUINode
import com.nativephp.mobile.ui.nativerender.argbToComposeColor
import com.nativephp.mobile.ui.nativerender.nodeShape

object ImageRenderer {
@Composable
Expand All @@ -21,10 +20,13 @@ object ImageRenderer {
val tintArgb = p.getColor("tint_color", 0)
val radius = node.style?.borderRadius ?: 0f

// Images need explicit clip for rounded corners (nodeStyle doesn't clip globally)
val imgModifier = if (radius > 0f) {
modifier.clip(RoundedCornerShape(radius.dp))
} else modifier
// Images need an explicit clip for rounded corners: nodeStyle shapes the
// background and border but never clips content. `nodeShape` is the same
// helper containers use, so per-corner classes (`rounded-br-none`) land
// on an image exactly as they do on a column. A node carrying only
// per-corner radii has no uniform radius, hence the props check.
val hasCorners = p.has("radius_tl") || radius > 0f
val imgModifier = if (hasCorners) modifier.clip(nodeShape(radius, p)) else modifier

if (src.isNotEmpty()) {
AsyncImage(
Expand Down
Loading