craft-native 0.0.120 → 0.0.122

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

@@ -22,6 +22,9 @@ import android.util.Log
 import android.util.Base64
 import android.util.TypedValue
 import android.view.Gravity
+import android.view.KeyEvent
+import android.view.inputmethod.EditorInfo
+import android.text.InputType
 import android.view.View
 import android.view.ViewGroup
 import android.widget.Button
@@ -50,16 +53,221 @@ import java.net.URL
 import java.util.concurrent.Executors
 import java.util.concurrent.Future
 import java.util.UUID
+import kotlin.math.max
+import kotlin.math.min
 
 private const val CRAFT_NATIVE_CAPABILITY_TIMEOUT_MS = 30_000L
 
+private data class CraftNativeLayoutStyle(
+    val width: Int? = null,
+    val height: Int? = null,
+    val minWidth: Int? = null,
+    val maxWidth: Int? = null,
+    val minHeight: Int? = null,
+    val maxHeight: Int? = null,
+    val position: String = "relative",
+    val top: Int? = null,
+    val right: Int? = null,
+    val bottom: Int? = null,
+    val left: Int? = null,
+    val alignSelf: String? = null,
+) {
+    companion object {
+        fun from(raw: JSONObject, density: Float): CraftNativeLayoutStyle {
+            fun number(name: String): Int? = if (raw.has(name)) (raw.optDouble(name) * density).toInt() else null
+            return CraftNativeLayoutStyle(
+                width = number("width"), height = number("height"),
+                minWidth = number("minWidth"), maxWidth = number("maxWidth"),
+                minHeight = number("minHeight"), maxHeight = number("maxHeight"),
+                position = raw.optString("position", "relative"),
+                top = number("top"), right = number("right"), bottom = number("bottom"), left = number("left"),
+                alignSelf = raw.optString("alignSelf").takeIf { it.isNotBlank() },
+            )
+        }
+    }
+}
+
+/** A deterministic flex-shaped container shared by normal views and scroll content. */
+private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
+    private val styles = mutableMapOf<View, CraftNativeLayoutStyle>()
+    private var wrap = false
+    private var alignItems = "stretch"
+    private var justifyContent = "flex-start"
+    private var rowGap = 0
+    private var columnGap = 0
+
+    fun configure(style: JSONObject, density: Float) {
+        orientation = if (style.optString("flexDirection") in setOf("row", "row-reverse")) HORIZONTAL else VERTICAL
+        wrap = style.optString("flexWrap") == "wrap" || style.optBoolean("flexWrap", false)
+        alignItems = style.optString("alignItems", "stretch")
+        justifyContent = style.optString("justifyContent", "flex-start")
+        val gap = (style.optDouble("gap", 0.0) * density).toInt()
+        rowGap = (style.optDouble("rowGap", gap.toDouble() / density.toDouble()) * density).toInt()
+        columnGap = (style.optDouble("columnGap", gap.toDouble() / density.toDouble()) * density).toInt()
+        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()
+        setPadding(
+            (style.optDouble("paddingLeft", horizontal.toDouble() / density.toDouble()) * density).toInt(),
+            (style.optDouble("paddingTop", vertical.toDouble() / density.toDouble()) * density).toInt(),
+            (style.optDouble("paddingRight", horizontal.toDouble() / density.toDouble()) * density).toInt(),
+            (style.optDouble("paddingBottom", vertical.toDouble() / density.toDouble()) * density).toInt(),
+        )
+        requestLayout()
+    }
+
+    fun setChildStyle(view: View, style: JSONObject, density: Float) {
+        styles[view] = CraftNativeLayoutStyle.from(style, density)
+        requestLayout()
+    }
+
+    override fun onViewRemoved(child: View) {
+        styles.remove(child)
+        super.onViewRemoved(child)
+    }
+
+    private data class Entry(val view: View, val style: CraftNativeLayoutStyle, val width: Int, val height: Int)
+    private data class Line(val entries: MutableList<Entry> = mutableListOf(), var main: Int = 0, var cross: Int = 0)
+
+    private fun entries(width: Int, height: Int): Pair<List<Line>, List<Entry>> {
+        val availableMain = if (orientation == HORIZONTAL) max(0, width - paddingLeft - paddingRight)
+        else max(0, height - paddingTop - paddingBottom)
+        val gap = if (orientation == HORIZONTAL) columnGap else rowGap
+        val lines = mutableListOf<Line>()
+        val absolute = mutableListOf<Entry>()
+        var line = Line()
+        for (index in 0 until childCount) {
+            val child = getChildAt(index)
+            if (child.visibility == GONE) continue
+            val style = styles[child] ?: CraftNativeLayoutStyle()
+            val lp = child.layoutParams as? MarginLayoutParams
+            val horizontalMargins = (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
+            val verticalMargins = (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
+            val childWidth = measureChildWidth(child, style, width - paddingLeft - paddingRight, horizontalMargins)
+            val childHeight = measureChildHeight(child, style, height - paddingTop - paddingBottom, verticalMargins)
+            val entry = Entry(child, style, childWidth, childHeight)
+            if (style.position == "absolute") { absolute += entry; continue }
+            val childMain = (if (orientation == HORIZONTAL) childWidth + horizontalMargins else childHeight + verticalMargins)
+            val childCross = (if (orientation == HORIZONTAL) childHeight + verticalMargins else childWidth + horizontalMargins)
+            val next = if (line.entries.isEmpty()) childMain else line.main + gap + childMain
+            if (wrap && line.entries.isNotEmpty() && next > availableMain) {
+                lines += line
+                line = Line()
+            }
+            line.entries += entry
+            line.main = if (line.entries.size == 1) childMain else line.main + gap + childMain
+            line.cross = max(line.cross, childCross)
+        }
+        if (line.entries.isNotEmpty()) lines += line
+        return lines to absolute
+    }
+
+    private fun measureChildWidth(child: View, style: CraftNativeLayoutStyle, available: Int, margins: Int): Int {
+        val explicit = style.width ?: (child.layoutParams?.width ?: ViewGroup.LayoutParams.WRAP_CONTENT).takeIf { it >= 0 }
+        val target = explicit ?: max(0, available - margins)
+        val spec = if (explicit != null) View.MeasureSpec.makeMeasureSpec(target, View.MeasureSpec.EXACTLY)
+        else View.MeasureSpec.makeMeasureSpec(max(0, available - margins), 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, style.maxWidth)
+    }
+
+    private fun measureChildHeight(child: View, style: CraftNativeLayoutStyle, available: Int, margins: Int): Int {
+        val explicit = style.height ?: (child.layoutParams?.height ?: ViewGroup.LayoutParams.WRAP_CONTENT).takeIf { it >= 0 }
+        val target = explicit ?: max(0, available - margins)
+        val spec = if (explicit != null) View.MeasureSpec.makeMeasureSpec(target, View.MeasureSpec.EXACTLY)
+        else View.MeasureSpec.makeMeasureSpec(max(0, available - margins), View.MeasureSpec.AT_MOST)
+        child.measure(child.measuredWidth.let { View.MeasureSpec.makeMeasureSpec(max(0, it), View.MeasureSpec.EXACTLY) }, spec)
+        return clamp(if (explicit != null) target else child.measuredHeight, style.minHeight, style.maxHeight)
+    }
+
+    private fun clamp(value: Int, lower: Int?, upper: Int?): Int {
+        var result = value
+        if (lower != null) result = max(result, lower)
+        if (upper != null) result = min(result, upper)
+        return result
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val width = View.MeasureSpec.getSize(widthMeasureSpec).takeUnless { View.MeasureSpec.getMode(widthMeasureSpec) == View.MeasureSpec.UNSPECIFIED } ?: 1_000_000
+        val height = View.MeasureSpec.getSize(heightMeasureSpec).takeUnless { View.MeasureSpec.getMode(heightMeasureSpec) == View.MeasureSpec.UNSPECIFIED } ?: 1_000_000
+        val (lines, absolute) = entries(width, height)
+        val main = lines.maxOfOrNull { it.main } ?: 0
+        val cross = lines.sumOf { it.cross } + max(0, lines.size - 1) * (if (orientation == HORIZONTAL) rowGap else columnGap)
+        val desiredWidth = if (orientation == HORIZONTAL) main else cross
+        val desiredHeight = if (orientation == HORIZONTAL) cross else main
+        val absWidth = absolute.maxOfOrNull { it.width } ?: 0
+        val absHeight = absolute.maxOfOrNull { it.height } ?: 0
+        setMeasuredDimension(
+            resolveSize(max(desiredWidth + paddingLeft + paddingRight, absWidth + paddingLeft + paddingRight), widthMeasureSpec),
+            resolveSize(max(desiredHeight + paddingTop + paddingBottom, absHeight + paddingTop + paddingBottom), heightMeasureSpec),
+        )
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        val contentWidth = width - paddingLeft - paddingRight
+        val contentHeight = height - paddingTop - paddingBottom
+        val (lines, absolute) = entries(width, height)
+        val gap = if (orientation == HORIZONTAL) columnGap else rowGap
+        var crossOffset = if (orientation == HORIZONTAL) paddingTop else paddingLeft
+        for (line in lines) {
+            val free = max(0, (if (orientation == HORIZONTAL) contentWidth else contentHeight) - line.main)
+            val (leading, between) = distribution(free, line.entries.size)
+            var mainOffset = if (orientation == HORIZONTAL) paddingLeft else paddingTop
+            mainOffset += leading
+            for (entry in line.entries) {
+                val lp = entry.view.layoutParams as? MarginLayoutParams
+                val marginStart = if (orientation == HORIZONTAL) lp?.leftMargin ?: 0 else lp?.topMargin ?: 0
+                val marginEnd = if (orientation == HORIZONTAL) lp?.rightMargin ?: 0 else lp?.bottomMargin ?: 0
+                val crossSize = if ((entry.style.alignSelf ?: alignItems) == "stretch" && (if (orientation == HORIZONTAL) entry.style.height else entry.style.width) == null)
+                    max(0, line.cross - (if (orientation == HORIZONTAL) (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0) else (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)))
+                else if (orientation == HORIZONTAL) entry.height else entry.width
+                val align = entry.style.alignSelf ?: alignItems
+                val crossPosition = when (align) {
+                    "center" -> (line.cross - crossSize) / 2
+                    "flex-end" -> line.cross - crossSize
+                    else -> 0
+                }
+                val x = if (orientation == HORIZONTAL) mainOffset + marginStart else crossOffset + crossPosition + (lp?.leftMargin ?: 0)
+                val y = if (orientation == HORIZONTAL) crossOffset + crossPosition + (lp?.topMargin ?: 0) else mainOffset + marginStart
+                val w = if (orientation == HORIZONTAL) entry.width else crossSize
+                val h = if (orientation == HORIZONTAL) crossSize else entry.height
+                entry.view.layout(x, y, x + w, y + h)
+                mainOffset += (if (orientation == HORIZONTAL) entry.width else entry.height) + marginStart + marginEnd + gap + between
+            }
+            crossOffset += line.cross + gap
+        }
+        for (entry in absolute) {
+            val widthValue = if (entry.style.left != null && entry.style.right != null) contentWidth - entry.style.left!! - entry.style.right!! else entry.width
+            val heightValue = if (entry.style.top != null && entry.style.bottom != null) contentHeight - entry.style.top!! - entry.style.bottom!! else entry.height
+            val x = paddingLeft + (entry.style.left ?: (entry.style.right?.let { contentWidth - it - widthValue } ?: 0))
+            val y = paddingTop + (entry.style.top ?: (entry.style.bottom?.let { contentHeight - it - heightValue } ?: 0))
+            entry.view.layout(x, y, x + max(0, widthValue), y + max(0, heightValue))
+        }
+    }
+
+    private fun distribution(free: Int, count: Int): Pair<Int, Int> = when (justifyContent) {
+        "center" -> free / 2 to 0
+        "flex-end" -> free to 0
+        "space-between" -> 0 to if (count > 1) free / (count - 1) else 0
+        "space-around" -> free / (count * 2) to free / count
+        "space-evenly" -> free / (count + 1) to free / (count + 1)
+        else -> 0 to 0
+    }
+}
+
 private class CraftNativeScrollView(context: Context) : FrameLayout(context) {
-    val content = LinearLayout(context)
+    val content = CraftNativeFlexLayout(context)
     private val vertical = ScrollView(context)
     private val horizontal = HorizontalScrollView(context)
     private var horizontalMode: Boolean? = null
 
-    init { setHorizontal(false) }
+    init {
+        vertical.isNestedScrollingEnabled = true
+        horizontal.isNestedScrollingEnabled = true
+        vertical.isFillViewport = true
+        horizontal.isFillViewport = true
+        setHorizontal(false)
+    }
 
     fun setHorizontal(value: Boolean) {
         if (horizontalMode == value) return
@@ -74,6 +282,40 @@ private class CraftNativeScrollView(context: Context) : FrameLayout(context) {
         else ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT))
         addView(scroller, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
     }
+
+    fun setNativeNestedScrollingEnabled(value: Boolean) {
+        vertical.isNestedScrollingEnabled = value
+        horizontal.isNestedScrollingEnabled = value
+    }
+
+    fun setScrollEnabled(value: Boolean) {
+        vertical.isEnabled = value
+        horizontal.isEnabled = value
+    }
+
+    fun setScrollIndicators(verticalVisible: Boolean, horizontalVisible: Boolean) {
+        vertical.isVerticalScrollBarEnabled = verticalVisible
+        horizontal.isHorizontalScrollBarEnabled = horizontalVisible
+    }
+
+    fun setScrollListeners(
+        onScroll: ((Int, Int) -> Unit)?,
+        onBeginDrag: (() -> Unit)?,
+        onEndDrag: (() -> Unit)?,
+    ) {
+        fun attach(scroller: View) {
+            scroller.setOnScrollChangeListener { _, x, y, _, _ -> onScroll?.invoke(x, y) }
+            scroller.setOnTouchListener { _, event ->
+                when (event.actionMasked) {
+                    android.view.MotionEvent.ACTION_DOWN -> onBeginDrag?.invoke()
+                    android.view.MotionEvent.ACTION_UP, android.view.MotionEvent.ACTION_CANCEL -> onEndDrag?.invoke()
+                }
+                false
+            }
+        }
+        attach(vertical)
+        attach(horizontal)
+    }
 }
 
 private class CraftNativeFlexSpacer(context: Context) : View(context)
@@ -83,13 +325,19 @@ class MainActivity : AppCompatActivity() {
     private class Screen(
         val route: String?,
         val params: JSONObject,
-        val view: LinearLayout,
+        val view: CraftNativeFlexLayout,
         val isolate: JavaScriptIsolate,
         val port: MessagePort?
     ) {
         val drafts = mutableMapOf<String, String>()
         val controls = mutableMapOf<String, View>()
         val handlers = mutableMapOf<View, String>()
+        val scrollHandlers = mutableMapOf<View, String>()
+        val scrollBeginHandlers = mutableMapOf<View, String>()
+        val scrollEndHandlers = mutableMapOf<View, String>()
+        val focusHandlers = mutableMapOf<View, String>()
+        val blurHandlers = mutableMapOf<View, String>()
+        val submitHandlers = mutableMapOf<View, String>()
         val flatListRows = mutableMapOf<CraftNativeFlatList, MutableMap<String, MutableMap<String, View>>>()
         val flatListOwners = mutableMapOf<String, String>()
         val flatListOwnerByView = mutableMapOf<CraftNativeFlatList, String>()
@@ -199,7 +447,7 @@ class MainActivity : AppCompatActivity() {
     private fun openScreen(route: String?, params: JSONObject = JSONObject()) {
         val engine = sandbox ?: return
         val isolate = engine.createIsolate()
-        val view = LinearLayout(this).apply {
+        val view = CraftNativeFlexLayout(this).apply {
             orientation = LinearLayout.VERTICAL
             layoutParams = FrameLayout.LayoutParams(-1, -1)
         }
@@ -399,6 +647,7 @@ class MainActivity : AppCompatActivity() {
         screen.controls.clear()
         screen.controls.putAll(next)
         screen.handlers.keys.retainAll(retainedViews(screen))
+        screen.view.setChildStyle(tree, document.optJSONObject("style") ?: JSONObject(), resources.displayMetrics.density)
     }
 
     private fun clearRenderedTree(screen: Screen) {
@@ -445,10 +694,37 @@ class MainActivity : AppCompatActivity() {
             }
             "TextInput" -> (previous as? EditText ?: EditText(this)).apply {
                 hint = props.optString("placeholder")
+                inputType = inputTypeFor(props)
+                imeOptions = imeOptionsFor(props)
+                isSingleLine = !props.optBoolean("multiline", false)
+                isEnabled = props.optBoolean("editable", true)
                 if (props.has("value") && text.toString() != props.optString("value")) setText(props.optString("value"))
                 else if (this !== previous && screen.drafts.containsKey(identity)) setText(screen.drafts[identity])
                 val handler = events.optString("onChange").ifBlank { events.optString("onChangeText") }
                 if (handler.isNotBlank()) screen.handlers[this] = handler else screen.handlers.remove(this)
+                val onFocus = events.optString("onFocus")
+                if (onFocus.isNotBlank()) screen.focusHandlers[this] = onFocus else screen.focusHandlers.remove(this)
+                val onBlur = events.optString("onBlur").ifBlank { events.optString("onEndEditing") }
+                if (onBlur.isNotBlank()) screen.blurHandlers[this] = onBlur else screen.blurHandlers.remove(this)
+                val onSubmit = events.optString("onSubmitEditing")
+                if (onSubmit.isNotBlank()) screen.submitHandlers[this] = onSubmit else screen.submitHandlers.remove(this)
+                setOnFocusChangeListener { view, focused ->
+                    val current = if (focused) screen.focusHandlers[view] else screen.blurHandlers[view]
+                    if (current == null) return@setOnFocusChangeListener
+                    send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject().put("text", text.toString())))
+                }
+                setOnEditorActionListener { view, actionId, event ->
+                    val submitted = actionId != EditorInfo.IME_ACTION_NONE || event?.keyCode == KeyEvent.KEYCODE_ENTER
+                    if (!submitted) return@setOnEditorActionListener false
+                    val current = screen.submitHandlers[view] ?: return@setOnEditorActionListener false
+                    send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject().put("text", text.toString())))
+                    true
+                }
+                if (props.optBoolean("autoFocus", false)) post {
+                    requestFocus()
+                    (getSystemService(INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager)
+                        ?.showSoftInput(this, android.view.inputmethod.InputMethodManager.SHOW_IMPLICIT)
+                }
                 if (this !== previous) addTextChangedListener(object : TextWatcher {
                     override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
                     override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
@@ -475,13 +751,47 @@ class MainActivity : AppCompatActivity() {
             "ScrollView" -> (previous as? CraftNativeScrollView ?: CraftNativeScrollView(this)).apply {
                 val horizontal = props.optBoolean("horizontal", false) || style.optString("flexDirection") == "row"
                 setHorizontal(horizontal)
+                setNativeNestedScrollingEnabled(true)
+                setScrollIndicators(
+                    props.optBoolean("showsVerticalScrollIndicator", true),
+                    props.optBoolean("showsHorizontalScrollIndicator", true),
+                )
+                setScrollEnabled(props.optBoolean("scrollEnabled", true))
+                val onScroll = events.optString("onScroll")
+                if (onScroll.isNotBlank()) screen.scrollHandlers[this] = onScroll else screen.scrollHandlers.remove(this)
+                val onBegin = events.optString("onScrollBeginDrag")
+                if (onBegin.isNotBlank()) screen.scrollBeginHandlers[this] = onBegin else screen.scrollBeginHandlers.remove(this)
+                val onEnd = events.optString("onScrollEndDrag")
+                if (onEnd.isNotBlank()) screen.scrollEndHandlers[this] = onEnd else screen.scrollEndHandlers.remove(this)
+                val nativeScroll = this
+                setScrollListeners(
+                    onScroll = { scrollX, scrollY ->
+                        screen.scrollHandlers[nativeScroll]?.let { current ->
+                            val contentView = nativeScroll.content
+                            send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()
+                                .put("contentOffset", JSONObject().put("x", scrollX).put("y", scrollY))
+                                .put("contentSize", JSONObject().put("width", contentView.width).put("height", contentView.height))
+                                .put("layoutMeasurement", JSONObject().put("width", nativeScroll.width).put("height", nativeScroll.height))))
+                        }
+                    },
+                    onBeginDrag = {
+                        screen.scrollBeginHandlers[nativeScroll]?.let { current ->
+                            send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
+                        }
+                    },
+                    onEndDrag = {
+                        screen.scrollEndHandlers[nativeScroll]?.let { current ->
+                            send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
+                        }
+                    },
+                )
                 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 {
+            else -> (previous as? CraftNativeFlexLayout ?: CraftNativeFlexLayout(this)).apply {
                 configureContainer(this, style)
                 reconcileChildren(screen, this, children, path, next, style, previousControls)
             }
@@ -506,7 +816,7 @@ class MainActivity : AppCompatActivity() {
         next[identity] = control
         applyViewStyle(control, style)
         control.layoutParams = LinearLayout.LayoutParams(
-            if (style.has("width")) dp(style.optDouble("width")) else ViewGroup.LayoutParams.MATCH_PARENT,
+            if (style.has("width")) dp(style.optDouble("width")) else ViewGroup.LayoutParams.WRAP_CONTENT,
             if (style.has("height")) dp(style.optDouble("height")) else ViewGroup.LayoutParams.WRAP_CONTENT
         ).apply {
             val margin = style.optDouble("margin", 0.0)
@@ -529,30 +839,13 @@ 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 configureContainer(layout: CraftNativeFlexLayout, style: JSONObject) {
+        layout.configure(style, resources.displayMetrics.density)
     }
 
     private fun reconcileChildren(
         screen: Screen,
-        layout: LinearLayout,
+        layout: CraftNativeFlexLayout,
         children: JSONArray,
         path: String,
         next: MutableMap<String, View>,
@@ -571,6 +864,9 @@ class MainActivity : AppCompatActivity() {
                 else -> null
             }
             if (childView != null) desired.add(childView)
+            if (childView != null && child is JSONObject) {
+                layout.setChildStyle(childView, child.optJSONObject("style") ?: JSONObject(), resources.displayMetrics.density)
+            }
         }
         if (style.optString("flexDirection").endsWith("-reverse")) desired.reverse()
         val desiredSet = desired.toSet()
@@ -580,16 +876,12 @@ class MainActivity : AppCompatActivity() {
                 (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"))
+        layout.requestLayout()
     }
 
     private fun reconcileFlatList(
@@ -644,28 +936,7 @@ class MainActivity : AppCompatActivity() {
         }
     }
 
-    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 addJustificationSpacers(layout: CraftNativeFlexLayout, value: String) { }
 
     private fun applyViewStyle(view: View, style: JSONObject) {
         view.alpha = style.optDouble("opacity", 1.0).toFloat()
@@ -791,8 +1062,12 @@ class MainActivity : AppCompatActivity() {
     private fun applyAccessibility(view: View, props: JSONObject, type: String, fallbackLabel: String) {
         view.tag = fallbackLabel
         view.contentDescription = props.optString("accessibilityLabel").ifBlank { fallbackLabel }
+        props.opt("accessibilityValue")?.takeUnless { it == JSONObject.NULL }?.let { view.contentDescription = "${view.contentDescription}, $it" }
         props.optString("accessibilityHint").takeIf { it.isNotBlank() }?.let { view.tooltipText = it }
         val role = props.optString("accessibilityRole").ifBlank { type.lowercase() }
+        val state = props.optJSONObject("accessibilityState")
+        val disabled = state?.optBoolean("disabled", false) == true
+        if (state != null && state.has("disabled")) view.isEnabled = !disabled
         ViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {
             override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
                 super.onInitializeAccessibilityNodeInfo(host, info)
@@ -805,14 +1080,51 @@ class MainActivity : AppCompatActivity() {
                 }
                 info.isHeading = role == "header"
                 info.roleDescription = role.takeIf { it !in setOf("view", "text", "textinput", "scrollview") }
+                info.isEnabled = !disabled
+                info.isSelected = state?.optBoolean("selected", false) == true
+                info.isChecked = state?.optBoolean("checked", false) == true
             }
         })
-        ViewCompat.setImportantForAccessibility(view, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_YES)
+        ViewCompat.setImportantForAccessibility(
+            view,
+            if (role == "none") ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO else 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)
 
+    private fun inputTypeFor(props: JSONObject): Int {
+        val base = if (props.optBoolean("multiline", false)) InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_MULTI_LINE
+        else InputType.TYPE_CLASS_TEXT
+        val keyboard = when (props.optString("keyboardType")) {
+            "email-address" -> InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS
+            "url" -> InputType.TYPE_TEXT_VARIATION_URI
+            "numeric" -> InputType.TYPE_CLASS_NUMBER
+            "decimal-pad" -> InputType.TYPE_CLASS_NUMBER or InputType.TYPE_NUMBER_FLAG_DECIMAL
+            "phone-pad" -> InputType.TYPE_CLASS_PHONE
+            else -> 0
+        }
+        val capitalization = when (props.optString("autoCapitalize")) {
+            "characters" -> InputType.TYPE_TEXT_FLAG_CAP_CHARACTERS
+            "words" -> InputType.TYPE_TEXT_FLAG_CAP_WORDS
+            "sentences" -> InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
+            else -> 0
+        }
+        val correction = if (props.optBoolean("autoCorrect", true)) InputType.TYPE_TEXT_FLAG_AUTO_CORRECT else 0
+        val secure = if (props.optBoolean("secureTextEntry", false)) InputType.TYPE_TEXT_VARIATION_PASSWORD else 0
+        return (if (keyboard == 0) base else keyboard) or capitalization or correction or secure
+    }
+
+    private fun imeOptionsFor(props: JSONObject): Int = when (props.optString("returnKeyType")) {
+        "done" -> EditorInfo.IME_ACTION_DONE
+        "go" -> EditorInfo.IME_ACTION_GO
+        "next" -> EditorInfo.IME_ACTION_NEXT
+        "search" -> EditorInfo.IME_ACTION_SEARCH
+        "send" -> EditorInfo.IME_ACTION_SEND
+        else -> EditorInfo.IME_ACTION_NONE
+    }
+
     private fun answerAPI(screen: Screen, message: JSONObject, payload: JSONObject) {
         val id = message.optString("id")
         if (id.isBlank()) return
@@ -974,6 +1286,12 @@ class MainActivity : AppCompatActivity() {
         }
         releaseImages(released)
         screen.handlers.keys.removeAll(released)
+        screen.scrollHandlers.keys.removeAll(released)
+        screen.scrollBeginHandlers.keys.removeAll(released)
+        screen.scrollEndHandlers.keys.removeAll(released)
+        screen.focusHandlers.keys.removeAll(released)
+        screen.blurHandlers.keys.removeAll(released)
+        screen.submitHandlers.keys.removeAll(released)
     }
 
     private fun closeScreen(screen: Screen) {
@@ -984,6 +1302,12 @@ class MainActivity : AppCompatActivity() {
         releaseViewState(screen, retainedViews(screen).toList())
         screen.controls.clear()
         screen.handlers.clear()
+        screen.scrollHandlers.clear()
+        screen.scrollBeginHandlers.clear()
+        screen.scrollEndHandlers.clear()
+        screen.focusHandlers.clear()
+        screen.blurHandlers.clear()
+        screen.submitHandlers.clear()
         screen.flatListRows.clear()
         screen.flatListOwners.clear()
         screen.flatListOwnerByView.clear()

package/dist/cli.js

@@ -3303,7 +3303,7 @@ function pinCraftNativeDependency(packagePath, craftVersion) {
 `);
 }
 // package.json
-var version = "0.0.120";
+var version = "0.0.122";
 
 // bin/cli.ts
 var spawnedFrom = process6.env[CRAFT_CLI_SPAWN_MARKER];

package/dist/components/index.d.ts

@@ -285,11 +285,20 @@ export interface BaseProps {
     accessibilityLabel?: string;
     /** Accessibility hint */
     accessibilityHint?: string;
+    /** Accessibility value announced by the native host */
+    accessibilityValue?: string | number;
+    /** Accessibility state exposed to assistive technologies */
+    accessibilityState?: AccessibilityState;
     /** Accessibility role */
     accessibilityRole?: 'none' | 'button' | 'link' | 'image' | 'text' | 'header' | 'search' | 'menu';
     /** Children elements */
     children?: any;
 }
+export interface AccessibilityState {
+    disabled?: boolean;
+    selected?: boolean;
+    checked?: boolean;
+}
 /**
  * View component props.
  */

package/dist/index.cjs

@@ -310,7 +310,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.120";
+var version = "0.0.122";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/index.js

@@ -58,7 +58,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.120";
+var version = "0.0.122";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/ios/src/index.d.ts

@@ -85,6 +85,13 @@ export interface CraftConfig {
     associatedDomains?: string[];
     appGroups?: string[];
     appIconPath?: string;
+    /**
+     * Whether the app uses encryption beyond the exempt kinds (HTTPS, the
+     * system's own). Written as `ITSAppUsesNonExemptEncryption`, so App Store
+     * Connect does not ask the export-compliance question on every build.
+     * Default false: a WebView app that talks HTTPS is exempt.
+     */
+    usesNonExemptEncryption?: boolean;
     privacy?: CraftPrivacyManifest;
     orientations?: Array<'portrait' | 'landscape-left' | 'landscape-right' | 'portrait-upside-down'>;
     deviceFamilies?: Array<'iphone' | 'ipad'>;
@@ -193,6 +200,11 @@ export declare function renderWatchEntitlements(config: CraftConfig): string;
  */
 export declare function renderRuntimeSettings(): string;
 export declare function renderPrivacyManifest(config: CraftConfig): string;
+/**
+ * Whether a PNG carries an alpha channel, from its header: colour type 4
+ * (grey + alpha) or 6 (RGB + alpha), or a tRNS chunk before the image data.
+ */
+export declare function pngHasAlpha(bytes: Uint8Array): boolean;
 /** Replace the bundled web application atomically so removed assets cannot linger. */
 export declare function syncWebAssets(source: string, output: string): void;
 /**