craft-native 0.0.204 → 0.0.205

package/dist/android/templates/MainActivityNative.kt.template

@@ -21,15 +21,18 @@ import android.graphics.BitmapFactory
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.DashPathEffect
+import android.graphics.LinearGradient
 import android.graphics.Matrix
 import android.graphics.Outline
 import android.graphics.Paint
 import android.graphics.Path
 import android.graphics.RectF
+import android.graphics.Shader
 import android.graphics.Typeface
 import android.graphics.ColorFilter
 import android.graphics.PixelFormat
 import android.graphics.drawable.Drawable
+import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.GradientDrawable
 import android.net.Uri
 import android.os.Build
@@ -145,6 +148,11 @@ private fun craftNativeOptionalString(value: Any?): String? = value
     ?.takeUnless { it == "null" || it == "undefined" }
     ?.takeIf { it.isNotBlank() }
 
+private fun craftNativePickerValue(value: Any?): String? = when (value) {
+    is Number -> value.toDouble().takeIf { it.isFinite() }?.toString()
+    else -> craftNativeOptionalString(value)
+}
+
 private fun craftNativeEventName(events: JSONObject, vararg names: String): String =
     names.firstNotNullOfOrNull { name -> craftNativeOptionalString(events.opt(name)) }.orEmpty()
 
@@ -332,11 +340,17 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         val strokeWidth: Float = 1f,
         val color: String = "#000000",
         val opacity: Float = 1f,
+        val fillOpacity: Float = 1f,
+        val strokeOpacity: Float = 1f,
+        val strokeDashoffset: Float = 0f,
+        val strokeMiterlimit: Float = 4f,
+        val fillRule: String = "nonzero",
         val typeface: Typeface = Typeface.DEFAULT,
         val strokeLinecap: String? = null,
         val strokeLinejoin: String? = null,
         val strokeDasharray: List<Float> = emptyList(),
         val vectorEffect: String? = null,
+        val dominantBaseline: String? = null,
     ) {
         fun merge(node: JSONObject): SvgPaint {
             val props = node.optJSONObject("props") ?: JSONObject()
@@ -361,17 +375,24 @@ private class CraftNativeSvgView(context: Context) : View(context) {
             // when both provide the same SVG paint value.
             val weight = value("fontWeight")
             val ownOpacity = value("opacity")?.toFloatOrNull()?.takeIf { it.isFinite() } ?: 1f
+            fun number(name: String): Float? = value(name)?.toFloatOrNull()?.takeIf { it.isFinite() }
             return copy(
                 fill = value("fill") ?: fill,
                 stroke = value("stroke") ?: stroke,
                 strokeWidth = value("strokeWidth")?.toFloatOrNull()?.takeIf { it.isFinite() } ?: strokeWidth,
                 color = value("color") ?: color,
                 opacity = ownOpacity * opacity,
+                fillOpacity = number("fillOpacity") ?: fillOpacity,
+                strokeOpacity = number("strokeOpacity") ?: strokeOpacity,
+                strokeDashoffset = number("strokeDashoffset") ?: strokeDashoffset,
+                strokeMiterlimit = number("strokeMiterlimit")?.takeIf { it > 0 } ?: strokeMiterlimit,
+                fillRule = value("fillRule") ?: fillRule,
                 typeface = if (weight in setOf("bold", "700")) Typeface.DEFAULT_BOLD else typeface,
                 strokeLinecap = value("strokeLinecap") ?: strokeLinecap,
                 strokeLinejoin = value("strokeLinejoin") ?: strokeLinejoin,
                 strokeDasharray = dashes(raw("strokeDasharray")) ?: strokeDasharray,
                 vectorEffect = value("vectorEffect") ?: vectorEffect,
+                dominantBaseline = value("dominantBaseline") ?: dominantBaseline,
             )
         }
     }
@@ -467,16 +488,18 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         }
         val fill = android.graphics.Paint(Paint.ANTI_ALIAS_FLAG).apply {
             color = resolveColor(style.fill, style.color, Color.TRANSPARENT)
-            alpha = (style.opacity * 255f).roundToInt().coerceIn(0, 255)
+            alpha = (style.opacity * style.fillOpacity * 255f).roundToInt().coerceIn(0, 255)
             this.style = Paint.Style.FILL
         }
+        path.fillType = if (style.fillRule == "evenodd") Path.FillType.EVEN_ODD else Path.FillType.WINDING
         if (style.fill != "none" && style.fill != "transparent") canvas.drawPath(path, fill)
         if (!style.stroke.isNullOrBlank() && style.stroke != "none" && style.stroke != "transparent" && style.strokeWidth > 0) {
             val stroke = android.graphics.Paint(Paint.ANTI_ALIAS_FLAG).apply {
                 color = resolveColor(style.stroke, style.color, Color.TRANSPARENT)
-                alpha = (style.opacity * 255f).roundToInt().coerceIn(0, 255)
+                alpha = (style.opacity * style.strokeOpacity * 255f).roundToInt().coerceIn(0, 255)
                 this.style = Paint.Style.STROKE
                 strokeWidth = style.strokeWidth
+                strokeMiter = style.strokeMiterlimit
                 strokeCap = when (style.strokeLinecap) {
                     "round" -> Paint.Cap.ROUND
                     "square" -> Paint.Cap.SQUARE
@@ -494,7 +517,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
                     } else {
                         dashPattern
                     }
-                    pathEffect = DashPathEffect(pattern, 0f)
+                    pathEffect = DashPathEffect(pattern, style.strokeDashoffset)
                 }
             }
             // `vector-effect="non-scaling-stroke"`: the stroke is in the view's
@@ -525,7 +548,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
             ?: 12f
         val paint = android.graphics.Paint(Paint.ANTI_ALIAS_FLAG).apply {
             color = resolveColor(style.fill, style.color, Color.BLACK)
-            alpha = (style.opacity * 255f).roundToInt().coerceIn(0, 255)
+            alpha = (style.opacity * style.fillOpacity * 255f).roundToInt().coerceIn(0, 255)
             textSize = size
             typeface = style.typeface
         }
@@ -535,7 +558,14 @@ private class CraftNativeSvgView(context: Context) : View(context) {
             "middle" -> x -= paint.measureText(text) / 2f
             "end" -> x -= paint.measureText(text)
         }
-        canvas.drawText(text, x, y, paint)
+        val metrics = paint.fontMetrics
+        val baseline = when (style.dominantBaseline) {
+            "middle", "central", "mathematical" -> y - (metrics.ascent + metrics.descent) / 2f
+            "hanging", "text-before-edge", "before-edge" -> y - metrics.ascent
+            "text-after-edge", "after-edge" -> y - metrics.descent
+            else -> y
+        }
+        canvas.drawText(text, x, baseline, paint)
     }
 
     private fun resolveColor(value: String?, current: String, fallback: Int): Int = runCatching {
@@ -557,6 +587,7 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
     private var onMarkerTap: ((String) -> Unit)? = null
     private var lifecycleStarted = false
     private var destroyed = false
+    private var initialCameraKey: String? = null
 
     init {
         addView(mapView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
@@ -631,7 +662,11 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
                         is Number -> rawWidth.toDouble()
                         else -> 3.0
                     }
-                    val width = authoredWidth.toFloat()
+                    // MapKit's lineWidth is expressed in points, while the
+                    // Google Maps SDK consumes screen pixels. Keep the
+                    // protocol in logical points and convert only at this
+                    // Android host boundary so dense displays stay in parity.
+                    val width = (authoredWidth * resources.displayMetrics.density).toFloat()
                     if (!authoredWidth.isFinite() || !width.isFinite() || width <= 0f) continue
                     nextPolylines[id] = Triple(points, color(craftNativeOptionalString(props.opt("strokeColor")).orEmpty()), width)
                 }
@@ -662,24 +697,67 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
                 map.addPolyline(PolylineOptions().addAll(value.first).color(value.second).width(value.third))?.let { polylines[id] = it }
             }
         }
-        if (pendingProps.optBoolean("fitToBounds", false)) fitToBounds()
-        region(pendingProps.optJSONObject("region") ?: pendingProps.optJSONObject("initialRegion"))?.let { bounds ->
-            post {
-                if (width > 0 && height > 0) map.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 24))
+        val explicitRegion = region(pendingProps.optJSONObject("region"))
+        val initialRegion = region(pendingProps.optJSONObject("initialRegion"))
+        if (explicitRegion != null) {
+            moveCamera(explicitRegion)
+            initialCameraKey = null
+        } else if (initialRegion != null) {
+            val key = "region:${pendingProps.optJSONObject("initialRegion")}"
+            if (initialCameraKey != key) {
+                moveCamera(initialRegion)
+                initialCameraKey = key
             }
+        } else if (pendingProps.optBoolean("fitToBounds", false)) {
+            val key = "fit:${overlayKey(nextMarkers, nextPolylines)}"
+            if (initialCameraKey != key) {
+                if (fitToBounds()) initialCameraKey = key
+            }
+        } else {
+            initialCameraKey = null
         }
     }
 
-    private fun fitToBounds() {
-        val map = googleMap ?: return
+    override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
+        super.onSizeChanged(width, height, oldWidth, oldHeight)
+        // MapView can become ready before its host has a usable viewport. Do
+        // not mark a fit as complete until the camera update can be issued.
+        if (width > 0 && height > 0 && pendingProps.optBoolean("fitToBounds", false) && initialCameraKey == null) {
+            applyPending()
+        }
+    }
+
+    private fun moveCamera(bounds: LatLngBounds) {
+        post {
+            if (width > 0 && height > 0) googleMap?.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 24))
+        }
+    }
+
+    private fun overlayKey(
+        markers: Map<String, Pair<LatLng, String?>>,
+        polylines: Map<String, Triple<List<LatLng>, Int, Float>>,
+    ): String {
+        val markerKey = markers.toSortedMap().entries.joinToString("|") { (id, value) ->
+            "$id:${value.first.latitude},${value.first.longitude}"
+        }
+        val polylineKey = polylines.toSortedMap().entries.joinToString("|") { (id, value) ->
+            "$id:" + value.first.joinToString(";") { point -> "${point.latitude},${point.longitude}" }
+        }
+        return "m[$markerKey]p[$polylineKey]"
+    }
+
+    private fun fitToBounds(): Boolean {
+        val map = googleMap ?: return false
+        if (width <= 0 || height <= 0) return false
         val builder = LatLngBounds.Builder()
         var count = 0
         markers.values.forEach { builder.include(it.position); count++ }
         polylines.values.flatMap { it.points }.forEach { builder.include(it); count++ }
-        if (count == 0) return
+        if (count == 0) return false
         post {
             if (width > 0 && height > 0) map.moveCamera(CameraUpdateFactory.newLatLngBounds(builder.build(), 24))
         }
+        return true
     }
 
     override fun onAttachedToWindow() {
@@ -728,8 +806,8 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
     private fun coordinates(geometry: JSONArray?): List<LatLng> {
         if (geometry == null) return emptyList()
         return (0 until geometry.length() - 1 step 2).mapNotNull { index ->
-            val latitude = geometry.optDouble(index, Double.NaN)
-            val longitude = geometry.optDouble(index + 1, Double.NaN)
+            val latitude = finiteNumber(geometry.opt(index)) ?: return@mapNotNull null
+            val longitude = finiteNumber(geometry.opt(index + 1)) ?: return@mapNotNull null
             if (latitude.isFinite() && longitude.isFinite() &&
                 latitude >= -90.0 && latitude <= 90.0 &&
                 longitude >= -180.0 && longitude <= 180.0
@@ -740,10 +818,14 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
     private fun region(value: JSONObject?): LatLngBounds? {
         val center = value?.optJSONObject("center") ?: return null
         val span = value.optJSONObject("span") ?: return null
-        val latitude = center.optDouble("latitude", Double.NaN)
-        val longitude = center.optDouble("longitude", Double.NaN)
-        val latitudeDelta = span.optDouble("latitudeDelta", span.optDouble("latitude_delta", Double.NaN))
-        val longitudeDelta = span.optDouble("longitudeDelta", span.optDouble("longitude_delta", Double.NaN))
+        val latitude = finiteNumber(center.opt("latitude")) ?: return null
+        val longitude = finiteNumber(center.opt("longitude")) ?: return null
+        val latitudeDelta = finiteNumber(span.opt("latitudeDelta"))
+            ?: finiteNumber(span.opt("latitude_delta"))
+            ?: return null
+        val longitudeDelta = finiteNumber(span.opt("longitudeDelta"))
+            ?: finiteNumber(span.opt("longitude_delta"))
+            ?: return null
         if (!latitude.isFinite() || !longitude.isFinite() || !latitudeDelta.isFinite() || !longitudeDelta.isFinite() ||
             latitude < -90.0 || latitude > 90.0 || longitude < -180.0 || longitude > 180.0 ||
             latitudeDelta <= 0.0 || latitudeDelta > 180.0 ||
@@ -753,7 +835,10 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
         return LatLngBounds(LatLng(latitude - latitudeDelta / 2, longitude - longitudeDelta / 2), LatLng(latitude + latitudeDelta / 2, longitude + longitudeDelta / 2))
     }
 
-    private fun color(value: String): Int = runCatching { Color.parseColor(value) }.getOrDefault(Color.BLUE)
+    private fun finiteNumber(value: Any?): Double? =
+        (value as? Number)?.toDouble()?.takeIf { it.isFinite() }
+
+    private fun color(value: String): Int = runCatching { craftNativeColor(value) }.getOrDefault(Color.BLUE)
 }
 
 /** A deterministic flex-shaped container shared by normal views and scroll content. */
@@ -2036,6 +2121,9 @@ private class CraftNativeScrollView(context: Context) : SwipeRefreshLayout(conte
     private val defaultProgressStart = progressViewStartOffset
     private val defaultProgressEnd = progressViewEndOffset
     private var configuredProgressOffset: Int? = null
+    private var stickyIndices = emptyList<Int>()
+    private var scrollTargetKey: String? = null
+    private var pendingScrollTarget: Pair<String, Boolean>? = null
 
     init {
         vertical.isNestedScrollingEnabled = true
@@ -2247,6 +2335,133 @@ private class CraftNativeScrollView(context: Context) : SwipeRefreshLayout(conte
         horizontal.isHorizontalScrollBarEnabled = horizontalVisible
     }
 
+    /** Keep vertical ScrollView headers pinned while preserving their layout slots. */
+    fun setStickyHeaderIndices(value: JSONArray?) {
+        stickyIndices.forEach { index ->
+            content.getChildAt(index)?.apply {
+                translationY = 0f
+                translationZ = 0f
+            }
+        }
+        stickyIndices = if (value == null) {
+            emptyList()
+        } else {
+            (0 until value.length()).mapNotNull { value.optInt(it, -1).takeIf { index -> index >= 0 } }.distinct().sorted()
+        }
+        post { updateStickyHeaders() }
+    }
+
+    /** Scroll a child identified by its native testID/id after reconciliation. */
+    fun setScrollTarget(value: Any?) {
+        val target: String
+        val animated: Boolean
+        val key: String
+        when (value) {
+            is String -> {
+                target = value.trim()
+                animated = true
+                key = target
+            }
+            is JSONObject -> {
+                target = craftNativeOptionalString(value.opt("id")).orEmpty().trim()
+                animated = value.optBoolean("animated", true)
+                key = value.toString()
+            }
+            else -> {
+                scrollTargetKey = null
+                pendingScrollTarget = null
+                return
+            }
+        }
+        if (target.isBlank()) {
+            scrollTargetKey = null
+            pendingScrollTarget = null
+            return
+        }
+        if (key == scrollTargetKey) return
+        scrollTargetKey = key
+        pendingScrollTarget = target to animated
+        post { scrollToPendingTarget(0) }
+    }
+
+    private fun updateStickyHeaders() {
+        if (horizontalMode == true) {
+            stickyIndices.forEach { index ->
+                content.getChildAt(index)?.apply {
+                    translationY = 0f
+                    translationZ = 0f
+                }
+            }
+            return
+        }
+        val scrollY = vertical.scrollY
+        var pinnedBottom = 0
+        stickyIndices.forEachIndexed { position, index ->
+            val header = content.getChildAt(index)
+            if (header == null || header.visibility != View.VISIBLE || header.height <= 0) return@forEachIndexed
+            val nextTop = stickyIndices.drop(position + 1)
+                .firstNotNullOfOrNull { next -> content.getChildAt(next)?.takeIf { it.visibility == View.VISIBLE }?.top }
+                ?: Int.MAX_VALUE
+            val desired = max(0, scrollY + pinnedBottom - header.top)
+            val limit = if (nextTop == Int.MAX_VALUE) Int.MAX_VALUE else max(0, nextTop - header.bottom)
+            val translation = min(desired, limit)
+            header.translationY = translation.toFloat()
+            header.translationZ = if (translation > 0) 1f else 0f
+            if (translation > 0) pinnedBottom = header.top - scrollY + translation + header.height
+        }
+    }
+
+    private fun findDescendant(view: View, id: String): View? {
+        if (view.tag?.toString() == id || view.contentDescription?.toString() == id) return view
+        if (view is ViewGroup) {
+            for (index in 0 until view.childCount) findDescendant(view.getChildAt(index), id)?.let { return it }
+        }
+        return null
+    }
+
+    private fun scrollToPendingTarget(attempt: Int) {
+        val target = pendingScrollTarget ?: return
+        val scroller: View = if (horizontalMode == true) horizontal else vertical
+        val view = findDescendant(content, target.first)
+        if (view == null || view.width <= 0 || view.height <= 0 || scroller.width <= 0 || scroller.height <= 0) {
+            if (attempt < 4) postDelayed({ scrollToPendingTarget(attempt + 1) }, 16L)
+            return
+        }
+        val targetLocation = IntArray(2)
+        val scrollerLocation = IntArray(2)
+        view.getLocationOnScreen(targetLocation)
+        scroller.getLocationOnScreen(scrollerLocation)
+        val current = if (horizontalMode == true) horizontal.scrollX else vertical.scrollY
+        val stickyHeight = if (horizontalMode == true) 0 else {
+            val contentLocation = IntArray(2)
+            content.getLocationOnScreen(contentLocation)
+            val targetContentTop = targetLocation[1] - contentLocation[1] + vertical.scrollY
+            stickyIndices.mapNotNull { index -> content.getChildAt(index) }
+                .lastOrNull { it.visibility == View.VISIBLE && it.top <= targetContentTop }
+                ?.height ?: 0
+        }
+        val desired = if (horizontalMode == true) {
+            current + targetLocation[0] - scrollerLocation[0]
+        } else {
+            current + targetLocation[1] - scrollerLocation[1] - stickyHeight
+        }
+        val maximum = if (horizontalMode == true) {
+            max(0, content.measuredWidth - scroller.width)
+        } else {
+            max(0, content.measuredHeight - scroller.height)
+        }
+        val bounded = desired.coerceIn(0, maximum)
+        if (target.second) {
+            if (horizontalMode == true) horizontal.smoothScrollTo(bounded, 0) else vertical.smoothScrollTo(0, bounded)
+        } else if (horizontalMode == true) {
+            horizontal.scrollTo(bounded, 0)
+        } else {
+            vertical.scrollTo(0, bounded)
+        }
+        pendingScrollTarget = null
+        updateStickyHeaders()
+    }
+
     fun setScrollListeners(
         onScroll: ((Int, Int) -> Unit)?,
         onBeginDrag: (() -> Unit)?,
@@ -2277,7 +2492,10 @@ private class CraftNativeScrollView(context: Context) : SwipeRefreshLayout(conte
                 }
             }
 
-            scroller.setOnScrollChangeListener { _, x, y, _, _ -> onScroll?.invoke(x, y) }
+            scroller.setOnScrollChangeListener { _, x, y, _, _ ->
+                if (!horizontal) updateStickyHeaders()
+                onScroll?.invoke(x, y)
+            }
             scroller.setOnTouchListener { _, event ->
                 when (event.actionMasked) {
                     android.view.MotionEvent.ACTION_DOWN -> {
@@ -2722,6 +2940,9 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
     private var sourceUri = ""
     private var shouldLoop = false
     private var shouldPlay = false
+    private var playIntent: Boolean? = null
+    private var userPaused = false
+    private var ended = false
     private var muted = false
     private var resizeMode = "contain"
     private var preparedPlayer: MediaPlayer? = null
@@ -2736,6 +2957,16 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
         private set
     /** Playback started or stopped, or the choice changed: the activity's PiP params follow. */
     var onPictureInPictureChanged: (() -> Unit)? = null
+    private val progressHandler = Handler(Looper.getMainLooper())
+    private val progressTick = object : Runnable {
+        override fun run() {
+            if (!playing) return
+            fire("onProgress", JSONObject()
+                .put("currentTime", currentPosition.coerceAtLeast(0) / 1000.0)
+                .put("duration", duration.coerceAtLeast(0) / 1000.0))
+            progressHandler.postDelayed(this, 500L)
+        }
+    }
 
     init {
         // Mixed with the music rather than pausing it.
@@ -2749,7 +2980,13 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
             else -> ""
         }
         shouldLoop = loop
-        shouldPlay = autoplay && !paused
+        val nextShouldPlay = autoplay && !paused
+        if (playIntent != nextShouldPlay) {
+            userPaused = false
+            ended = false
+        }
+        playIntent = nextShouldPlay
+        shouldPlay = nextShouldPlay
         this.muted = muted
         val floating = pictureInPicture && !muted
         if (floating != this.pictureInPicture) {
@@ -2761,6 +2998,8 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
         setMediaController(if (controls) MediaController(context).also { it.setAnchorView(this) } else null)
         if (uri != sourceUri) {
             sourceUri = uri
+            userPaused = false
+            ended = false
             stopPlayback()
             setPlaying(false)
             preparedPlayer = null
@@ -2780,7 +3019,10 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
             }
             setOnCompletionListener {
                 if (shouldLoop && !isPlaying) start()
-                else setPlaying(false)
+                else {
+                    ended = true
+                    setPlaying(false)
+                }
                 fire("onEnd")
             }
             setOnErrorListener { _, what, extra ->
@@ -2791,18 +3033,24 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
         }
         if (uri.isBlank()) return
         runCatching {
-            if (shouldPlay && !isPlaying) start()
+            if (shouldPlay && !isPlaying && !userPaused && !ended) start()
             else if (!shouldPlay && isPlaying) pause()
         }
     }
 
     override fun start() {
         super.start()
-        setPlaying(true)
+        userPaused = false
+        ended = false
+        // VideoView accepts start() before its MediaPlayer is prepared. Do
+        // not announce playback until the player reports that it is actually
+        // running; iOS follows the same rule through AVPlayer's time status.
+        if (runCatching { isPlaying }.getOrDefault(false)) setPlaying(true)
     }
 
     override fun pause() {
         super.pause()
+        userPaused = true
         setPlaying(false)
     }
 
@@ -2810,6 +3058,8 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
         if (playing == value) return
         playing = value
         fire(if (value) "onPlay" else "onPause")
+        progressHandler.removeCallbacks(progressTick)
+        if (value) progressHandler.post(progressTick)
         onPictureInPictureChanged?.invoke()
     }
 
@@ -2834,12 +3084,20 @@ private class CraftNativeVideoView(context: Context) : VideoView(context) {
         return runCatching { player.setDisplay(holder ?: this.holder) }.isSuccess
     }
 
+    fun notifyPictureInPicture(active: Boolean) {
+        fire(if (active) "onPictureInPictureStart" else "onPictureInPictureStop")
+    }
+
     fun stop() {
         // Released with its screen: nothing more is told to it.
         emit = null
+        progressHandler.removeCallbacks(progressTick)
         stopPlayback()
         setPlaying(false)
         sourceUri = ""
+        playIntent = null
+        userPaused = false
+        ended = false
         preparedPlayer = null
         if (pictureInPicture) {
             pictureInPicture = false
@@ -3249,30 +3507,92 @@ private class CraftTextDecorationSpan(
     }
 }
 
+private fun craftNativeGradientOrientation(direction: String?): GradientDrawable.Orientation = when (direction) {
+    "to-t" -> GradientDrawable.Orientation.BOTTOM_TOP
+    "to-tr" -> GradientDrawable.Orientation.BL_TR
+    "to-r" -> GradientDrawable.Orientation.LEFT_RIGHT
+    "to-br" -> GradientDrawable.Orientation.TL_BR
+    "to-bl" -> GradientDrawable.Orientation.TR_BL
+    "to-l" -> GradientDrawable.Orientation.RIGHT_LEFT
+    "to-tl" -> GradientDrawable.Orientation.BR_TL
+    else -> GradientDrawable.Orientation.TOP_BOTTOM
+}
+
 private class CraftNativeSideBorderDrawable(
     private val fillColor: Int,
     private val radii: FloatArray,
     private val widths: IntArray,
     private val colors: IntArray,
+    private val borderStyle: String?,
+    private val gradientDirection: String?,
+    private val gradientColors: IntArray?,
 ) : Drawable() {
     private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
 
+    private fun gradient(bounds: RectF): Shader? {
+        val colors = gradientColors ?: return null
+        val points = when (gradientDirection) {
+            "to-t" -> floatArrayOf(0.5f, 1f, 0.5f, 0f)
+            "to-tr" -> floatArrayOf(0f, 1f, 1f, 0f)
+            "to-r" -> floatArrayOf(0f, 0.5f, 1f, 0.5f)
+            "to-br" -> floatArrayOf(0f, 0f, 1f, 1f)
+            "to-bl" -> floatArrayOf(1f, 0f, 0f, 1f)
+            "to-l" -> floatArrayOf(1f, 0.5f, 0f, 0.5f)
+            "to-tl" -> floatArrayOf(1f, 1f, 0f, 0f)
+            else -> floatArrayOf(0.5f, 0f, 0.5f, 1f)
+        }
+        return LinearGradient(
+            bounds.left + bounds.width() * points[0],
+            bounds.top + bounds.height() * points[1],
+            bounds.left + bounds.width() * points[2],
+            bounds.top + bounds.height() * points[3],
+            colors,
+            null,
+            Shader.TileMode.CLAMP,
+        )
+    }
+
     override fun draw(canvas: Canvas) {
         val bounds = RectF(this.bounds)
         paint.style = Paint.Style.FILL
         paint.color = fillColor
-        if (Color.alpha(fillColor) > 0) {
+        paint.shader = gradient(bounds)
+        if (paint.shader != null || Color.alpha(fillColor) > 0) {
             val path = Path().apply { addRoundRect(bounds, radii, Path.Direction.CW) }
             canvas.drawPath(path, paint)
         }
+        paint.shader = null
         val top = widths.getOrElse(0) { 0 }
         val right = widths.getOrElse(1) { 0 }
         val bottom = widths.getOrElse(2) { 0 }
         val left = widths.getOrElse(3) { 0 }
-        if (top > 0) { paint.color = colors.getOrElse(0) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.top, bounds.right, bounds.top + top, paint) }
-        if (right > 0) { paint.color = colors.getOrElse(1) { Color.TRANSPARENT }; canvas.drawRect(bounds.right - right, bounds.top, bounds.right, bounds.bottom, paint) }
-        if (bottom > 0) { paint.color = colors.getOrElse(2) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.bottom - bottom, bounds.right, bounds.bottom, paint) }
-        if (left > 0) { paint.color = colors.getOrElse(3) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.top, bounds.left + left, bounds.bottom, paint) }
+        if (borderStyle == "dashed" || borderStyle == "dotted") {
+            paint.style = Paint.Style.STROKE
+            paint.strokeCap = if (borderStyle == "dotted") Paint.Cap.ROUND else Paint.Cap.BUTT
+            paint.pathEffect = null
+            fun drawEdge(index: Int, width: Int, startX: Float, startY: Float, endX: Float, endY: Float) {
+                if (width <= 0) return
+                paint.color = colors.getOrElse(index) { Color.TRANSPARENT }
+                paint.strokeWidth = width.toFloat()
+                paint.pathEffect = if (borderStyle == "dotted") {
+                    DashPathEffect(floatArrayOf(width.toFloat(), width * 1.5f), 0f)
+                } else {
+                    DashPathEffect(floatArrayOf(width * 3f, width * 2f), 0f)
+                }
+                canvas.drawLine(startX, startY, endX, endY, paint)
+            }
+            drawEdge(0, top, bounds.left, bounds.top + top / 2f, bounds.right, bounds.top + top / 2f)
+            drawEdge(1, right, bounds.right - right / 2f, bounds.top, bounds.right - right / 2f, bounds.bottom)
+            drawEdge(2, bottom, bounds.left, bounds.bottom - bottom / 2f, bounds.right, bounds.bottom - bottom / 2f)
+            drawEdge(3, left, bounds.left + left / 2f, bounds.top, bounds.left + left / 2f, bounds.bottom)
+            paint.pathEffect = null
+        } else {
+            paint.style = Paint.Style.FILL
+            if (top > 0) { paint.color = colors.getOrElse(0) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.top, bounds.right, bounds.top + top, paint) }
+            if (right > 0) { paint.color = colors.getOrElse(1) { Color.TRANSPARENT }; canvas.drawRect(bounds.right - right, bounds.top, bounds.right, bounds.bottom, paint) }
+            if (bottom > 0) { paint.color = colors.getOrElse(2) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.bottom - bottom, bounds.right, bounds.bottom, paint) }
+            if (left > 0) { paint.color = colors.getOrElse(3) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.top, bounds.left + left, bounds.bottom, paint) }
+        }
     }
 
     override fun setAlpha(alpha: Int) { paint.alpha = alpha; invalidateSelf() }
@@ -3326,6 +3646,8 @@ class MainActivity : AppCompatActivity() {
         val linkTargets = mutableMapOf<View, String>()
         val pressInHandlers = mutableMapOf<View, String>()
         val pressOutHandlers = mutableMapOf<View, String>()
+        val pressUnderlayShowHandlers = mutableMapOf<View, String>()
+        val pressUnderlayHideHandlers = mutableMapOf<View, String>()
         val longPressHandlers = mutableMapOf<View, String>()
         val scrollHandlers = mutableMapOf<View, String>()
         val scrollBeginHandlers = mutableMapOf<View, String>()
@@ -3344,6 +3666,8 @@ class MainActivity : AppCompatActivity() {
         val imageErrorHandlers = mutableMapOf<ImageView, String>()
         val pressActiveOpacities = mutableMapOf<View, Float>()
         val pressBaseOpacities = mutableMapOf<View, Float>()
+        val pressUnderlayColors = mutableMapOf<View, Int>()
+        val pressBaseBackgrounds = mutableMapOf<View, Drawable?>()
         val modalVisibility = mutableMapOf<View, Boolean>()
         val modalCloseHandlers = mutableMapOf<View, String>()
         val layoutHandlers = mutableMapOf<View, String>()
@@ -3459,6 +3783,7 @@ class MainActivity : AppCompatActivity() {
     /** Fields that already carry their text watcher. */
     private val watchedInputs: MutableSet<EditText> = java.util.Collections.newSetFromMap(WeakHashMap())
     private val inputHighlightDefaults = mutableMapOf<EditText, Int>()
+    private val inputPaddingDefaults = mutableMapOf<EditText, IntArray>()
     private val defaultBackgrounds = mutableMapOf<View, Drawable?>()
     private var keyboardInset = 0
     private var animationScaleObserverRegistered = false
@@ -3670,6 +3995,7 @@ class MainActivity : AppCompatActivity() {
         val target = ensureTabRoot(targetIndex) ?: return false
         val host = chrome?.content ?: return false
         if (target === current || host.width <= 0) return false
+        updateSafeAreaInsets(target)
         val chromeLocation = IntArray(2)
         chrome?.getLocationOnScreen(chromeLocation)
         if (horizontalScrollCanConsume(current.view, chromeLocation[0] + x, chromeLocation[1] + y, dx)) return false
@@ -4114,6 +4440,7 @@ class MainActivity : AppCompatActivity() {
         visibleScreen = screen
         if (screen.frameRequested) postFrame(screen)
         if (bars != null) applyChrome(screen)
+        applyScreenBackground(screen)
         if (previous !== screen) {
             if (previous != null && previous.active) send(previous, "SCREEN_FOCUS", JSONObject().put("focused", false))
             if (screen.shown) send(screen, "SCREEN_FOCUS", JSONObject().put("focused", true))
@@ -4149,6 +4476,15 @@ class MainActivity : AppCompatActivity() {
         bars.apply(screen.options, depth, fallback)
     }
 
+    /** Applies a screen-specific background, falling back to the dynamic app colour. */
+    private fun applyScreenBackground(screen: Screen) {
+        val configured = screen.options.opt("backgroundColor")
+            ?.takeUnless { it == JSONObject.NULL }
+            ?.let { craftNativeOptionalString(it) }
+            ?.let { runCatching { craftNativeColor(it) }.getOrNull() }
+        screen.view.setBackgroundColor(configured ?: ContextCompat.getColor(this, R.color.background))
+    }
+
     /** The bridge's capability names: Craft's core set and this host's services. */
     private fun capabilityNames(): JSONArray = capabilities.names().apply {
         services.names().forEach { name -> put(name) }
@@ -4214,6 +4550,7 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun refreshScreenTheme(screen: Screen) {
+        applyScreenBackground(screen)
         screen.mutations.node("root")?.let { renderCommitted(screen, it) }
         screen.controls.values.mapNotNull {
             when (it) {
@@ -4236,7 +4573,20 @@ class MainActivity : AppCompatActivity() {
             if (safeRoot) 0 else windowSafeInsets[2],
             if (safeRoot) 0 else windowSafeInsets[3],
         )
-        val tree = active?.view?.getChildAt(0) as? CraftNativeFlexLayout
+        active?.let(::updateSafeAreaInsets)
+    }
+
+    /**
+     * Applies window insets to a screen that is mounted for an interactive
+     * transition but is not visibleScreen yet. The tab swipe keeps both
+     * screens attached while it moves the incoming one across the window, so
+     * updating only the active screen leaves a SafeAreaView briefly measured
+     * against zero insets.
+     */
+    private fun updateSafeAreaInsets(screen: Screen) {
+        val rootNode = screen.mutations.node("root")
+        val safeRoot = rootNode?.let { canonicalType(it.optString("type")) == "SafeAreaView" } == true
+        val tree = screen.view.getChildAt(0) as? CraftNativeFlexLayout
         if (safeRoot) tree?.setWindowSafeInsets(windowSafeInsets[0], windowSafeInsets[1], windowSafeInsets[2], windowSafeInsets[3])
         else tree?.setWindowSafeInsets(0, 0, 0, 0)
     }
@@ -4325,6 +4675,7 @@ class MainActivity : AppCompatActivity() {
                 if (screen !== appScreen) {
                     payload.keys().forEach { key -> screen.options.put(key, payload.opt(key)) }
                     if (visibleScreen === screen) applyChrome(screen)
+                    if (payload.has("backgroundColor")) applyScreenBackground(screen)
                 }
             }
             "ANIMATE_NEXT" -> if (screen !== appScreen && visibleScreen === screen) animateNextChange(screen, payload)
@@ -4659,6 +5010,9 @@ class MainActivity : AppCompatActivity() {
                     hintTextColors ?: ColorStateList.valueOf(Color.GRAY)
                 }
                 val defaultHighlightColor = inputHighlightDefaults.getOrPut(this) { highlightColor }
+                val defaultPadding = inputPaddingDefaults.getOrPut(this) {
+                    intArrayOf(paddingLeft, paddingTop, paddingRight, paddingBottom)
+                }
                 hint = craftNativeOptionalString(props.opt("placeholder")).orEmpty()
                 setHintTextColor(
                     craftNativeOptionalString(props.opt("placeholderTextColor"))
@@ -4685,7 +5039,8 @@ class MainActivity : AppCompatActivity() {
                 configureTextStyle(this, style)
                 // The style's padding is where the text starts, as on iOS and
                 // the web; without one the field keeps its own.
-                if (listOf("padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom").any { style.has(it) }) {
+                val paddingKeys = listOf("padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom")
+                if (paddingKeys.any(style::has)) {
                     val density = resources.displayMetrics.density
                     val all = craftNativePadding(style, "padding", 0, density)
                     val horizontal = craftNativePadding(style, "paddingHorizontal", all, density)
@@ -4696,6 +5051,11 @@ class MainActivity : AppCompatActivity() {
                         craftNativePadding(style, "paddingRight", horizontal, density),
                         craftNativePadding(style, "paddingBottom", vertical, density),
                     )
+                } else {
+                    // A keyed field can lose its authored padding while the
+                    // EditText itself is retained. Restore the native baseline
+                    // rather than carrying the previous field's spacing.
+                    setPadding(defaultPadding[0], defaultPadding[1], defaultPadding[2], defaultPadding[3])
                 }
                 // Reused EditTexts must forget the previous field's hint as
                 // well as accept a new one. Otherwise a password manager can
@@ -4772,7 +5132,14 @@ class MainActivity : AppCompatActivity() {
                 })
             }
             "Picker" -> (previous as? Spinner ?: Spinner(this)).apply {
-                val options = (0 until children.length()).mapNotNull { index ->
+                val itemOptions = props.optJSONArray("items")?.let { items ->
+                    (0 until items.length()).mapNotNull { index ->
+                        val item = items.optJSONObject(index) ?: return@mapNotNull null
+                        val label = craftNativeOptionalString(item.opt("label")) ?: return@mapNotNull null
+                        craftNativePickerValue(item.opt("value"))?.let { it to label } ?: (label to label)
+                    }
+                }.orEmpty()
+                val options = if (itemOptions.isNotEmpty()) itemOptions else (0 until children.length()).mapNotNull { index ->
                     val option = children.optJSONObject(index) ?: return@mapNotNull null
                     if (option.optString("type") != "Text") return@mapNotNull null
                     val label = (option.optJSONArray("children") ?: JSONArray()).let { text ->
@@ -4780,7 +5147,7 @@ class MainActivity : AppCompatActivity() {
                     }
                     if (label.isBlank()) return@mapNotNull null
                     val optionProps = option.optJSONObject("props")
-                    val value = craftNativeOptionalString(optionProps?.opt("value")) ?: label
+                    val value = craftNativePickerValue(optionProps?.opt("value")) ?: label
                     value to label
                 }
                 val handler = craftNativeEventName(events, "onValueChange", "onChange")
@@ -4792,8 +5159,8 @@ class MainActivity : AppCompatActivity() {
                 adapter = ArrayAdapter(this@MainActivity, android.R.layout.simple_spinner_item, options.map { it.second }).also {
                     it.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
                 }
-                val requested = craftNativeOptionalString(props.opt("selectedValue"))
-                    ?: craftNativeOptionalString(props.opt("value")).orEmpty()
+                val requested = craftNativePickerValue(props.opt("selectedValue"))
+                    ?: craftNativePickerValue(props.opt("value")).orEmpty()
                 val selected = options.indexOfFirst { it.first == requested }.takeIf { it >= 0 } ?: 0
                 isEnabled = !props.optBoolean("disabled", false)
                 // Mounting a controlled picker must not look like a user
@@ -4870,8 +5237,16 @@ class MainActivity : AppCompatActivity() {
             }
             "TouchableOpacity", "TouchableHighlight", "Pressable" -> (previous as? CraftNativeFlexLayout ?: CraftNativeFlexLayout(this)).apply {
                 configureContainer(this, style)
+                val disabled = props.optBoolean("disabled", false)
                 screen.pressActiveOpacities[this] = craftNativeFiniteFloat(props, "activeOpacity", 0.5f)
                 screen.pressBaseOpacities[this] = craftNativeFiniteFloat(style, "opacity", 1f)
+                if (type == "TouchableHighlight" && !disabled) {
+                    craftNativeOptionalString(props.opt("underlayColor"))?.let { screen.pressUnderlayColors[this] = color(it, Color.TRANSPARENT) }
+                        ?: screen.pressUnderlayColors.remove(this)
+                } else {
+                    screen.pressUnderlayColors.remove(this)
+                }
+                screen.pressBaseBackgrounds[this] = this.background
                 reconcileChildren(screen, this, children, identity, next, style, previousControls)
             }
             "Switch" -> (previous as? Switch ?: Switch(this)).apply {
@@ -5011,6 +5386,9 @@ class MainActivity : AppCompatActivity() {
                     "center" -> ImageView.ScaleType.CENTER
                     else -> ImageView.ScaleType.CENTER_INSIDE
                 }
+                craftNativeOptionalString(style.opt("tintColor"))
+                    ?.let { image.setColorFilter(color(it, Color.TRANSPARENT)) }
+                    ?: image.clearColorFilter()
                 val onLoadStart = craftNativeEventName(events, "onLoadStart")
                 if (onLoadStart.isNotBlank()) screen.imageLoadStartHandlers[image] = onLoadStart else screen.imageLoadStartHandlers.remove(image)
                 val onLoad = craftNativeEventName(events, "onLoad")
@@ -5041,8 +5419,9 @@ class MainActivity : AppCompatActivity() {
                 )
             }
             "Map" -> (previous as? CraftNativeMapView ?: CraftNativeMapView(this)).apply {
+                val mapMarkerHandler = craftNativeOptionalString(events.opt("onMarkerPress"))
                 configure(props, children) { markerId ->
-                    markerHandler(markerId)?.let { handler ->
+                    (markerHandler(markerId) ?: mapMarkerHandler)?.let { handler ->
                         send(screen, "EVENT", JSONObject().put("handlerName", handler).put("nativeEvent", JSONObject().put("id", markerId)))
                     }
                 }
@@ -5069,7 +5448,8 @@ class MainActivity : AppCompatActivity() {
                 val refreshNode = (0 until children.length()).asSequence()
                     .mapNotNull { children.optJSONObject(it) }
                     .firstOrNull { canonicalType(it.optString("type")) == "RefreshControl" }
-                val refreshProps = refreshNode?.optJSONObject("props") ?: JSONObject()
+                val propRefresh = props.optJSONObject("refreshControl")
+                val refreshProps = refreshNode?.optJSONObject("props") ?: propRefresh ?: JSONObject()
                 val refreshEvents = refreshNode?.optJSONObject("events") ?: JSONObject()
                 val refreshHandlerName = craftNativeEventName(refreshEvents, "onRefresh")
                     .takeIf { it.isNotBlank() }
@@ -5077,7 +5457,7 @@ class MainActivity : AppCompatActivity() {
                 val refreshHandler = refreshHandlerName?.let { handler ->
                     { send(screen, "EVENT", JSONObject().put("handlerName", handler).put("nativeEvent", JSONObject())) }
                 }
-                setRefreshHandler(refreshHandler, if (refreshNode == null) props.optBoolean("refreshing", false) else refreshProps.optBoolean("refreshing", false))
+                setRefreshHandler(refreshHandler, refreshProps.optBoolean("refreshing", props.optBoolean("refreshing", false)))
                 setRefreshAppearance(refreshProps, resources.displayMetrics.density)
                 val onScroll = craftNativeEventName(events, "onScroll")
                 if (onScroll.isNotBlank()) screen.scrollHandlers[this] = onScroll else screen.scrollHandlers.remove(this)
@@ -5143,6 +5523,8 @@ class MainActivity : AppCompatActivity() {
                     if (child !is JSONObject || canonicalType(child.optString("type")) != "RefreshControl") contentChildren.put(child)
                 }
                 reconcileChildren(screen, content, contentChildren, identity, next, contentStyle, previousControls)
+                setStickyHeaderIndices(props.optJSONArray("stickyHeaderIndices"))
+                setScrollTarget(props.opt("scrollTarget"))
             }
             "FlatList" -> (previous as? CraftNativeRefreshableFlatList ?: CraftNativeRefreshableFlatList(this)).apply {
                 val nativeList = list
@@ -5155,7 +5537,6 @@ class MainActivity : AppCompatActivity() {
                     (getSystemService(INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager)
                         ?.hideSoftInputFromWindow(windowToken, 0)
                 }
-                nativeList.overScrollMode = if (props.optBoolean("bounces", true)) View.OVER_SCROLL_ALWAYS else View.OVER_SCROLL_NEVER
                 reconcileFlatList(screen, nativeList, children, identity, protocolId ?: identity, props, events)
             }
             "View", "SafeAreaView" -> (previous as? CraftNativeFlexLayout ?: CraftNativeFlexLayout(this)).apply {
@@ -5182,6 +5563,10 @@ class MainActivity : AppCompatActivity() {
         val pressOutHandler = craftNativeEventName(events, "onPressOut").takeIf { it.isNotBlank() }
         if (pressInHandler != null) screen.pressInHandlers[control] = pressInHandler else screen.pressInHandlers.remove(control)
         if (pressOutHandler != null) screen.pressOutHandlers[control] = pressOutHandler else screen.pressOutHandlers.remove(control)
+        val underlayShowHandler = if (type == "TouchableHighlight") craftNativeEventName(events, "onShowUnderlay").takeIf { it.isNotBlank() } else null
+        val underlayHideHandler = if (type == "TouchableHighlight") craftNativeEventName(events, "onHideUnderlay").takeIf { it.isNotBlank() } else null
+        if (underlayShowHandler != null) screen.pressUnderlayShowHandlers[control] = underlayShowHandler else screen.pressUnderlayShowHandlers.remove(control)
+        if (underlayHideHandler != null) screen.pressUnderlayHideHandlers[control] = underlayHideHandler else screen.pressUnderlayHideHandlers.remove(control)
         if (type != "Button" && type != "Link" && type != "Checkbox" && type != "TextInput" && type != "Picker" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" && type != "KeyboardAvoidingView" && type != "StatusBar" && type != "RefreshControl" && type != "Map") {
             val handler = craftNativeEventName(events, "onPress", "onClick")
             val disabled = props.optBoolean("disabled", false)
@@ -5190,7 +5575,8 @@ class MainActivity : AppCompatActivity() {
                 ?.trim()
                 ?.takeIf { !disabled && type in setOf("TouchableOpacity", "TouchableHighlight", "Pressable") }
             if (target != null) screen.linkTargets[control] = target else screen.linkTargets.remove(control)
-            val hasPressLifecycle = pressInHandler != null || pressOutHandler != null
+            val hasUnderlay = type == "TouchableHighlight" && screen.pressUnderlayColors[control] != null
+            val hasPressLifecycle = pressInHandler != null || pressOutHandler != null || hasUnderlay
             if ((handler.isNotBlank() || target != null || (type in setOf("TouchableOpacity", "TouchableHighlight", "Pressable") && hasPressLifecycle)) && !disabled) {
                 if (handler.isNotBlank()) screen.handlers[control] = handler else screen.handlers.remove(control)
                 control.isClickable = true
@@ -5206,16 +5592,24 @@ class MainActivity : AppCompatActivity() {
                                 val active = screen.pressActiveOpacities[view] ?: 0.5f
                                 val base = screen.pressBaseOpacities[view] ?: 1f
                                 view.alpha = base * active
+                                screen.pressUnderlayColors[view]?.let { view.background = ColorDrawable(it) }
                                 screen.pressInHandlers[view]?.let { current ->
                                     send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                                 }
+                                screen.pressUnderlayShowHandlers[view]?.let { current ->
+                                    send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
+                                }
                                 true
                             }
                             android.view.MotionEvent.ACTION_UP, android.view.MotionEvent.ACTION_CANCEL -> {
                                 view.alpha = screen.pressBaseOpacities[view] ?: 1f
+                                if (screen.pressBaseBackgrounds.containsKey(view)) view.background = screen.pressBaseBackgrounds[view]
                                 screen.pressOutHandlers[view]?.let { current ->
                                     send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                                 }
+                                screen.pressUnderlayHideHandlers[view]?.let { current ->
+                                    send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
+                                }
                                 if (event.actionMasked == android.view.MotionEvent.ACTION_UP) {
                                     screen.linkTargets[view]?.let { target -> navigateOpen(target); return@setOnTouchListener true }
                                     val current = screen.handlers[view] ?: return@setOnTouchListener true
@@ -5228,6 +5622,7 @@ class MainActivity : AppCompatActivity() {
                     }
                 } else {
                     control.setOnTouchListener(null)
+                    if (screen.pressBaseBackgrounds.containsKey(control)) control.background = screen.pressBaseBackgrounds[control]
                     control.setOnClickListener {
                         screen.linkTargets[control]?.let { target -> navigateOpen(target); return@setOnClickListener }
                         val current = screen.handlers[control] ?: return@setOnClickListener
@@ -5464,9 +5859,10 @@ class MainActivity : AppCompatActivity() {
         }
         val threshold = craftNativeNonNegativeDouble(props, "threshold", 0.1)
         val authoredThreshold = craftNativeNonNegativeDouble(props, "onEndReachedThreshold", threshold)
+        val horizontal = props.optBoolean("horizontal", false)
         list.apply(
             nodes = nodes,
-            horizontal = props.optBoolean("horizontal", false),
+            horizontal = horizontal,
             columns = props.optInt("numColumns", 1),
             inverted = props.optBoolean("inverted", false),
             endReachedThreshold = authoredThreshold,
@@ -5487,6 +5883,18 @@ class MainActivity : AppCompatActivity() {
                 { send(screen, "EVENT", JSONObject().put("handlerName", handler).put("nativeEvent", JSONObject())) }
             },
         )
+        list.setScrollIndicators(
+            props.optBoolean("showsVerticalScrollIndicator", true),
+            props.optBoolean("showsHorizontalScrollIndicator", true),
+        )
+        list.setScrollEnabled(props.optBoolean("scrollEnabled", true))
+        list.setPagingEnabled(props.optBoolean("pagingEnabled", false))
+        list.setScrollTarget(props.opt("scrollTarget"))
+        list.setBounceOptions(
+            props.optBoolean("bounces", true),
+            props.optBoolean("alwaysBounceVertical", !horizontal),
+            props.optBoolean("alwaysBounceHorizontal", horizontal),
+        )
     }
 
     private fun registerFlatListOwnership(screen: Screen, node: JSONObject, owner: String) {
@@ -5519,7 +5927,11 @@ class MainActivity : AppCompatActivity() {
                     craftNativePadding(style, "paddingRight", horizontal, density),
                     craftNativePadding(style, "paddingBottom", vertical, density),
                 )
-            } else if (view.javaClass == TextView::class.java) {
+            } else if (view.javaClass == TextView::class.java || view.javaClass == Button::class.java) {
+                // Plain Android buttons start with zero padding in the native
+                // contract. A keyed button may lose a reactive padding style;
+                // clear that old value just as iOS reapplies its padding every
+                // reconciliation.
                 view.setPadding(0, 0, 0, 0)
             }
         }
@@ -5537,6 +5949,17 @@ class MainActivity : AppCompatActivity() {
             else color(style.optString("backgroundColor"), Color.TRANSPARENT)
         val border = craftNativeNonNegativeDouble(style, "borderWidth", 0.0)
         val radius = craftNativeNonNegativeDouble(style, "borderRadius", 0.0)
+        val gradientDirection = style.optString("gradientDirection").takeIf { it.isNotBlank() }
+        val gradientFrom = style.optString("gradientFrom").takeIf { it.isNotBlank() }
+        val gradientVia = style.optString("gradientVia").takeIf { it.isNotBlank() }
+        val gradientTo = style.optString("gradientTo").takeIf { it.isNotBlank() }
+        val gradientColors = if (gradientDirection != null && gradientFrom != null && gradientTo != null) {
+            listOfNotNull(
+                color(gradientFrom, Color.TRANSPARENT),
+                gradientVia?.let { color(it, Color.TRANSPARENT) },
+                color(gradientTo, Color.TRANSPARENT),
+            ).toIntArray()
+        } else null
         val sideBorderKeys = listOf("borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth")
         val hasSideBorders = (sideBorderKeys + listOf("borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor")).any(style::has)
         val sideWidths = sideBorderKeys.map { dp(craftNativeNonNegativeDouble(style, it, border)) }.toIntArray()
@@ -5554,17 +5977,23 @@ class MainActivity : AppCompatActivity() {
         } else {
             view.background.also { defaultBackgrounds[view] = it }
         }
-        if (background || border > 0 || radius > 0 || hasSideBorders) {
+        if (background || border > 0 || radius > 0 || hasSideBorders || gradientColors != null) {
             if (hasSideBorders) {
                 view.background = CraftNativeSideBorderDrawable(
                     backgroundColor,
                     cornerRadii,
                     sideWidths,
                     sideColors,
+                    style.optString("borderStyle").takeIf { it == "dashed" || it == "dotted" },
+                    gradientDirection,
+                    gradientColors,
                 )
             } else {
                 view.background = GradientDrawable().apply {
-                    setColor(backgroundColor)
+                    if (gradientColors != null) {
+                        orientation = craftNativeGradientOrientation(gradientDirection)
+                        colors = gradientColors
+                    } else setColor(backgroundColor)
                     if (hasCornerRadii) setCornerRadii(cornerRadii) else cornerRadius = dp(radius).toFloat()
                     if (border > 0) {
                         val borderColor = color(style.optString("borderColor"), Color.TRANSPARENT)
@@ -5605,6 +6034,15 @@ class MainActivity : AppCompatActivity() {
             view.invalidateOutline()
         } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
             view.outlineProvider = ViewOutlineProvider.BACKGROUND
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                // A retained view may lose an authored shadow while keeping
+                // its native object. Restore Android's default outline colors
+                // too; otherwise a later elevation-only style inherits the
+                // previous shadow's custom ambient/spot tint.
+                view.outlineAmbientShadowColor = Color.BLACK
+                view.outlineSpotShadowColor = Color.BLACK
+                view.invalidateOutline()
+            }
         }
         if (view is ImageView) {
             val tint = style.opt("tintColor") as? String
@@ -5706,10 +6144,18 @@ class MainActivity : AppCompatActivity() {
             else -> Typeface.NORMAL
         }
         view.typeface = Typeface.create("sans-serif", weight)
-        if (!style.has("width") && !style.has("height")) {
+        val hasExplicitWidth = style.has("width") && !style.isNull("width")
+        val hasExplicitHeight = style.has("height") && !style.isNull("height")
+        if (!hasExplicitWidth && !hasExplicitHeight) {
             val box = dp(size.toDouble())
             view.minimumWidth = box
             view.minimumHeight = box
+        } else {
+            // A retained icon may move from the implicit square to an
+            // explicitly sized layout. Do not let the old minimum constrain
+            // the authored dimensions.
+            view.minimumWidth = 0
+            view.minimumHeight = 0
         }
     }
 
@@ -5859,6 +6305,17 @@ class MainActivity : AppCompatActivity() {
         else -> ""
     }
 
+    private fun imageHeaders(source: Any?): Map<String, String> {
+        val objectSource = source as? JSONObject ?: return emptyMap()
+        val raw = objectSource.optJSONObject("headers") ?: return emptyMap()
+        return linkedMapOf<String, String>().apply {
+            raw.keys().forEach { name -> craftNativeOptionalString(raw.opt(name))?.let { put(name, it) } }
+        }
+    }
+
+    private fun imageRequestKey(uri: String, headers: Map<String, String>): String =
+        uri + "\u0000" + headers.toSortedMap().entries.joinToString("\u0000") { "${it.key}=${it.value}" }
+
     private fun immediateImage(uri: String): Bitmap? {
         if (uri.startsWith("data:image/") && uri.contains(',')) {
             val bytes = runCatching { Base64.decode(uri.substringAfter(','), Base64.DEFAULT) }.getOrNull()
@@ -5870,6 +6327,8 @@ class MainActivity : AppCompatActivity() {
 
     private fun updateImage(screen: Screen, view: ImageView, source: Any?, defaultSource: Any? = null) {
         val uri = imageUri(source)
+        val headers = imageHeaders(source)
+        val requestKey = imageRequestKey(uri, headers)
         if (uri.isBlank()) {
             if (imageSources[view] == "") return
             imageJobs.remove(view)?.cancel(true)
@@ -5880,9 +6339,9 @@ class MainActivity : AppCompatActivity() {
             imageFailure(screen, view, uri, "Image source is missing")
             return
         }
-        if (imageSources[view] == uri) return
+        if (imageSources[view] == requestKey) return
         imageJobs.remove(view)?.cancel(true)
-        imageSources[view] = uri
+        imageSources[view] = requestKey
         imageErrors.remove(view)
         view.setImageDrawable(null)
         imageDidChange(view)
@@ -5920,11 +6379,12 @@ class MainActivity : AppCompatActivity() {
                 val connection = URL(uri).openConnection().apply {
                     connectTimeout = 10_000
                     readTimeout = 10_000
+                    headers.forEach { (name, value) -> setRequestProperty(name, value) }
                 }
                 connection.getInputStream().use(BitmapFactory::decodeStream)
             }.getOrNull()
             runOnUiThread {
-                if (imageSources[view] != uri) return@runOnUiThread
+                if (imageSources[view] != requestKey) return@runOnUiThread
                 imageJobs.remove(view)
                 if (bitmap != null) {
                     view.setImageBitmap(bitmap)
@@ -6508,7 +6968,13 @@ class MainActivity : AppCompatActivity() {
 
     override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean, newConfig: Configuration) {
         super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)
-        if (isInPictureInPictureMode) showVideoAlone() else putVideoBack()
+        if (isInPictureInPictureMode) {
+            floatingVideo()?.notifyPictureInPicture(true)
+            showVideoAlone()
+        } else {
+            pictureInPictureVideo?.notifyPictureInPicture(false)
+            putVideoBack()
+        }
     }
 
     /**
@@ -6584,6 +7050,7 @@ class MainActivity : AppCompatActivity() {
         released.filterIsInstance<EditText>().forEach {
             inputHintDefaults.remove(it)
             inputHighlightDefaults.remove(it)
+            inputPaddingDefaults.remove(it)
             screen.suppressedTextChanges.remove(it)
             screen.inputEchoes.remove(it)
             val identity = screen.inputIdentities.remove(it)
@@ -6594,6 +7061,10 @@ class MainActivity : AppCompatActivity() {
         screen.handlers.keys.removeAll(released)
         screen.pressInHandlers.keys.removeAll(released)
         screen.pressOutHandlers.keys.removeAll(released)
+        screen.pressUnderlayShowHandlers.keys.removeAll(released)
+        screen.pressUnderlayHideHandlers.keys.removeAll(released)
+        screen.pressUnderlayColors.keys.removeAll(released)
+        screen.pressBaseBackgrounds.keys.removeAll(released)
         screen.longPressHandlers.keys.removeAll(released)
         screen.layoutHandlers.keys.removeAll(released)
         screen.layoutListeners.forEach { (view, listener) ->
@@ -6618,6 +7089,8 @@ class MainActivity : AppCompatActivity() {
         screen.imageErrorHandlers.keys.removeAll(releasedImages)
         screen.pressActiveOpacities.keys.removeAll(released)
         screen.pressBaseOpacities.keys.removeAll(released)
+        screen.pressUnderlayColors.keys.removeAll(released)
+        screen.pressBaseBackgrounds.keys.removeAll(released)
         screen.modalVisibility.keys.removeAll(released)
         screen.modalCloseHandlers.keys.removeAll(released)
     }
@@ -6648,6 +7121,10 @@ class MainActivity : AppCompatActivity() {
         screen.handlers.clear()
         screen.pressInHandlers.clear()
         screen.pressOutHandlers.clear()
+        screen.pressUnderlayShowHandlers.clear()
+        screen.pressUnderlayHideHandlers.clear()
+        screen.pressUnderlayColors.clear()
+        screen.pressBaseBackgrounds.clear()
         screen.layoutHandlers.clear()
         screen.lastLayoutBounds.clear()
         screen.scrollHandlers.clear()