craft-native 0.0.113 → 0.0.118

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

@@ -3,7 +3,11 @@ package {{PACKAGE_NAME}}
 import android.content.ClipData
 import android.content.ClipboardManager
 import android.content.Context
+import android.graphics.BitmapFactory
 import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
 import android.os.Build
 import android.os.Bundle
 import android.os.VibrationEffect
@@ -11,15 +15,24 @@ import android.os.Vibrator
 import android.text.Editable
 import android.text.TextWatcher
 import android.util.Log
+import android.util.Base64
+import android.util.TypedValue
+import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.widget.Button
 import android.widget.EditText
 import android.widget.FrameLayout
+import android.widget.HorizontalScrollView
+import android.widget.ImageView
 import android.widget.LinearLayout
+import android.widget.ScrollView
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatActivity
 import androidx.core.content.ContextCompat
+import androidx.core.view.AccessibilityDelegateCompat
+import androidx.core.view.ViewCompat
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat
 import androidx.javascriptengine.JavaScriptIsolate
 import androidx.javascriptengine.JavaScriptConsoleCallback
 import androidx.javascriptengine.JavaScriptSandbox
@@ -28,8 +41,36 @@ import androidx.javascriptengine.MessagePort
 import androidx.javascriptengine.MessagePortClient
 import org.json.JSONArray
 import org.json.JSONObject
+import java.net.URL
+import java.util.concurrent.Executors
+import java.util.concurrent.Future
 import java.util.UUID
 
+private class CraftNativeScrollView(context: Context) : FrameLayout(context) {
+    val content = LinearLayout(context)
+    private val vertical = ScrollView(context)
+    private val horizontal = HorizontalScrollView(context)
+    private var horizontalMode: Boolean? = null
+
+    init { setHorizontal(false) }
+
+    fun setHorizontal(value: Boolean) {
+        if (horizontalMode == value) return
+        horizontalMode = value
+        (content.parent as? ViewGroup)?.removeView(content)
+        removeAllViews()
+        val scroller: ViewGroup = if (value) horizontal else vertical
+        scroller.removeAllViews()
+        content.orientation = if (value) LinearLayout.HORIZONTAL else LinearLayout.VERTICAL
+        scroller.addView(content, if (value)
+            ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT)
+        else ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT))
+        addView(scroller, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    }
+}
+
+private class CraftNativeFlexSpacer(context: Context) : View(context)
+
 /** WebView-free host for a compiled stx-native route bundle. */
 class MainActivity : AppCompatActivity() {
     private class Screen(
@@ -42,6 +83,10 @@ class MainActivity : AppCompatActivity() {
         val drafts = mutableMapOf<String, String>()
         val controls = mutableMapOf<String, View>()
         val handlers = mutableMapOf<View, String>()
+        val flatListRows = mutableMapOf<CraftNativeFlatList, MutableMap<String, MutableMap<String, View>>>()
+        val flatListOwners = mutableMapOf<String, String>()
+        val flatListOwnerByView = mutableMapOf<CraftNativeFlatList, String>()
+        val mutations = CraftNativeMutationDocument()
         var active = true
 
         fun close() {
@@ -58,6 +103,10 @@ class MainActivity : AppCompatActivity() {
     private var hapticsEnabled = false
     private var defaultTextColor = Color.WHITE
     private var useMessagePorts = false
+    private val imageExecutor = Executors.newFixedThreadPool(2)
+    private val imageSources = mutableMapOf<ImageView, String>()
+    private val imageJobs = mutableMapOf<ImageView, Future<*>>()
+    private val imageErrors = mutableMapOf<ImageView, String>()
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -145,6 +194,7 @@ class MainActivity : AppCompatActivity() {
               const port = await android.getNamedPort('craft');
               $routePrelude
               globalThis.__stxNativeBridge = {
+                mutationProtocolVersion: 1,
                 postMessage: function(value) { port.postMessage(value); },
                 onMessage: function(callback) { port.onmessage = function(event) { callback(event.data); }; }
               };
@@ -152,6 +202,7 @@ class MainActivity : AppCompatActivity() {
         """.trimIndent() else """
             $routePrelude
             globalThis.__stxNativeBridge = {
+              mutationProtocolVersion: 1,
               postMessage: function(value) { console.log(${JSONObject.quote(prefix)} + value); },
               onMessage: function(callback) { globalThis.__stxNativeCallback = callback; }
             };
@@ -186,11 +237,34 @@ class MainActivity : AppCompatActivity() {
         val payload = message.optJSONObject("payload") ?: JSONObject()
         when (message.optString("type")) {
             "RENDER" -> payload.optJSONObject("document")?.let { render(screen, it) }
+            "MUTATE" -> try {
+                val result = applyMutation(screen, payload)
+                send(screen, "MUTATION_ACK", JSONObject()
+                    .put("batchId", result.batchId)
+                    .put("revision", result.revision)
+                    .put("version", CRAFT_NATIVE_MUTATION_PROTOCOL_VERSION))
+            }
+            catch (failure: CraftNativeMutationFailure) {
+                val error = JSONObject()
+                    .put("batchId", payload.optString("batchId"))
+                    .put("code", failure.code)
+                    .put("message", failure.message)
+                    .put("version", CRAFT_NATIVE_MUTATION_PROTOCOL_VERSION)
+                failure.operationIndex?.let { error.put("operationIndex", it) }
+                send(screen, "MUTATION_ERROR", error)
+            }
+            catch (_: Exception) {
+                send(screen, "MUTATION_ERROR", JSONObject()
+                    .put("batchId", payload.optString("batchId"))
+                    .put("code", "INVALID_BATCH")
+                    .put("message", "mutation batch could not be applied")
+                    .put("version", CRAFT_NATIVE_MUTATION_PROTOCOL_VERSION))
+            }
             "NAVIGATE", "NAVIGATE_REPLACE" -> {
                 if (screens.lastOrNull() !== screen) return
                 val route = payload.optString("screen").takeIf { it.isNotBlank() } ?: return
                 if (message.optString("type") == "NAVIGATE_REPLACE") {
-                    screens.removeAt(screens.lastIndex).close()
+                    closeScreen(screens.removeAt(screens.lastIndex))
                 }
                 openScreen(route, payload.optJSONObject("params") ?: JSONObject())
             }
@@ -200,6 +274,30 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun render(screen: Screen, document: JSONObject) {
+        screen.mutations.replace(document)
+        renderCommitted(screen, document)
+    }
+
+    private fun applyMutation(screen: Screen, payload: JSONObject): CraftNativeMutationResult {
+        val result = screen.mutations.apply(payload)
+        if (!result.requiresFullRender && applyTargetedUpdates(screen, result.affectedNodeIds)) return result
+        result.document?.let { renderCommitted(screen, it) } ?: clearRenderedTree(screen)
+        return result
+    }
+
+    private fun applyTargetedUpdates(screen: Screen, ids: List<String>): Boolean {
+        val applied = mutableSetOf<String>()
+        for (id in ids) {
+            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)
+        }
+        return true
+    }
+
+    private fun renderCommitted(screen: Screen, document: JSONObject) {
         // Keep live controls (especially the focused EditText) across renders.
         val next = mutableMapOf<String, View>()
         val tree = makeView(screen, document, "root", next)
@@ -208,26 +306,44 @@ class MainActivity : AppCompatActivity() {
             screen.view.removeAllViews()
             screen.view.addView(tree)
         }
+        releaseViewState(screen, screen.controls.values.filter { it !in next.values })
         screen.controls.clear()
         screen.controls.putAll(next)
-        screen.handlers.keys.retainAll(next.values.toSet())
+        screen.handlers.keys.retainAll(retainedViews(screen))
     }
 
-    private fun makeView(screen: Screen, node: JSONObject, path: String, next: MutableMap<String, View>): View {
+    private fun clearRenderedTree(screen: Screen) {
+        releaseViewState(screen, retainedViews(screen).toList())
+        screen.view.removeAllViews()
+        screen.controls.clear()
+        screen.handlers.clear()
+        screen.flatListRows.clear()
+        screen.flatListOwners.clear()
+        screen.flatListOwnerByView.clear()
+    }
+
+    private fun makeView(
+        screen: Screen,
+        node: JSONObject,
+        path: String,
+        next: MutableMap<String, View>,
+        previousControls: Map<String, View> = screen.controls,
+    ): View {
         val type = 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 = explicitKey?.let { "${path.substringBeforeLast('.', "")}/$it" } ?: path
-        val previous = screen.controls[identity]
+        val identity = protocolId?.let { "id:$it" }
+            ?: explicitKey?.let { "${path.substringBeforeLast('.', "")}/$it" }
+            ?: path
+        val previous = previousControls[identity]
         val control = when (type) {
             "Text" -> ((previous as? TextView)?.takeUnless { it is Button || it is EditText } ?: TextView(this)).apply {
-                text = childText(children)
-                setTextColor(color(style.optString("color"), defaultTextColor))
-                if (style.has("fontSize")) textSize = style.optDouble("fontSize").toFloat()
+                configureText(this, childText(children), style)
             }
             "Button" -> (previous as? Button ?: Button(this)).apply {
                 text = props.optString("title").ifBlank { childText(children) }
@@ -257,46 +373,63 @@ class MainActivity : AppCompatActivity() {
                     override fun afterTextChanged(s: Editable?) {}
                 })
             }
-            else -> (previous as? LinearLayout ?: LinearLayout(this)).apply {
-                orientation = if (style.optString("flexDirection") == "row")
-                    LinearLayout.HORIZONTAL else LinearLayout.VERTICAL
-                val padding = style.optDouble("padding", 0.0)
-                setPadding(
-                    dp(style.optDouble("paddingLeft", padding)),
-                    dp(style.optDouble("paddingTop", padding)),
-                    dp(style.optDouble("paddingRight", padding)),
-                    dp(style.optDouble("paddingBottom", padding))
-                )
-                val desired = mutableListOf<View>()
-                for (index in 0 until children.length()) {
-                    val child = children.opt(index)
-                    val childView = when (child) {
-                        is JSONObject -> makeView(screen, child, "$path.$index", next)
-                        is String -> TextView(this@MainActivity).apply {
-                            text = child
-                            setTextColor(defaultTextColor)
-                        }
-                        else -> null
-                    }
-                    if (childView != null) desired.add(childView)
+            "Image" -> (previous as? ImageView ?: ImageView(this)).apply {
+                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 desiredSet = desired.toSet()
-                for ((index, childView) in desired.withIndex()) {
-                    if (getChildAt(index) === childView) continue
-                    if (index < childCount && getChildAt(index) !in desiredSet) removeViewAt(index)
-                    (childView.parent as? ViewGroup)?.removeView(childView)
-                    addView(childView, index)
+                adjustViewBounds = false
+                updateImage(this, props.opt("source"))
+            }
+            "ScrollView" -> (previous as? CraftNativeScrollView ?: CraftNativeScrollView(this)).apply {
+                val horizontal = props.optBoolean("horizontal", false) || style.optString("flexDirection") == "row"
+                setHorizontal(horizontal)
+                configureContainer(content, style)
+                reconcileChildren(screen, content, children, path, next, style, previousControls)
+            }
+            "FlatList" -> (previous as? CraftNativeFlatList ?: CraftNativeFlatList(this)).apply {
+                reconcileFlatList(screen, this, children, path, protocolId ?: path, props, events)
+            }
+            else -> (previous as? LinearLayout ?: LinearLayout(this)).apply {
+                configureContainer(this, style)
+                reconcileChildren(screen, this, children, path, next, style, previousControls)
+            }
+        }
+        if (type != "Button" && type != "TextInput") {
+            val handler = events.optString("onPress").ifBlank { events.optString("onClick") }
+            if (handler.isNotBlank()) {
+                screen.handlers[control] = handler
+                control.isClickable = true
+                control.setOnClickListener {
+                    val current = screen.handlers[control] ?: return@setOnClickListener
+                    send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                 }
-                while (childCount > desired.size) removeViewAt(childCount - 1)
+            } else {
+                screen.handlers.remove(control)
+                control.isClickable = false
+                control.setOnClickListener(null)
             }
         }
-        control.contentDescription = explicitKey ?: path
+        applyAccessibility(control, props, type, explicitKey ?: protocolId ?: path)
+        if (control is ImageView) imageErrors[control]?.let { control.contentDescription = "${control.contentDescription}, $it" }
         next[identity] = control
-        if (style.has("backgroundColor")) control.setBackgroundColor(color(style.optString("backgroundColor"), Color.TRANSPARENT))
+        applyViewStyle(control, style)
         control.layoutParams = LinearLayout.LayoutParams(
             if (style.has("width")) dp(style.optDouble("width")) else ViewGroup.LayoutParams.MATCH_PARENT,
             if (style.has("height")) dp(style.optDouble("height")) else ViewGroup.LayoutParams.WRAP_CONTENT
-        )
+        ).apply {
+            val margin = style.optDouble("margin", 0.0)
+            val horizontal = style.optDouble("marginHorizontal", margin)
+            val vertical = style.optDouble("marginVertical", margin)
+            setMargins(
+                dp(style.optDouble("marginLeft", horizontal)),
+                dp(style.optDouble("marginTop", vertical)),
+                dp(style.optDouble("marginRight", horizontal)),
+                dp(style.optDouble("marginBottom", vertical))
+            )
+        }
         return control
     }
 
@@ -307,6 +440,287 @@ class MainActivity : AppCompatActivity() {
         }
     }
 
+    private fun configureContainer(layout: LinearLayout, style: JSONObject) {
+        val direction = style.optString("flexDirection")
+        layout.orientation = if (direction == "row" || direction == "row-reverse")
+            LinearLayout.HORIZONTAL else LinearLayout.VERTICAL
+        val cross = when (style.optString("alignItems")) {
+            "center" -> if (layout.orientation == LinearLayout.HORIZONTAL) Gravity.CENTER_VERTICAL else Gravity.CENTER_HORIZONTAL
+            "flex-end" -> if (layout.orientation == LinearLayout.HORIZONTAL) Gravity.BOTTOM else Gravity.END
+            else -> if (layout.orientation == LinearLayout.HORIZONTAL) Gravity.TOP else Gravity.START
+        }
+        layout.gravity = cross
+        val padding = style.optDouble("padding", 0.0)
+        val horizontal = style.optDouble("paddingHorizontal", padding)
+        val vertical = style.optDouble("paddingVertical", padding)
+        layout.setPadding(
+            dp(style.optDouble("paddingLeft", horizontal)),
+            dp(style.optDouble("paddingTop", vertical)),
+            dp(style.optDouble("paddingRight", horizontal)),
+            dp(style.optDouble("paddingBottom", vertical))
+        )
+    }
+
+    private fun reconcileChildren(
+        screen: Screen,
+        layout: LinearLayout,
+        children: JSONArray,
+        path: String,
+        next: MutableMap<String, View>,
+        style: JSONObject,
+        previousControls: Map<String, View>,
+    ) {
+        for (index in layout.childCount - 1 downTo 0) {
+            if (layout.getChildAt(index) is CraftNativeFlexSpacer) layout.removeViewAt(index)
+        }
+        val desired = mutableListOf<View>()
+        for (index in 0 until children.length()) {
+            val child = children.opt(index)
+            val childView = when (child) {
+                is JSONObject -> makeView(screen, child, "$path.$index", next, previousControls)
+                is String -> TextView(this).apply { text = child; setTextColor(defaultTextColor) }
+                else -> null
+            }
+            if (childView != null) desired.add(childView)
+        }
+        if (style.optString("flexDirection").endsWith("-reverse")) desired.reverse()
+        val desiredSet = desired.toSet()
+        for ((index, childView) in desired.withIndex()) {
+            if (layout.getChildAt(index) !== childView) {
+                if (index < layout.childCount && layout.getChildAt(index) !in desiredSet) layout.removeViewAt(index)
+                (childView.parent as? ViewGroup)?.removeView(childView)
+                layout.addView(childView, index)
+            }
+            val gapName = if (layout.orientation == LinearLayout.HORIZONTAL) "columnGap" else "rowGap"
+            val gap = dp(style.optDouble(gapName, style.optDouble("gap", 0.0)))
+            val params = childView.layoutParams as? LinearLayout.LayoutParams
+                ?: LinearLayout.LayoutParams(childView.layoutParams?.width ?: -1, childView.layoutParams?.height ?: -2)
+            params.leftMargin = if (layout.orientation == LinearLayout.HORIZONTAL && index > 0) gap else 0
+            params.topMargin = if (layout.orientation == LinearLayout.VERTICAL && index > 0) gap else 0
+            childView.layoutParams = params
+        }
+        while (layout.childCount > desired.size) layout.removeViewAt(layout.childCount - 1)
+        addJustificationSpacers(layout, style.optString("justifyContent"))
+    }
+
+    private fun reconcileFlatList(
+        screen: Screen,
+        list: CraftNativeFlatList,
+        children: JSONArray,
+        path: String,
+        owner: String,
+        props: JSONObject,
+        events: JSONObject,
+    ) {
+        screen.flatListOwners.entries.removeAll { it.value == owner }
+        screen.flatListOwnerByView[list] = owner
+        val nodes = (0 until children.length()).mapNotNull { children.optJSONObject(it) }
+        nodes.forEach { registerFlatListOwnership(screen, it, owner) }
+        list.apply(
+            nodes = nodes,
+            horizontal = props.optBoolean("horizontal", false),
+            columns = props.optInt("numColumns", 1),
+            inverted = props.optBoolean("inverted", false),
+            endReachedThreshold = when {
+                props.has("onEndReachedThreshold") -> props.optDouble("onEndReachedThreshold", 0.1)
+                else -> props.optDouble("threshold", 0.1)
+            },
+            renderItem = { node, itemIdentity, _ ->
+                val rows = screen.flatListRows.getOrPut(list) { mutableMapOf() }
+                val previous = rows[itemIdentity].orEmpty()
+                val next = mutableMapOf<String, View>()
+                val view = makeView(screen, node, "$path.$itemIdentity", next, previous)
+                releaseViewState(screen, previous.values.filter { it !in next.values })
+                rows[itemIdentity] = next
+                view
+            },
+            recycleItem = { itemIdentity ->
+                val controls = screen.flatListRows[list]?.remove(itemIdentity).orEmpty()
+                releaseViewState(screen, controls.values.toList())
+            },
+            endReached = events.optString("onEndReached").takeIf { it.isNotBlank() }?.let { handler ->
+                { send(screen, "EVENT", JSONObject().put("handlerName", handler).put("nativeEvent", JSONObject())) }
+            },
+        )
+    }
+
+    private fun registerFlatListOwnership(screen: Screen, node: JSONObject, owner: String) {
+        val props = node.optJSONObject("props") ?: JSONObject()
+        listOf(node.optString("id"), node.optString("key"), props.optString("key"), props.optString("testID"))
+            .filter { it.isNotBlank() }
+            .forEach { screen.flatListOwners[it] = owner }
+        val children = node.optJSONArray("children") ?: JSONArray()
+        for (index in 0 until children.length()) {
+            children.optJSONObject(index)?.let { registerFlatListOwnership(screen, it, owner) }
+        }
+    }
+
+    private fun addJustificationSpacers(layout: LinearLayout, value: String) {
+        if (layout.childCount == 0 || value == "flex-start" || value.isBlank()) return
+        fun spacer(weight: Float): CraftNativeFlexSpacer = CraftNativeFlexSpacer(this).apply {
+            layoutParams = if (layout.orientation == LinearLayout.HORIZONTAL)
+                LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT, weight)
+            else LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0, weight)
+        }
+        when (value) {
+            "flex-end" -> layout.addView(spacer(1f), 0)
+            "center" -> {
+                layout.addView(spacer(1f), 0)
+                layout.addView(spacer(1f))
+            }
+            "space-between" -> for (index in layout.childCount - 1 downTo 1) layout.addView(spacer(1f), index)
+            "space-around", "space-evenly" -> {
+                val edgeWeight = if (value == "space-around") 0.5f else 1f
+                for (index in layout.childCount - 1 downTo 1) layout.addView(spacer(1f), index)
+                layout.addView(spacer(edgeWeight), 0)
+                layout.addView(spacer(edgeWeight))
+            }
+        }
+    }
+
+    private fun applyViewStyle(view: View, style: JSONObject) {
+        view.alpha = style.optDouble("opacity", 1.0).toFloat()
+        view.visibility = if (style.optString("display") == "none") View.GONE else View.VISIBLE
+        view.elevation = dp(style.optDouble("elevation", 0.0)).toFloat()
+        val background = style.has("backgroundColor")
+        val border = style.optDouble("borderWidth", 0.0)
+        val radius = style.optDouble("borderRadius", 0.0)
+        if (background || border > 0 || radius > 0) {
+            view.background = GradientDrawable().apply {
+                setColor(color(style.optString("backgroundColor"), Color.TRANSPARENT))
+                cornerRadius = dp(radius).toFloat()
+                if (border > 0) setStroke(dp(border), color(style.optString("borderColor"), Color.TRANSPARENT))
+            }
+        }
+        view.clipToOutline = style.optString("overflow") == "hidden"
+        if (view is ViewGroup) view.clipChildren = style.optString("overflow") == "hidden"
+        if (view is ImageView) {
+            if (style.has("tintColor")) view.setColorFilter(color(style.optString("tintColor"), Color.TRANSPARENT))
+            else view.clearColorFilter()
+        }
+    }
+
+    private fun configureText(view: TextView, value: String, style: JSONObject) {
+        view.text = when (style.optString("textTransform")) {
+            "uppercase" -> value.uppercase()
+            "lowercase" -> value.lowercase()
+            "capitalize" -> value.split(' ').joinToString(" ") { word -> word.replaceFirstChar(Char::uppercase) }
+            else -> value
+        }
+        view.setTextColor(color(style.optString("color"), defaultTextColor))
+        view.setTextSize(TypedValue.COMPLEX_UNIT_SP, style.optDouble("fontSize", 14.0).toFloat())
+        val weight = when (style.optString("fontWeight")) {
+            "bold" -> 700
+            "100", "200", "300", "400", "500", "600", "700", "800", "900" -> style.optInt("fontWeight")
+            else -> 400
+        }
+        val italic = style.optString("fontStyle") == "italic"
+        val family = style.optString("fontFamily").takeIf { it.isNotBlank() }
+        view.typeface = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            Typeface.create(Typeface.create(family, Typeface.NORMAL), weight, italic)
+        } else Typeface.create(family, (if (weight >= 600) Typeface.BOLD else Typeface.NORMAL) or
+            (if (italic) Typeface.ITALIC else Typeface.NORMAL))
+        view.textAlignment = when (style.optString("textAlign")) {
+            "left" -> View.TEXT_ALIGNMENT_TEXT_START
+            "right" -> View.TEXT_ALIGNMENT_TEXT_END
+            "center" -> View.TEXT_ALIGNMENT_CENTER
+            "justify" -> View.TEXT_ALIGNMENT_VIEW_START
+            else -> View.TEXT_ALIGNMENT_INHERIT
+        }
+        view.letterSpacing = if (style.has("letterSpacing") && view.textSize > 0)
+            dp(style.optDouble("letterSpacing")).toFloat() / view.textSize else 0f
+        view.setLineSpacing(
+            if (style.has("lineHeight")) dp(style.optDouble("lineHeight")) - view.textSize else 0f,
+            1f
+        )
+        view.paintFlags = view.paintFlags and Paint.UNDERLINE_TEXT_FLAG.inv() and Paint.STRIKE_THRU_TEXT_FLAG.inv()
+        when (style.optString("textDecorationLine")) {
+            "underline" -> view.paintFlags = view.paintFlags or Paint.UNDERLINE_TEXT_FLAG
+            "line-through" -> view.paintFlags = view.paintFlags or Paint.STRIKE_THRU_TEXT_FLAG
+            "underline line-through" -> view.paintFlags = view.paintFlags or
+                Paint.UNDERLINE_TEXT_FLAG or Paint.STRIKE_THRU_TEXT_FLAG
+        }
+    }
+
+    private fun updateImage(view: ImageView, source: Any?) {
+        val uri = when (source) {
+            is String -> source
+            is JSONObject -> source.optString("uri")
+            else -> ""
+        }
+        if (uri.isBlank()) {
+            imageJobs.remove(view)?.cancel(true)
+            imageSources.remove(view)
+            imageErrors[view] = "Image source is missing"
+            view.setImageDrawable(null)
+            return
+        }
+        if (imageSources[view] == uri) return
+        imageJobs.remove(view)?.cancel(true)
+        imageSources[view] = uri
+        imageErrors.remove(view)
+        view.setImageDrawable(null)
+
+        if (uri.startsWith("data:image/") && uri.contains(',')) {
+            val bytes = runCatching { Base64.decode(uri.substringAfter(','), Base64.DEFAULT) }.getOrNull()
+            val bitmap = bytes?.let { BitmapFactory.decodeByteArray(it, 0, it.size) }
+            if (bitmap != null) view.setImageBitmap(bitmap) else imageFailure(view, uri, "Image data is invalid")
+            return
+        }
+        if (!uri.contains(':')) {
+            val bitmap = runCatching { assets.open(uri).use { BitmapFactory.decodeStream(it) } }.getOrNull()
+            if (bitmap != null) view.setImageBitmap(bitmap) else imageFailure(view, uri, "Bundled image was not found")
+            return
+        }
+        if (!uri.startsWith("https://")) {
+            imageFailure(view, uri, "Unsupported image source")
+            return
+        }
+        imageJobs[view] = imageExecutor.submit {
+            val bitmap = runCatching {
+                val connection = URL(uri).openConnection().apply {
+                    connectTimeout = 10_000
+                    readTimeout = 10_000
+                }
+                connection.getInputStream().use(BitmapFactory::decodeStream)
+            }.getOrNull()
+            runOnUiThread {
+                if (imageSources[view] != uri) return@runOnUiThread
+                imageJobs.remove(view)
+                if (bitmap != null) view.setImageBitmap(bitmap) else imageFailure(view, uri, "Image download failed")
+            }
+        }
+    }
+
+    private fun imageFailure(view: ImageView, uri: String, message: String) {
+        imageErrors[view] = message
+        view.setImageDrawable(null)
+        view.contentDescription = "${view.tag ?: "Image"}, $message"
+        Log.e(TAG, "$message: $uri")
+    }
+
+    private fun applyAccessibility(view: View, props: JSONObject, type: String, fallbackLabel: String) {
+        view.tag = fallbackLabel
+        view.contentDescription = props.optString("accessibilityLabel").ifBlank { fallbackLabel }
+        props.optString("accessibilityHint").takeIf { it.isNotBlank() }?.let { view.tooltipText = it }
+        val role = props.optString("accessibilityRole").ifBlank { type.lowercase() }
+        ViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {
+            override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
+                super.onInitializeAccessibilityNodeInfo(host, info)
+                info.className = when (role) {
+                    "button" -> Button::class.java.name
+                    "image" -> ImageView::class.java.name
+                    "search" -> EditText::class.java.name
+                    "scrollbar" -> ScrollView::class.java.name
+                    else -> host.javaClass.name
+                }
+                info.isHeading = role == "header"
+                info.roleDescription = role.takeIf { it !in setOf("view", "text", "textinput", "scrollview") }
+            }
+        })
+        ViewCompat.setImportantForAccessibility(view, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_YES)
+    }
+
     private fun dp(value: Double) = (value * resources.displayMetrics.density).toInt()
     private fun color(raw: String, fallback: Int) = runCatching { Color.parseColor(raw) }.getOrDefault(fallback)
 
@@ -358,13 +772,47 @@ class MainActivity : AppCompatActivity() {
 
     private fun back() {
         if (screens.size > 1) {
-            screens.removeAt(screens.lastIndex).close()
+            closeScreen(screens.removeAt(screens.lastIndex))
             show(screens.last())
         } else {
             finish()
         }
     }
 
+    private fun releaseImages(views: Collection<View>) {
+        views.filterIsInstance<ImageView>().forEach { image ->
+            imageJobs.remove(image)?.cancel(true)
+            imageSources.remove(image)
+            imageErrors.remove(image)
+        }
+    }
+
+    private fun retainedViews(screen: Screen): MutableSet<View> = screen.controls.values.toMutableSet().apply {
+        screen.flatListRows.values.forEach { rows -> rows.values.forEach { addAll(it.values) } }
+    }
+
+    private fun releaseViewState(screen: Screen, views: Collection<View>) {
+        val released = views.toSet()
+        released.filterIsInstance<CraftNativeFlatList>().forEach { list ->
+            val owner = screen.flatListOwnerByView.remove(list)
+            list.discardAll()
+            screen.flatListRows.remove(list)?.values?.forEach { releaseViewState(screen, it.values) }
+            if (owner != null) screen.flatListOwners.entries.removeAll { it.value == owner }
+        }
+        releaseImages(released)
+        screen.handlers.keys.removeAll(released)
+    }
+
+    private fun closeScreen(screen: Screen) {
+        releaseViewState(screen, retainedViews(screen).toList())
+        screen.controls.clear()
+        screen.handlers.clear()
+        screen.flatListRows.clear()
+        screen.flatListOwners.clear()
+        screen.flatListOwnerByView.clear()
+        screen.close()
+    }
+
     @Deprecated("Uses the activity back callback for native route navigation")
     override fun onBackPressed() = back()
 
@@ -380,8 +828,11 @@ class MainActivity : AppCompatActivity() {
     }
 
     override fun onDestroy() {
-        screens.forEach { it.close() }
+        screens.forEach { closeScreen(it) }
         screens.clear()
+        imageJobs.values.forEach { it.cancel(true) }
+        imageJobs.clear()
+        imageExecutor.shutdownNow()
         sandbox?.close()
         super.onDestroy()
     }