craft-native 0.0.158 → 0.0.161

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

@@ -45,11 +45,14 @@ import android.view.ViewTreeObserver
 import android.widget.AdapterView
 import android.widget.ArrayAdapter
 import android.widget.Button
+import android.widget.CheckBox
+import android.widget.DatePicker
 import android.widget.EditText
 import android.widget.FrameLayout
 import android.widget.HorizontalScrollView
 import android.widget.ImageView
 import android.widget.LinearLayout
+import android.widget.TimePicker
 import android.widget.ScrollView
 import android.widget.SeekBar
 import android.widget.Spinner
@@ -76,6 +79,9 @@ import com.craft.runtime.CraftNative
 import org.json.JSONArray
 import org.json.JSONObject
 import java.net.URL
+import java.text.SimpleDateFormat
+import java.util.Calendar
+import java.util.Locale
 import java.util.concurrent.Executors
 import java.util.concurrent.Future
 import java.util.UUID
@@ -109,6 +115,7 @@ private data class CraftNativeLength(
 private data class CraftNativeLayoutStyle(
     val width: CraftNativeLength? = null,
     val height: CraftNativeLength? = null,
+    val aspectRatio: Double? = null,
     val minWidth: CraftNativeLength? = null,
     val maxWidth: CraftNativeLength? = null,
     val minHeight: CraftNativeLength? = null,
@@ -137,6 +144,7 @@ private data class CraftNativeLayoutStyle(
             val flex = decimal("flex")
             return CraftNativeLayoutStyle(
                 width = length("width"), height = length("height"),
+                aspectRatio = decimal("aspectRatio")?.takeIf { it.isFinite() && it > 0.0 },
                 minWidth = length("minWidth"), maxWidth = length("maxWidth"),
                 minHeight = length("minHeight"), maxHeight = length("maxHeight"),
                 position = raw.opt("position")
@@ -389,7 +397,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     private var columnGap = 0
     private var grid = false
     private var gridColumns = 1
-    private var gridAutoRows: Int? = null
+    private var gridAutoRows: CraftNativeLength? = null
     private var reverse = false
 
     fun configure(style: JSONObject, density: Float) {
@@ -406,7 +414,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         gridColumns = craftNativeGridColumnCount(
             if (style.has("gridTemplateColumns")) style.opt("gridTemplateColumns") else style.opt("gridColumns")
         )
-        gridAutoRows = style.optDouble("gridAutoRows", Double.NaN).takeUnless { it.isNaN() }?.let { (it * density).toInt() }
+        gridAutoRows = CraftNativeLength.from(style.opt("gridAutoRows"), density)
         val padding = (style.optDouble("padding", 0.0) * density).toInt()
         val horizontal = (style.optDouble("paddingHorizontal", padding.toDouble() / density.toDouble()) * density).toInt()
         val vertical = (style.optDouble("paddingVertical", padding.toDouble() / density.toDouble()) * density).toInt()
@@ -534,7 +542,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             }
         }
         val rowHeights = rows.map { row ->
-            max(gridAutoRows ?: 0, row.maxOfOrNull { entry ->
+            max(gridAutoRows?.resolve(height - paddingTop - paddingBottom) ?: 0, row.maxOfOrNull { entry ->
                 val lp = entry.view.layoutParams as? MarginLayoutParams
                 entry.height + (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
             } ?: 0)
@@ -559,7 +567,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             val childHeight = measureChildHeight(child, style, height, verticalMargins)
             val column = flowIndex % columns
             val row = flowIndex / columns
-            while (rowHeights.size <= row) rowHeights += gridAutoRows ?: 0
+            while (rowHeights.size <= row) rowHeights += gridAutoRows?.resolve(null) ?: 0
             columnWidths[column] = max(columnWidths[column], childWidth + horizontalMargins)
             rowHeights[row] = max(rowHeights[row], childHeight + verticalMargins)
             flowIndex += 1
@@ -577,12 +585,30 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         // The STX style is authoritative. A reused View may still carry a
         // previous fixed LayoutParams width after a reactive width is removed;
         // using that value here prevents intrinsic sizing from being restored.
-        val explicit = style.width?.resolve(base) ?: flexBasis
-        val target = explicit ?: base
-        val spec = if (explicit != null) View.MeasureSpec.makeMeasureSpec(target, View.MeasureSpec.EXACTLY)
-        else View.MeasureSpec.makeMeasureSpec(base, View.MeasureSpec.AT_MOST)
-        child.measure(spec, View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
-        return clamp(if (explicit != null) target else child.measuredWidth, style.minWidth?.resolve(base), style.maxWidth?.resolve(base))
+        val authored = style.width?.resolve(base)
+        val explicit = authored ?: style.aspectRatio?.let { ratio -> style.height?.resolve(base)?.times(ratio)?.roundToInt() } ?: flexBasis
+        if (explicit != null) {
+            child.measure(
+                View.MeasureSpec.makeMeasureSpec(explicit, View.MeasureSpec.EXACTLY),
+                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
+            )
+            return clamp(explicit, style.minWidth?.resolve(base), style.maxWidth?.resolve(base))
+        }
+        // Measure text and nested flex containers at max-content first. An
+        // AT_MOST spec equal to the available room can make Android report the
+        // longest-word (min-content) width for a wrapping TextView, collapsing
+        // shrink-to-fit bubbles and pills before the parent can clamp them.
+        val intrinsicSpec = if (child is TextView && child !is EditText) 1_000_000 else base
+        child.measure(
+            View.MeasureSpec.makeMeasureSpec(intrinsicSpec, View.MeasureSpec.AT_MOST),
+            View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
+        )
+        val target = clamp(min(base, child.measuredWidth), style.minWidth?.resolve(base), style.maxWidth?.resolve(base))
+        child.measure(
+            View.MeasureSpec.makeMeasureSpec(target, View.MeasureSpec.AT_MOST),
+            View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
+        )
+        return target
     }
 
     private fun measureChildHeight(child: View, style: CraftNativeLayoutStyle, available: Int, margins: Int): Int {
@@ -590,7 +616,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         val flexBasis = if (orientation == VERTICAL) style.flexBasis?.resolve(base) else null
         // Match width measurement: do not let stale native LayoutParams keep
         // a removed reactive height fixed.
-        val explicit = style.height?.resolve(base) ?: flexBasis
+        val authored = style.height?.resolve(base)
+        val explicit = authored ?: style.aspectRatio?.let { ratio -> style.width?.resolve(base)?.div(ratio)?.roundToInt() } ?: flexBasis
         val target = explicit ?: base
         val spec = if (explicit != null) View.MeasureSpec.makeMeasureSpec(target, View.MeasureSpec.EXACTLY)
         else View.MeasureSpec.makeMeasureSpec(base, View.MeasureSpec.AT_MOST)
@@ -629,6 +656,68 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         else -> 0
     }
 
+    /** Keep the old-runtime shim on the same bounded-flex water-fill rule as the Zig bridge. */
+    private fun fallbackFlexWidths(line: Line, available: Int, gap: Int): IntArray {
+        val horizontal = orientation == HORIZONTAL
+        val hypothetical = line.entries.sumOf { entry ->
+            val lp = entry.view.layoutParams as? MarginLayoutParams
+            val margins = if (horizontal) (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
+            else (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
+            (if (horizontal) entry.width else entry.height) + margins
+        } + max(0, line.entries.size - 1) * gap
+        val free = available - hypothetical
+        val growTotal = line.entries.sumOf { it.style.flexGrow }
+        val shrinkTotal = line.entries.sumOf {
+            (it.style.flexShrink ?: defaultFlexShrink(it.view)) * (if (horizontal) it.width else it.height)
+        }
+        val growing = free > 0 && growTotal > 0
+        val shrinking = free < 0 && shrinkTotal > 0
+        val widths = IntArray(line.entries.size) { index -> if (horizontal) line.entries[index].width else line.entries[index].height }
+        if (!growing && !shrinking) return widths
+
+        val frozen = BooleanArray(widths.size)
+        repeat(widths.size + 1) {
+            var fixed = max(0, widths.size - 1) * gap.toDouble()
+            var activeBasis = 0.0
+            var factor = 0.0
+            for ((index, entry) in line.entries.withIndex()) {
+                val lp = entry.view.layoutParams as? MarginLayoutParams
+                val margins = if (horizontal) (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
+                else (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
+                fixed += margins
+                if (frozen[index]) fixed += widths[index]
+                else {
+                    val basis = if (horizontal) entry.width else entry.height
+                    activeBasis += basis
+                    factor += if (growing) entry.style.flexGrow
+                    else (entry.style.flexShrink ?: defaultFlexShrink(entry.view)) * basis
+                }
+            }
+            if (factor <= 0) return@repeat
+            val remaining = available - fixed - activeBasis
+            var froze = false
+            for ((index, entry) in line.entries.withIndex()) {
+                if (frozen[index]) continue
+                val basis = (if (horizontal) entry.width else entry.height).toDouble()
+                val share = if (growing) remaining * entry.style.flexGrow / factor
+                else -remaining * (entry.style.flexShrink ?: defaultFlexShrink(entry.view)) * basis / factor
+                val raw = if (growing) basis + share else basis - share
+                val lower = (if (horizontal) entry.style.minWidth else entry.style.minHeight)?.resolve(if (horizontal) width - paddingLeft - paddingRight else height - paddingTop - paddingBottom)
+                val upper = (if (horizontal) entry.style.maxWidth else entry.style.maxHeight)?.resolve(if (horizontal) width - paddingLeft - paddingRight else height - paddingTop - paddingBottom)
+                var bounded = raw
+                if (lower != null) bounded = max(bounded, lower.toDouble())
+                if (upper != null) bounded = min(bounded, upper.toDouble())
+                widths[index] = bounded.roundToInt().coerceAtLeast(0)
+                if (bounded != raw) {
+                    frozen[index] = true
+                    froze = true
+                }
+            }
+            if (!froze) return@repeat
+        }
+        return widths
+    }
+
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         val widthMode = View.MeasureSpec.getMode(widthMeasureSpec)
         val width = View.MeasureSpec.getSize(widthMeasureSpec).takeUnless { widthMode == View.MeasureSpec.UNSPECIFIED } ?: 1_000_000
@@ -667,6 +756,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             val contentWidth = width - paddingLeft - paddingRight
             val contentHeight = height - paddingTop - paddingBottom
             val flow = layout.rows.flatten()
+            // Older runtimes return null for the optional symbol; the local
+            // layout below remains the compatibility path in that case.
             val sharedFrames = CraftNative.grid(
                 contentWidth.toFloat(), contentHeight.toFloat(), gridColumns, columnGap.toFloat(), rowGap.toFloat(),
                 flow.map { it.width.toFloat() }.toFloatArray(), flow.map { it.height.toFloat() }.toFloatArray(),
@@ -684,6 +775,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                     val align = it.style.alignSelf ?: alignItems
                     listOf(if (align == "stretch") 1f else 0f, if (align == "center") 1f else if (align == "flex-end") 2f else 0f)
                 }.toFloatArray(),
+                gridAutoRows?.resolve(contentHeight)?.toFloat(),
+                alignContentCode(),
             )
             if (sharedFrames != null) {
                 for ((index, entry) in flow.withIndex()) {
@@ -695,9 +788,26 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                     entry.view.layout(x, y, x + childWidth, y + childHeight)
                 }
             } else {
-                var rowTop = paddingTop
+                val totalRows = layout.rowHeights.sum()
+                val rowGaps = max(0, layout.rowHeights.size - 1) * rowGap
+                val freeRows = max(0, contentHeight - totalRows - rowGaps)
+                val rowCount = max(1, layout.rowHeights.size)
+                var rowLeading = 0
+                var rowBetween = rowGap
+                var rowExtra = 0
+                when (alignContentCode()) {
+                    1 -> rowLeading = freeRows / 2
+                    2 -> rowLeading = freeRows
+                    3 -> if (rowCount > 1) rowBetween += freeRows / (rowCount - 1)
+                    4 -> {
+                        rowLeading = freeRows / (rowCount * 2)
+                        rowBetween += freeRows / rowCount
+                    }
+                    5 -> rowExtra = freeRows / rowCount
+                }
+                var rowTop = paddingTop + rowLeading
                 for ((rowIndex, row) in layout.rows.withIndex()) {
-                    val rowHeight = layout.rowHeights[rowIndex]
+                    val rowHeight = layout.rowHeights[rowIndex] + rowExtra
                     for ((column, entry) in row.withIndex()) {
                         val align = entry.style.alignSelf ?: alignItems
                         val lp = entry.view.layoutParams as? MarginLayoutParams
@@ -721,7 +831,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                         }
                         entry.view.layout(x, y, x + childWidth, y + childHeight)
                     }
-                    rowTop += rowHeight + rowGap
+                    rowTop += rowHeight + rowBetween
                 }
             }
             for (entry in layout.absolute) {
@@ -770,7 +880,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         var crossOffset = (if (orientation == HORIZONTAL) paddingTop else paddingLeft) + crossLeading
         for ((lineIndex, line) in lines.withIndex()) {
             val lineOffset = sharedCross?.first?.get(lineIndex)?.roundToInt()?.let { (if (orientation == HORIZONTAL) paddingTop else paddingLeft) + it } ?: crossOffset
-            val rawFree = availableMain - line.main
+            val fallbackWidths = fallbackFlexWidths(line, availableMain, gap)
             val sharedPrimary = CraftNative.flexRow(
                 availableMain.toFloat(),
                 gap.toFloat(),
@@ -801,16 +911,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                     sharedPrimary[index].roundToInt() + margins
                 } + max(0, line.entries.size - 1) * gap
             } else {
-                val factors = line.entries.map { if (rawFree >= 0) it.style.flexGrow else it.style.flexShrink ?: defaultFlexShrink(it.view) }
-                val totalFactor = factors.sum()
                 line.entries.indices.sumOf { index ->
-                    val base = if (orientation == HORIZONTAL) line.entries[index].width else line.entries[index].height
-                    val primary = if (totalFactor > 0) max(0, (base + rawFree * factors[index] / totalFactor).toInt()) else base
-                    val constrained = if (orientation == HORIZONTAL) {
-                        clamp(primary, line.entries[index].style.minWidth?.resolve(contentWidth), line.entries[index].style.maxWidth?.resolve(contentWidth))
-                    } else {
-                        clamp(primary, line.entries[index].style.minHeight?.resolve(contentHeight), line.entries[index].style.maxHeight?.resolve(contentHeight))
-                    }
+                    val constrained = fallbackWidths[index]
                     val lp = line.entries[index].view.layoutParams as? MarginLayoutParams
                     val margins = if (orientation == HORIZONTAL) (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
                         else (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
@@ -851,17 +953,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                     ?: mainOffset + marginStart
                 val x = if (orientation == HORIZONTAL) positionedMain else lineOffset + crossPosition
                 val y = if (orientation == HORIZONTAL) lineOffset + crossPosition else positionedMain
-                val distributedPrimary = sharedPrimary?.get(index)?.roundToInt() ?: run {
-                    val primary = if (orientation == HORIZONTAL) entry.width else entry.height
-                    val factor = if (rawFree >= 0) entry.style.flexGrow else entry.style.flexShrink ?: defaultFlexShrink(entry.view)
-                    val totalFactor = line.entries.sumOf { if (rawFree >= 0) it.style.flexGrow else it.style.flexShrink ?: defaultFlexShrink(it.view) }
-                    val distributed = if (totalFactor > 0) max(0, (primary + rawFree * factor / totalFactor).toInt()) else primary
-                    if (orientation == HORIZONTAL) {
-                        clamp(distributed, entry.style.minWidth?.resolve(contentWidth), entry.style.maxWidth?.resolve(contentWidth))
-                    } else {
-                        clamp(distributed, entry.style.minHeight?.resolve(contentHeight), entry.style.maxHeight?.resolve(contentHeight))
-                    }
-                }
+                val distributedPrimary = sharedPrimary?.get(index)?.roundToInt() ?: fallbackWidths[index]
                 val w = if (orientation == HORIZONTAL) distributedPrimary else crossSize
                 val h = if (orientation == HORIZONTAL) crossSize else distributedPrimary
                 entry.view.layout(x, y, x + w, y + h)
@@ -890,6 +982,67 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     }
 }
 
+/** An image-backed flex container with ordinary native children over the image. */
+private class CraftNativeImageBackgroundView(context: Context) : FrameLayout(context) {
+    val image = ImageView(context)
+    val content = CraftNativeFlexLayout(context)
+
+    init {
+        clipChildren = true
+        image.scaleType = ImageView.ScaleType.CENTER_CROP
+        image.isClickable = false
+        addView(image, FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))
+        addView(content, FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))
+    }
+}
+
+/** A flex container that responds to the activity's IME inset. */
+private class CraftNativeKeyboardAvoidingView(context: Context) : FrameLayout(context) {
+    val content = CraftNativeFlexLayout(context)
+    private var behavior = "padding"
+    private var keyboardVerticalOffset = 0
+    private var keyboardInset = 0
+    private var basePadding = intArrayOf(0, 0, 0, 0)
+
+    init {
+        addView(content, FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))
+    }
+
+    fun configure(props: JSONObject, style: JSONObject, density: Float) {
+        behavior = props.optString("behavior", "padding").takeIf { it in setOf("height", "position", "padding") } ?: "padding"
+        keyboardVerticalOffset = (props.optDouble("keyboardVerticalOffset", 0.0) * density).roundToInt()
+        content.configure(style, density)
+        basePadding = intArrayOf(content.paddingLeft, content.paddingTop, content.paddingRight, content.paddingBottom)
+        applyKeyboardInset()
+    }
+
+    fun setKeyboardInset(inset: Int) {
+        if (keyboardInset == inset) return
+        keyboardInset = max(0, inset)
+        applyKeyboardInset()
+    }
+
+    private fun effectiveInset(): Int = max(0, keyboardInset - keyboardVerticalOffset)
+
+    private fun applyKeyboardInset() {
+        val inset = effectiveInset()
+        translationY = if (behavior == "position") -inset.toFloat() else 0f
+        val bottom = if (behavior == "padding") basePadding[3] + inset else basePadding[3]
+        content.setPadding(basePadding[0], basePadding[1], basePadding[2], bottom)
+        requestLayout()
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val inset = effectiveInset()
+        val adjustedHeight = if (behavior == "height" && inset > 0 && MeasureSpec.getMode(heightMeasureSpec) != MeasureSpec.UNSPECIFIED) {
+            MeasureSpec.makeMeasureSpec(max(0, MeasureSpec.getSize(heightMeasureSpec) - inset), MeasureSpec.getMode(heightMeasureSpec))
+        } else {
+            heightMeasureSpec
+        }
+        super.onMeasure(widthMeasureSpec, adjustedHeight)
+    }
+}
+
 private class CraftNativeScrollView(context: Context) : SwipeRefreshLayout(context) {
     val content = CraftNativeFlexLayout(context)
     private val vertical = ScrollView(context)
@@ -939,6 +1092,21 @@ private class CraftNativeScrollView(context: Context) : SwipeRefreshLayout(conte
         addView(scroller, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
     }
 
+    /**
+     * A targeted mutation can change a child's size without reconciling the
+     * scroll content tree. Invalidate both the custom content layout and the
+     * platform scroller so its measured content range is recomputed too.
+     */
+    fun invalidateContentLayout() {
+        content.forceLayout()
+        content.requestLayout()
+        val scroller = if (horizontalMode == true) horizontal else vertical
+        scroller.forceLayout()
+        scroller.requestLayout()
+        forceLayout()
+        requestLayout()
+    }
+
     fun setNativeNestedScrollingEnabled(value: Boolean) {
         vertical.isNestedScrollingEnabled = value
         horizontal.isNestedScrollingEnabled = value
@@ -1084,6 +1252,25 @@ private class CraftNativeScrollView(context: Context) : SwipeRefreshLayout(conte
 
 private class CraftNativeFlexSpacer(context: Context) : View(context)
 
+/**
+ * A small, dependency-free native icon surface for Android.
+ *
+ * STX resolves Iconify names to the SF Symbol name that iOS draws. Android
+ * does not ship SF Symbols, so the maintained host uses the corresponding
+ * Unicode glyph for the common cross-platform symbols and a hollow circle for
+ * an unknown symbol. Keeping this as a TextView gives the glyph the same
+ * intrinsic measurement, tint, accessibility, and reconciliation behavior as
+ * the other native leaf controls without adding an icon-font dependency.
+ */
+private class CraftNativeIconView(context: Context) : TextView(context) {
+    init {
+        includeFontPadding = false
+        gravity = Gravity.CENTER
+        setPadding(0, 0, 0, 0)
+        isSingleLine = true
+    }
+}
+
 private class CraftNativeModalView(context: Context) : FrameLayout(context) {
     val content = CraftNativeFlexLayout(context)
     private val blocker = View(context)
@@ -1214,6 +1401,176 @@ private class CraftNativeActivityIndicator(context: Context) :
     }
 }
 
+/** Android counterpart to iOS's UIDatePicker-backed native DatePicker. */
+private class CraftNativeDatePickerView(context: Context) : FrameLayout(context) {
+    private enum class PickerMode { DATE, TIME, DATE_TIME, COUNTDOWN }
+    private val maxCountdownSeconds = 23 * 3600 + 59 * 60 + 59
+
+    private var pickerMode: PickerMode? = null
+    private var datePicker: DatePicker? = null
+    private var timePicker: TimePicker? = null
+    private var minuteInterval = 1
+    private var suppressChanges = true
+    var onValueChanged: (() -> Unit)? = null
+
+    init {
+        isFocusable = true
+    }
+
+    fun configure(props: JSONObject) {
+        val requestedMode = when (props.optString("mode")) {
+            "time" -> PickerMode.TIME
+            "datetime", "dateAndTime", "datetime-local" -> PickerMode.DATE_TIME
+            "countdown" -> PickerMode.COUNTDOWN
+            else -> PickerMode.DATE
+        }
+        if (pickerMode != requestedMode) {
+            pickerMode = requestedMode
+            datePicker = null
+            timePicker = null
+            removeAllViews()
+            val content = LinearLayout(context).apply {
+                orientation = LinearLayout.VERTICAL
+                gravity = Gravity.CENTER
+            }
+            if (requestedMode == PickerMode.DATE || requestedMode == PickerMode.DATE_TIME) {
+                datePicker = DatePicker(context).also { picker ->
+                    val today = Calendar.getInstance()
+                    picker.init(today.get(Calendar.YEAR), today.get(Calendar.MONTH), today.get(Calendar.DAY_OF_MONTH)) { _, _, _, _ -> changed() }
+                    content.addView(picker, LinearLayout.LayoutParams(
+                        ViewGroup.LayoutParams.WRAP_CONTENT,
+                        ViewGroup.LayoutParams.WRAP_CONTENT,
+                    ))
+                }
+            }
+            if (requestedMode != PickerMode.DATE) {
+                timePicker = TimePicker(context).also { picker ->
+                    picker.setIs24HourView(true)
+                    picker.setOnTimeChangedListener { _, _, _ -> changed() }
+                    content.addView(picker, LinearLayout.LayoutParams(
+                        ViewGroup.LayoutParams.WRAP_CONTENT,
+                        ViewGroup.LayoutParams.WRAP_CONTENT,
+                    ))
+                }
+            }
+            addView(content, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT))
+        }
+
+        suppressChanges = true
+        minuteInterval = props.optInt("minuteInterval", 1).takeIf { it in 1..30 && 60 % it == 0 } ?: 1
+        pickerDate(props.opt("minimumDate"))?.let { datePicker?.minDate = it.timeInMillis }
+        pickerDate(props.opt("maximumDate"))?.let { datePicker?.maxDate = it.timeInMillis }
+        if (requestedMode == PickerMode.COUNTDOWN) {
+            countdownSeconds(props.opt("value"))?.let { applyCountdown(it) }
+        } else {
+            pickerDate(props.opt("value"))?.let { applyDate(it) }
+        }
+        val enabled = !props.optBoolean("disabled", false)
+        isEnabled = enabled
+        datePicker?.isEnabled = enabled
+        timePicker?.isEnabled = enabled
+        for (index in 0 until childCount) getChildAt(index).isEnabled = enabled
+        suppressChanges = false
+    }
+
+    fun event(): JSONObject {
+        if (pickerMode == PickerMode.COUNTDOWN) {
+            val seconds = currentCountdownSeconds()
+            return JSONObject()
+                .put("value", formatCountdown(seconds))
+                .put("iso", "PT${seconds}S")
+                .put("timestamp", seconds * 1000L)
+        }
+        val current = currentDate()
+        val valueFormat = when (pickerMode) {
+            PickerMode.DATE -> "yyyy-MM-dd"
+            PickerMode.TIME -> "HH:mm"
+            else -> "yyyy-MM-dd'T'HH:mm"
+        }
+        val value = SimpleDateFormat(valueFormat, Locale.US).apply { isLenient = false }.format(current.time)
+        val iso = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX", Locale.US).format(current.time)
+        return JSONObject().put("value", value).put("iso", iso).put("timestamp", current.timeInMillis)
+    }
+
+    private fun changed() {
+        if (suppressChanges) return
+        val picker = timePicker ?: return
+        val snapped = ((picker.minute + minuteInterval / 2) / minuteInterval * minuteInterval).coerceAtMost(59)
+        if (snapped != picker.minute) {
+            suppressChanges = true
+            picker.minute = snapped
+            suppressChanges = false
+        }
+        onValueChanged?.invoke()
+    }
+
+    private fun applyDate(value: Calendar) {
+        datePicker?.updateDate(value.get(Calendar.YEAR), value.get(Calendar.MONTH), value.get(Calendar.DAY_OF_MONTH))
+        timePicker?.hour = value.get(Calendar.HOUR_OF_DAY)
+        timePicker?.minute = value.get(Calendar.MINUTE)
+    }
+
+    private fun applyCountdown(seconds: Int) {
+        timePicker?.hour = (seconds / 3600).coerceIn(0, 23)
+        timePicker?.minute = (seconds % 3600 / 60).coerceIn(0, 59)
+    }
+
+    private fun currentCountdownSeconds(): Int = timePicker?.let { it.hour * 3600 + it.minute * 60 } ?: 0
+
+    private fun formatCountdown(seconds: Int): String = "%02d:%02d:%02d".format(
+        Locale.US,
+        seconds / 3600,
+        seconds % 3600 / 60,
+        seconds % 60,
+    )
+
+    private fun currentDate(): Calendar = Calendar.getInstance().also { current ->
+        datePicker?.let {
+            current.set(Calendar.YEAR, it.year)
+            current.set(Calendar.MONTH, it.month)
+            current.set(Calendar.DAY_OF_MONTH, it.dayOfMonth)
+        }
+        timePicker?.let {
+            current.set(Calendar.HOUR_OF_DAY, it.hour)
+            current.set(Calendar.MINUTE, it.minute)
+            current.set(Calendar.SECOND, 0)
+            current.set(Calendar.MILLISECOND, 0)
+        }
+    }
+
+    private fun pickerDate(value: Any?): Calendar? {
+        if (value is Number && value !is Boolean) return Calendar.getInstance().apply { timeInMillis = value.toLong() }
+        val text = value?.toString()?.trim().orEmpty()
+        if (text.isBlank() || text == JSONObject.NULL.toString()) return null
+        val formats = listOf(
+            "HH:mm", "HH:mm:ss", "yyyy-MM-dd", "yyyy-MM-dd'T'HH:mm",
+            "yyyy-MM-dd'T'HH:mm:ss", "yyyy-MM-dd'T'HH:mm:ss.SSSXXX", "yyyy-MM-dd'T'HH:mm:ssX",
+        )
+        formats.firstNotNullOfOrNull { format ->
+            runCatching {
+                SimpleDateFormat(format, Locale.US).apply { isLenient = false }.parse(text)
+            }.getOrNull()
+        }?.let { parsed ->
+            return Calendar.getInstance().apply { time = parsed }
+        }
+        return null
+    }
+
+    private fun countdownSeconds(value: Any?): Int? {
+        if (value is Number && value !is Boolean) return value.toDouble().coerceIn(0.0, maxCountdownSeconds.toDouble()).roundToInt()
+        val text = value?.toString()?.trim().orEmpty()
+        if (text.isBlank() || text == JSONObject.NULL.toString()) return null
+        text.toDoubleOrNull()?.takeIf { it.isFinite() }?.let { return it.coerceIn(0.0, maxCountdownSeconds.toDouble()).roundToInt() }
+        val parts = text.split(':').mapNotNull { it.toDoubleOrNull() }
+        if (parts.size != 2 && parts.size != 3) return null
+        val hours = parts[0]
+        val minutes = parts[1]
+        val seconds = if (parts.size == 3) parts[2] else 0.0
+        if (hours < 0 || minutes !in 0.0..<60.0 || seconds !in 0.0..<60.0) return null
+        return (hours * 3600 + minutes * 60 + seconds).coerceIn(0.0, maxCountdownSeconds.toDouble()).roundToInt()
+    }
+}
+
 private class CraftNativeVideoView(context: Context) : VideoView(context) {
     private var sourceUri = ""
     private var shouldLoop = false
@@ -1437,6 +1794,11 @@ class MainActivity : AppCompatActivity() {
         val inputIdentities = mutableMapOf<EditText, String>()
         val suppressedTextChanges = mutableSetOf<EditText>()
         val controls = mutableMapOf<String, View>()
+        // Protocol ids identify mutation targets; authored keys identify the
+        // retained view. Keep both mappings so a targeted update can recover
+        // the original tree path without manufacturing a detached view.
+        val nodeViews = mutableMapOf<String, View>()
+        val nodePaths = mutableMapOf<String, String>()
         val handlers = mutableMapOf<View, String>()
         val pressInHandlers = mutableMapOf<View, String>()
         val pressOutHandlers = mutableMapOf<View, String>()
@@ -1520,6 +1882,7 @@ class MainActivity : AppCompatActivity() {
     private val inputHintDefaults = mutableMapOf<EditText, ColorStateList>()
     private val inputHighlightDefaults = mutableMapOf<EditText, Int>()
     private val defaultBackgrounds = mutableMapOf<View, Drawable?>()
+    private var keyboardInset = 0
 
     override fun onCreate(savedInstanceState: Bundle?) {
         applyConfiguredAppearance()
@@ -1531,7 +1894,10 @@ class MainActivity : AppCompatActivity() {
         root = findViewById(R.id.native_root)
         ViewCompat.setOnApplyWindowInsetsListener(root) { view, insets ->
             val safe = insets.getInsets(WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
+            val ime = insets.getInsets(WindowInsetsCompat.Type.ime())
+            keyboardInset = max(0, ime.bottom - safe.bottom)
             view.setPadding(safe.left, safe.top, safe.right, safe.bottom)
+            updateKeyboardAvoidingViews()
             view.requestLayout()
             view.post { screens.lastOrNull()?.takeIf { it.active }?.let(::emitLayoutEvents) }
             insets
@@ -1926,9 +2292,10 @@ class MainActivity : AppCompatActivity() {
             val target = screen.flatListOwners[id] ?: id
             if (!applied.add(target)) continue
             val document = screen.mutations.node(target) ?: return false
-            if (!screen.controls.containsKey("id:$target")) return false
-            makeView(screen, document, target, screen.controls)
-            val updated = screen.controls["id:$target"] ?: return false
+            val path = screen.nodePaths[target] ?: return false
+            if (screen.nodeViews[target] == null) return false
+            makeView(screen, document, path, screen.controls)
+            val updated = screen.nodeViews[target] ?: return false
             screen.lastLayoutBounds.remove(updated)
             if (!updateParentLayoutStyle(updated, document.optJSONObject("style") ?: JSONObject())) return false
         }
@@ -1966,6 +2333,12 @@ class MainActivity : AppCompatActivity() {
     private fun updateParentLayoutStyle(view: View, style: JSONObject): Boolean {
         var parent = view.parent
         var found = false
+        // A targeted style update can arrive while Android considers the
+        // existing traversal settled. Invalidate the node itself as well as
+        // every ancestor, including the platform ScrollView between the
+        // native content layout and CraftNativeScrollView.
+        view.forceLayout()
+        view.requestLayout()
         while (parent != null) {
             when (parent) {
                 is CraftNativeFlexLayout -> {
@@ -1975,10 +2348,13 @@ class MainActivity : AppCompatActivity() {
                     found = true
                 }
                 is CraftNativeScrollView -> {
-                    parent.forceLayout()
-                    parent.requestLayout()
+                    parent.invalidateContentLayout()
                 }
             }
+            (parent as? View)?.let {
+                it.forceLayout()
+                it.requestLayout()
+            }
             parent = parent.parent
         }
         return found
@@ -1987,6 +2363,8 @@ class MainActivity : AppCompatActivity() {
     private fun renderCommitted(screen: Screen, document: JSONObject) {
         // Keep live controls (especially the focused EditText) across renders.
         val next = mutableMapOf<String, View>()
+        screen.nodeViews.clear()
+        screen.nodePaths.clear()
         val tree = makeView(screen, document, "root", next)
         if (screen.view.getChildAt(0) !== tree) {
             (tree.parent as? ViewGroup)?.removeView(tree)
@@ -1998,12 +2376,18 @@ class MainActivity : AppCompatActivity() {
         screen.controls.putAll(next)
         screen.handlers.keys.retainAll(retainedViews(screen))
         screen.view.setChildStyle(tree, document.optJSONObject("style") ?: JSONObject(), resources.displayMetrics.density)
+        // A full render can change a view's custom layout style without
+        // changing the root bounds. Ensure native @layout observers still see
+        // the settled child frame after the next traversal.
+        scheduleLayoutEvents(screen)
     }
 
     private fun clearRenderedTree(screen: Screen) {
         releaseViewState(screen, retainedViews(screen).toList())
         screen.view.removeAllViews()
         screen.controls.clear()
+        screen.nodeViews.clear()
+        screen.nodePaths.clear()
         screen.handlers.clear()
         screen.flatListRows.clear()
         screen.flatListOwners.clear()
@@ -2017,16 +2401,15 @@ class MainActivity : AppCompatActivity() {
         next: MutableMap<String, View>,
         previousControls: Map<String, View> = screen.controls,
     ): View {
-        val type = node.optString("type", "View")
+        val type = canonicalType(node.optString("type", "View"))
         val props = node.optJSONObject("props") ?: JSONObject()
         val style = node.optJSONObject("style") ?: JSONObject()
         val events = node.optJSONObject("events") ?: JSONObject()
         val children = node.optJSONArray("children") ?: JSONArray()
         val protocolId = node.optString("id").takeIf { it.isNotBlank() }
-        val explicitKey = listOf(node.optString("key"), props.optString("key"), props.optString("testID"))
-            .firstOrNull { it.isNotBlank() }
-        val identity = protocolId?.let { "id:$it" }
-            ?: explicitKey?.let { "${path.substringBeforeLast('.', "")}/$it" }
+        val explicitKey = authoredKey(node, props)
+        val identity = explicitKey?.let { "${path.substringBeforeLast('.', "")}/$it" }
+            ?: protocolId?.let { "id:$it" }
             ?: path
         val previous = previousControls[identity]
         val reusableInput = previous as? EditText
@@ -2071,6 +2454,32 @@ class MainActivity : AppCompatActivity() {
                     send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                 }
             }
+            "Checkbox" -> (previous as? CheckBox ?: CheckBox(this)).apply {
+                text = props.optString("label").ifBlank { childText(children) }
+                configureText(this, text.toString(), style)
+                val requested = props.opt("checked") ?: props.opt("value")
+                val checked = when (requested) {
+                    is Boolean -> requested
+                    is Number -> requested.toDouble() != 0.0
+                    is String -> requested.equals("true", ignoreCase = true) || requested == "1"
+                    else -> false
+                }
+                setOnCheckedChangeListener(null)
+                // Keep the visual checked state separate from indeterminate:
+                // an indeterminate control must announce "mixed" and its next
+                // user toggle should transition to checked, not unchecked.
+                isChecked = checked
+                isActivated = props.optBoolean("indeterminate", false)
+                isEnabled = !props.optBoolean("disabled", false)
+                props.optString("color").takeIf { it.isNotBlank() }?.let { buttonTintList = ColorStateList.valueOf(color(it, defaultTextColor)) }
+                val handler = events.optString("onValueChange").ifBlank { events.optString("onChange") }
+                if (handler.isNotBlank()) screen.handlers[this] = handler else screen.handlers.remove(this)
+                setOnCheckedChangeListener { _, value ->
+                    screen.handlers[this]?.let { current ->
+                        send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject().put("value", value)))
+                    }
+                }
+            }
             "TextInput" -> (reusableInput?.takeIf { it.isSingleLine == !props.optBoolean("multiline", false) }
                 ?: EditText(this)).apply {
                 val defaultHintColors = inputHintDefaults.getOrPut(this) {
@@ -2213,6 +2622,16 @@ class MainActivity : AppCompatActivity() {
                 setSelection(selected, false)
                 post { suppressInitialSelection = false }
             }
+            "DatePicker" -> (previous as? CraftNativeDatePickerView ?: CraftNativeDatePickerView(this)).apply {
+                configure(props)
+                val handler = events.optString("onValueChange").ifBlank { events.optString("onChange") }
+                if (handler.isNotBlank()) screen.handlers[this] = handler else screen.handlers.remove(this)
+                onValueChanged = {
+                    screen.handlers[this]?.let { current ->
+                        send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", event()))
+                    }
+                }
+            }
             "Modal" -> (previous as? CraftNativeModalView ?: CraftNativeModalView(this)).apply {
                 transparent = props.optBoolean("transparent", false)
                 content.configure(style, resources.displayMetrics.density)
@@ -2353,6 +2772,9 @@ class MainActivity : AppCompatActivity() {
                 indeterminateTintList = props.optString("color").takeIf { it.isNotBlank() }
                     ?.let { ColorStateList.valueOf(color(it, Color.WHITE)) }
             }
+            "Icon" -> (previous as? CraftNativeIconView ?: CraftNativeIconView(this)).apply {
+                configureIcon(this, props, style)
+            }
             "Image" -> (previous as? ImageView ?: ImageView(this)).apply {
                 scaleType = when (style.optString("resizeMode").ifBlank { props.optString("resizeMode") }) {
                     "cover" -> ImageView.ScaleType.CENTER_CROP
@@ -2371,6 +2793,25 @@ class MainActivity : AppCompatActivity() {
                 if (onError.isNotBlank()) screen.imageErrorHandlers[this] = onError else screen.imageErrorHandlers.remove(this)
                 updateImage(screen, this, props.opt("source"))
             }
+            "ImageBackground" -> (previous as? CraftNativeImageBackgroundView ?: CraftNativeImageBackgroundView(this)).apply {
+                image.scaleType = when (style.optString("resizeMode").ifBlank { props.optString("resizeMode") }) {
+                    "cover" -> ImageView.ScaleType.CENTER_CROP
+                    "stretch" -> ImageView.ScaleType.FIT_XY
+                    "center" -> ImageView.ScaleType.CENTER
+                    else -> ImageView.ScaleType.CENTER_INSIDE
+                }
+                val onLoadStart = events.optString("onLoadStart")
+                if (onLoadStart.isNotBlank()) screen.imageLoadStartHandlers[image] = onLoadStart else screen.imageLoadStartHandlers.remove(image)
+                val onLoad = events.optString("onLoad")
+                if (onLoad.isNotBlank()) screen.imageLoadHandlers[image] = onLoad else screen.imageLoadHandlers.remove(image)
+                val onLoadEnd = events.optString("onLoadEnd")
+                if (onLoadEnd.isNotBlank()) screen.imageLoadEndHandlers[image] = onLoadEnd else screen.imageLoadEndHandlers.remove(image)
+                val onError = events.optString("onError")
+                if (onError.isNotBlank()) screen.imageErrorHandlers[image] = onError else screen.imageErrorHandlers.remove(image)
+                updateImage(screen, image, props.opt("source"))
+                configureContainer(content, style)
+                reconcileChildren(screen, content, children, path, next, style, previousControls)
+            }
             "Video" -> (previous as? CraftNativeVideoView ?: CraftNativeVideoView(this)).apply {
                 configure(
                     source = props.opt("source"),
@@ -2384,7 +2825,7 @@ class MainActivity : AppCompatActivity() {
             "Svg" -> (previous as? CraftNativeSvgView ?: CraftNativeSvgView(this)).apply {
                 drawing = node
             }
-            "ScrollView" -> (previous as? CraftNativeScrollView ?: CraftNativeScrollView(this)).apply {
+            "ScrollView", "SectionList" -> (previous as? CraftNativeScrollView ?: CraftNativeScrollView(this)).apply {
                 val horizontal = props.optBoolean("horizontal", false) || style.optString("flexDirection") in setOf("row", "row-reverse")
                 setHorizontal(horizontal)
                 setNativeNestedScrollingEnabled(true)
@@ -2477,6 +2918,11 @@ class MainActivity : AppCompatActivity() {
                 configureContainer(this, style)
                 reconcileChildren(screen, this, children, path, next, style, previousControls)
             }
+            "KeyboardAvoidingView" -> (previous as? CraftNativeKeyboardAvoidingView ?: CraftNativeKeyboardAvoidingView(this)).apply {
+                configure(props, style, resources.displayMetrics.density)
+                setKeyboardInset(keyboardInset)
+                reconcileChildren(screen, content, children, path, next, style, previousControls)
+            }
             else -> (previous as? CraftNativeFlexLayout ?: CraftNativeFlexLayout(this)).apply {
                 configureContainer(this, style)
                 reconcileChildren(screen, this, children, path, next, style, previousControls)
@@ -2484,12 +2930,14 @@ class MainActivity : AppCompatActivity() {
         }
         if (control is CraftNativeFlexLayout) {
             control.onLayoutChanged = { if (screen.active) emitLayoutEvents(screen) }
+        } else if (control is CraftNativeKeyboardAvoidingView) {
+            control.content.onLayoutChanged = { if (screen.active) emitLayoutEvents(screen) }
         }
         val pressInHandler = events.optString("onPressIn").takeIf { it.isNotBlank() }
         val pressOutHandler = events.optString("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)
-        if (type != "Button" && type != "Link" && type != "TextInput" && type != "Picker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator") {
+        if (type != "Button" && type != "Link" && type != "TextInput" && type != "Picker" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" && type != "KeyboardAvoidingView") {
             val handler = events.optString("onPress").ifBlank { events.optString("onClick") }
             val disabled = props.optBoolean("disabled", false)
             val hasPressLifecycle = pressInHandler != null || pressOutHandler != null
@@ -2571,6 +3019,15 @@ class MainActivity : AppCompatActivity() {
             if (!current.contains(message)) {
                 control.contentDescription = listOf(current, message).filter { it.isNotBlank() }.joinToString(", ")
             }
+        } else if (control is CraftNativeImageBackgroundView) imageErrors[control.image]?.let { message ->
+            val current = control.contentDescription?.toString().orEmpty()
+            if (!current.contains(message)) {
+                control.contentDescription = listOf(current, message).filter { it.isNotBlank() }.joinToString(", ")
+            }
+        }
+        protocolId?.let {
+            screen.nodeViews[it] = control
+            screen.nodePaths[it] = path
         }
         next[identity] = control
         applyViewStyle(control, style)
@@ -2609,6 +3066,48 @@ class MainActivity : AppCompatActivity() {
         }
     }
 
+    private fun canonicalType(raw: String): String = when (raw.lowercase()) {
+        "view" -> "View"
+        "safeareaview" -> "SafeAreaView"
+        "text" -> "Text"
+        "button" -> "Button"
+        "link" -> "Link"
+        "checkbox" -> "Checkbox"
+        "textinput", "input" -> "TextInput"
+        "picker", "select" -> "Picker"
+        "datepicker", "date-picker", "date" -> "DatePicker"
+        "modal" -> "Modal"
+        "switch" -> "Switch"
+        "slider" -> "Slider"
+        "activityindicator" -> "ActivityIndicator"
+        "image" -> "Image"
+        "imagebackground" -> "ImageBackground"
+        "keyboardavoidingview" -> "KeyboardAvoidingView"
+        "video" -> "Video"
+        "icon" -> "Icon"
+        "scrollview" -> "ScrollView"
+        "sectionlist" -> "SectionList"
+        "flatlist" -> "FlatList"
+        "svg" -> "Svg"
+        "touchableopacity" -> "TouchableOpacity"
+        "touchablehighlight" -> "TouchableHighlight"
+        "pressable" -> "Pressable"
+        else -> raw
+    }
+
+    private fun authoredKey(node: JSONObject, props: JSONObject): String? {
+        val direct = listOf(node.optString("key"), props.optString("key"), props.optString("testID"))
+            .firstOrNull { it.isNotBlank() }
+        if (direct != null) return direct
+        val children = node.optJSONArray("children") ?: return null
+        for (index in 0 until children.length()) {
+            val child = children.optJSONObject(index) ?: continue
+            val childProps = child.optJSONObject("props") ?: JSONObject()
+            authoredKey(child, childProps)?.let { return it }
+        }
+        return node.optString("id").takeIf { it.isNotBlank() }
+    }
+
     private fun configureContainer(layout: CraftNativeFlexLayout, style: JSONObject) {
         layout.configure(style, resources.displayMetrics.density)
     }
@@ -2793,6 +3292,59 @@ class MainActivity : AppCompatActivity() {
         configureTextStyle(view, style)
     }
 
+    private fun configureIcon(view: CraftNativeIconView, props: JSONObject, style: JSONObject) {
+        val symbol = props.optString("symbol").ifBlank { props.optString("name") }
+        view.text = androidIconGlyph(symbol)
+        val size = style.optDouble("fontSize", 20.0).toFloat().coerceAtLeast(1f)
+        view.setTextSize(TypedValue.COMPLEX_UNIT_SP, size)
+        val foreground = style.optString("color").ifBlank { props.optString("color") }
+        view.setTextColor(color(foreground, defaultTextColor))
+        val weight = when (style.optString("fontWeight")) {
+            "bold", "700", "800", "900" -> Typeface.BOLD
+            else -> Typeface.NORMAL
+        }
+        view.typeface = Typeface.create("sans-serif", weight)
+        if (!style.has("width") && !style.has("height")) {
+            val box = dp(size.toDouble())
+            view.minimumWidth = box
+            view.minimumHeight = box
+        }
+    }
+
+    private fun androidIconGlyph(symbol: String): String = when (symbol) {
+        "arrow.left" -> "←"
+        "arrow.right" -> "→"
+        "arrow.up" -> "↑"
+        "arrow.down" -> "↓"
+        "chevron.left" -> "‹"
+        "chevron.right" -> "›"
+        "chevron.up" -> "⌃"
+        "chevron.down" -> "⌄"
+        "plus" -> "+"
+        "minus" -> "−"
+        "xmark" -> "×"
+        "checkmark" -> "✓"
+        "house", "house.fill" -> "⌂"
+        "magnifyingglass" -> "⌕"
+        "gear", "gearshape" -> "⚙"
+        "heart" -> "♡"
+        "heart.fill" -> "♥"
+        "star" -> "☆"
+        "star.fill" -> "★"
+        "sun.max" -> "☼"
+        "moon" -> "☾"
+        "info.circle", "info.circle.fill" -> "ⓘ"
+        "questionmark.circle", "questionmark.circle.fill" -> "?"
+        "exclamationmark.triangle", "exclamationmark.triangle.fill" -> "⚠"
+        "play", "play.fill" -> "▶"
+        "pause", "pause.fill" -> "Ⅱ"
+        "stop", "stop.fill" -> "■"
+        "camera" -> "▣"
+        "circle" -> "○"
+        "circle.fill" -> "●"
+        else -> "○"
+    }
+
     private fun configureTextStyle(view: TextView, style: JSONObject) {
         view.setTextColor(color(style.optString("color"), defaultTextColor))
         view.setTextSize(TypedValue.COMPLEX_UNIT_SP, style.optDouble("fontSize", 16.0).toFloat())
@@ -2939,7 +3491,7 @@ class MainActivity : AppCompatActivity() {
     private fun applyAccessibility(view: View, props: JSONObject, type: String, fallbackLabel: String) {
         view.tag = fallbackLabel
         val label = props.optString("accessibilityLabel").takeIf { it.isNotBlank() }
-            ?: props.optString("alt").takeIf { type == "Image" && it.isNotBlank() }
+            ?: props.optString("alt").takeIf { (type == "Image" || type == "ImageBackground") && it.isNotBlank() }
         val value = props.opt("accessibilityValue")?.takeUnless { it == JSONObject.NULL }?.toString()
         view.contentDescription = when {
             label != null && value != null -> "$label, $value"
@@ -2948,14 +3500,20 @@ class MainActivity : AppCompatActivity() {
             else -> null
         }
         view.tooltipText = props.optString("accessibilityHint").takeIf { it.isNotBlank() }
-        val role = props.optString("accessibilityRole").ifBlank { type.lowercase() }
+        val role = props.optString("accessibilityRole").ifBlank {
+            if (type == "Icon") "image" else type.lowercase()
+        }
         val state = props.optJSONObject("accessibilityState")
         val disabled = props.optBoolean("disabled", false) || state?.optBoolean("disabled", false) == true
-        if (type !in setOf("Button", "Link", "TextInput", "Picker", "Modal", "Switch", "Slider", "ActivityIndicator")) {
+        if (type !in setOf("Button", "Link", "Checkbox", "TextInput", "Picker", "DatePicker", "Modal", "Switch", "Slider", "ActivityIndicator")) {
             view.isEnabled = !disabled
         } else if (disabled) {
             view.isEnabled = false
         }
+        ViewCompat.setStateDescription(
+            view,
+            if (type == "Checkbox" && props.optBoolean("indeterminate", false)) "mixed" else null,
+        )
         ViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {
             override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
                 super.onInitializeAccessibilityNodeInfo(host, info)
@@ -3156,6 +3714,14 @@ class MainActivity : AppCompatActivity() {
         emitLayoutEvents(screen, screen.view)
     }
 
+    private fun updateKeyboardAvoidingViews() {
+        fun visit(view: View) {
+            (view as? CraftNativeKeyboardAvoidingView)?.setKeyboardInset(keyboardInset)
+            if (view is ViewGroup) for (index in 0 until view.childCount) visit(view.getChildAt(index))
+        }
+        if (::root.isInitialized) visit(root)
+    }
+
     private fun emitLayoutEvents(screen: Screen, view: View) {
         emitLayoutEvent(screen, view, view.left, view.top, view.right, view.bottom)
         if (view is ViewGroup) {
@@ -3213,8 +3779,16 @@ class MainActivity : AppCompatActivity() {
         }
     }
 
+    private fun imageViews(views: Collection<View>): Set<ImageView> = buildSet {
+        fun collect(view: View) {
+            if (view is ImageView) add(view)
+            if (view is ViewGroup) for (index in 0 until view.childCount) collect(view.getChildAt(index))
+        }
+        views.forEach(::collect)
+    }
+
     private fun releaseImages(views: Collection<View>) {
-        views.filterIsInstance<ImageView>().forEach { image ->
+        imageViews(views).forEach { image ->
             imageJobs.remove(image)?.cancel(true)
             imageSources.remove(image)
             imageErrors.remove(image)
@@ -3244,6 +3818,7 @@ class MainActivity : AppCompatActivity() {
         preservingInputDrafts: Boolean = false,
     ) {
         val released = views.toMutableSet()
+        val releasedImages = imageViews(released)
         val refreshableLists = released.filterIsInstance<CraftNativeRefreshableFlatList>()
         val nestedLists = refreshableLists.map { it.list }.toSet()
         released.addAll(nestedLists)
@@ -3256,6 +3831,7 @@ class MainActivity : AppCompatActivity() {
         released.filterIsInstance<CraftNativeModalView>().forEach { it.resetForTeardown() }
         released.filterIsInstance<CraftNativeVideoView>().forEach { it.stop() }
         released.filterIsInstance<CraftNativeFlexLayout>().forEach { it.onLayoutChanged = null }
+        released.filterIsInstance<CraftNativeKeyboardAvoidingView>().forEach { it.content.onLayoutChanged = null }
         released.filterIsInstance<CraftNativeScrollView>().forEach { it.setRefreshHandler(null, false) }
         releaseImages(released)
         released.filterIsInstance<EditText>().forEach {
@@ -3287,10 +3863,10 @@ class MainActivity : AppCompatActivity() {
         screen.blurHandlers.keys.removeAll(released)
         screen.endEditingHandlers.keys.removeAll(released)
         screen.submitHandlers.keys.removeAll(released)
-        screen.imageLoadStartHandlers.keys.removeAll(released)
-        screen.imageLoadHandlers.keys.removeAll(released)
-        screen.imageLoadEndHandlers.keys.removeAll(released)
-        screen.imageErrorHandlers.keys.removeAll(released)
+        screen.imageLoadStartHandlers.keys.removeAll(releasedImages)
+        screen.imageLoadHandlers.keys.removeAll(releasedImages)
+        screen.imageLoadEndHandlers.keys.removeAll(releasedImages)
+        screen.imageErrorHandlers.keys.removeAll(releasedImages)
         screen.pressActiveOpacities.keys.removeAll(released)
         screen.pressBaseOpacities.keys.removeAll(released)
         screen.modalVisibility.keys.removeAll(released)
@@ -3304,6 +3880,8 @@ class MainActivity : AppCompatActivity() {
         screen.pendingCapabilities.clear()
         releaseViewState(screen, retainedViews(screen).toList())
         screen.controls.clear()
+        screen.nodeViews.clear()
+        screen.nodePaths.clear()
         screen.handlers.clear()
         screen.pressInHandlers.clear()
         screen.pressOutHandlers.clear()
@@ -3341,6 +3919,11 @@ class MainActivity : AppCompatActivity() {
         back()
     }
 
+    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
+        if (::capabilities.isInitialized && capabilities.onActivityResult(requestCode, resultCode, data)) return
+        super.onActivityResult(requestCode, resultCode, data)
+    }
+
     private fun showError(message: String) {
         root.removeAllViews()
         root.addView(TextView(this).apply {