@craft-native/android 0.0.207 → 0.0.210

package/README.md

@@ -102,7 +102,8 @@ stx native compile --config ../screens/native.config.json --format bundle --outp
 craft android build --native-bundle ../native-screen.js
 ```
 
-Native mode maps STX `View`, `SafeAreaView`, `Text`, `Button`, `Link`, `Icon`,
+Native mode maps STX `View`, `SafeAreaView`, `KeyboardAvoidingView`, `StatusBar`,
+`RefreshControl`, `Text`, `Button`, `Link`, `Icon`,
 `Pressable`, `TouchableOpacity`, `TouchableHighlight`, `Checkbox`, `TextInput`, `Picker`, `DatePicker`, `Modal`, `Switch`, `Slider`, `ActivityIndicator`, `Image`, `ImageBackground`, `Video`, `Svg`, `G`, `SvgText`, `ScrollView`,
 `Map`, `SectionList`, and `FlatList` to Android views. `Map` uses the Google
 Maps SDK for trail polylines and marker taps; its overlays carry flat
@@ -199,7 +200,12 @@ JavaScriptSandbox process. Enable `enableLocalDatabase`,
 `enableLocalNotifications`, and `enableDeepLinks` explicitly. Disabled or
 malformed calls reject with stable capability/error codes, and in-flight calls
 have a deadline and cancellation path. The broader browser bridge remains
-specific to WebView mode. Native `TextInput` applies `placeholderTextColor`,
+specific to WebView mode. JavaScriptSandbox has no DOM `window`; Craft aliases
+`globalThis.window` to `globalThis` before installing the native bridge so
+browser-safe SDK calls such as `window.craft.dialog.actionSheet()` reach the
+native capability host. This does not add `document` or DOM rendering; routes
+that do not opt into `native` continue using the WebView renderer. Native
+`TextInput` applies `placeholderTextColor`,
 `selectionColor`, positive `maxLength`, `multiline`, and `numberOfLines` values.
 Native views include
 `ActivityIndicator` and expose
@@ -248,7 +254,7 @@ configured start path against `nativeScreens`; invalid native route tables are
 rejected before a project is generated.
 
 - a tab bar and a navigation bar (`craft.navigation.setOptions`: title, large
-  title, right buttons with badges, `tabBarHidden`), a stack per tab, Android's
+  title, right buttons with badges, `tabAccessory`, `tabBarHidden`), a stack per tab, Android's
   Back key popping it; completed left/right swipes switch between tab roots
   interactively, yield to a horizontal scroll view, and can be disabled per
   screen with `craft.navigation.setOptions({ tabSwipeEnabled: false })`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craft-native/android",
-  "version": "0.0.207",
+  "version": "0.0.210",
   "homepage": "https://github.com/craft-native/craft/tree/main/packages/android#readme",
   "repository": {
     "type": "git",

package/templates/CraftNativeShell.kt.template

@@ -389,6 +389,10 @@ internal object CraftNativePrelude {
         routePrelude: String,
     ): String = """
         $routePrelude
+        // JavaScriptSandbox has no DOM window, but browser-safe SDK bridges
+        // address the host through `window.craft`. Keep native screens
+        // compatible without pretending a document exists.
+        if (typeof globalThis.window === 'undefined') globalThis.window = globalThis;
         (function() {
           var forward = null;
           var queued = [];
@@ -567,7 +571,7 @@ internal object CraftNativePrelude {
  * The bar above a screen (back, title, the screen's buttons) and the tab bar
  * below it, in plain Android views. A screen sets its bar with
  * `craft.navigation.setOptions` (title, largeTitle, hidden, rightButtons,
- * tabBarHidden); the tabs come from the app's `tabs`.
+ * tabAccessory, tabBarHidden); the tabs come from the app's `tabs`.
  */
 internal class CraftNativeChrome(context: Context, private val tabs: List<CraftNativeTab>) : LinearLayout(context) {
     val content = FrameLayout(context)
@@ -578,6 +582,11 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
     private val largeTitleView = TextView(context)
     private val buttons = LinearLayout(context)
     private val tabBar = LinearLayout(context)
+    private val tabRow = LinearLayout(context)
+    private val accessory = FrameLayout(context)
+    private val accessoryIcon = ImageView(context)
+    private val accessoryBadge = TextView(context)
+    private var accessorySpec: JSONObject? = null
     private val tabViews = mutableListOf<Pair<TextView, TextView>>()
     private val tabIconText = mutableMapOf<String, String>()
     private val tabImageURLs = mutableMapOf<String, String>()
@@ -596,6 +605,7 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
     var onBack: (() -> Unit)? = null
     var onButton: ((String) -> Unit)? = null
     var onTab: ((Int) -> Unit)? = null
+    var onAccessory: ((String) -> Unit)? = null
     var onTabSwipeStart: ((Float, Float, Float) -> Boolean)? = null
     var onTabSwipeMove: ((Float) -> Unit)? = null
     var onTabSwipeEnd: ((Float, Boolean) -> Unit)? = null
@@ -660,8 +670,22 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
             tabBar.addView(cell, LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT, 1f))
             tabViews.add(icon to label)
         }
-        addView(tabBar, LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp(64)))
-        tabBar.visibility = if (tabs.isEmpty()) View.GONE else View.VISIBLE
+        tabRow.orientation = HORIZONTAL
+        tabRow.gravity = Gravity.CENTER_VERTICAL
+        tabRow.setPadding(dp(12), dp(4), dp(12), dp(4))
+        tabRow.addView(tabBar, LayoutParams(0, dp(64), 1f))
+        accessory.addView(accessoryIcon, FrameLayout.LayoutParams(dp(26), dp(26), Gravity.CENTER))
+        accessoryBadge.textSize = 10f
+        accessoryBadge.gravity = Gravity.CENTER
+        accessoryBadge.setTextColor(Color.WHITE)
+        accessoryBadge.setPadding(dp(4), 0, dp(4), 0)
+        accessoryBadge.background = GradientDrawable().apply { setColor(Color.RED); cornerRadius = dp(9).toFloat() }
+        accessory.addView(accessoryBadge, FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, dp(18), Gravity.TOP or Gravity.END))
+        accessory.setOnClickListener { accessorySpec?.optString("path")?.let { onAccessory?.invoke(it) } }
+        accessory.visibility = View.GONE
+        tabRow.addView(accessory, LayoutParams(dp(64), dp(64)).apply { marginStart = dp(8) })
+        addView(tabRow, LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp(72)))
+        tabRow.visibility = if (tabs.isEmpty()) View.GONE else View.VISIBLE
         refreshColors()
     }
 
@@ -671,7 +695,7 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
                 val overHorizontalScroll = onTabSwipeShouldDefer?.invoke(event.x, event.y) == true
                 horizontalScrollDeferred = overHorizontalScroll
                 if (overHorizontalScroll) parent?.requestDisallowInterceptTouchEvent(true)
-                swipeTracking = tabs.size > 1 && tabSwipeEnabled && !overHorizontalScroll && tabBar.visibility == View.VISIBLE && event.y < tabBar.top
+                swipeTracking = tabs.size > 1 && tabSwipeEnabled && !overHorizontalScroll && tabRow.visibility == View.VISIBLE && event.y < tabRow.top
                 swipeIntercepted = false
                 swipeDownX = event.x
                 swipeDownY = event.y
@@ -742,7 +766,17 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
             buttons.addView(navButton(button))
         }
         val tabBarHidden = options.optBoolean("tabBarHidden", false) || depth > 0 && options.optBoolean("tabBarHiddenWhenPushed", false)
-        tabBar.visibility = if (tabs.isEmpty() || tabBarHidden) View.GONE else View.VISIBLE
+        tabRow.visibility = if (tabs.isEmpty() || tabBarHidden) View.GONE else View.VISIBLE
+        accessorySpec = options.optJSONObject("tabAccessory")?.takeIf {
+            val path = it.optString("path")
+            path.startsWith("/") && !path.startsWith("//") && it.has("title")
+        }
+        accessory.visibility = if (accessorySpec == null) View.GONE else View.VISIBLE
+        accessorySpec?.let {
+            accessory.contentDescription = it.optString("accessibilityLabel").ifBlank { it.optString("title") } + it.optString("badge").takeIf { badge -> badge.isNotBlank() && badge != "null" }?.let { badge -> ", $badge" }.orEmpty()
+            accessoryBadge.text = it.optString("badge").takeUnless { badge -> badge == "null" }.orEmpty().take(8)
+            accessoryBadge.visibility = if (accessoryBadge.text.isEmpty()) View.GONE else View.VISIBLE
+        }
         tabSwipeEnabled = options.optBoolean("tabSwipeEnabled", true)
         refreshColors()
     }
@@ -801,13 +835,10 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
         titleView.setTextColor(text)
         largeTitleView.setTextColor(text)
         backButton.imageTintList = ColorStateList.valueOf(accent)
-        tabBar.setBackgroundColor(if (dark) Color.parseColor("#121212") else Color.parseColor("#F9F9F9"))
-        val divider = GradientDrawable().apply { setColor(if (dark) Color.parseColor("#262626") else Color.parseColor("#D8D8DC")) }
-        tabBar.foreground = null
-        tabBar.background = android.graphics.drawable.LayerDrawable(arrayOf(
-            divider,
-            GradientDrawable().apply { setColor(if (dark) Color.parseColor("#121212") else Color.parseColor("#F9F9F9")) },
-        )).apply { setLayerInset(1, 0, maxOf(1, (density / 2).toInt()), 0, 0) }
+        val surface = if (dark) Color.parseColor("#1C1C1E") else Color.parseColor("#F9F9F9")
+        tabBar.background = GradientDrawable().apply { setColor(surface); cornerRadius = dp(32).toFloat() }
+        accessory.background = GradientDrawable().apply { setColor(surface); cornerRadius = dp(32).toFloat() }
+        accessorySpec?.let { accessoryIcon.setImageDrawable(CraftNativeIcons.drawable(context, null, it.optString("symbol"), text)) }
         tabViews.forEachIndexed { index, (icon, label) ->
             val color = if (index == selectedTab) accent else muted
             val number = tabIconText[tabs[index].id]

package/templates/MainActivityNative.kt.template

@@ -256,16 +256,9 @@ private data class CraftNativeLayoutStyle(
                 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")
-                    ?.takeUnless { it == JSONObject.NULL }
-                    ?.toString()
-                    ?.takeIf { it.isNotBlank() }
-                    ?: "relative",
+                position = craftNativeOptionalString(raw.opt("position")) ?: "relative",
                 top = number("top"), right = number("right"), bottom = number("bottom"), left = number("left"),
-                alignSelf = raw.opt("alignSelf")
-                    ?.takeUnless { it == JSONObject.NULL }
-                    ?.toString()
-                    ?.takeIf { it.isNotBlank() && it != "auto" },
+                alignSelf = craftNativeOptionalString(raw.opt("alignSelf"))?.takeUnless { it == "auto" },
                 flexGrow = decimal("flexGrow") ?: flex?.coerceAtLeast(0.0) ?: 0.0,
                 flexShrink = decimal("flexShrink") ?: flex?.let { if (it != 0.0) 1.0 else 0.0 },
                 flexBasis = length("flexBasis")
@@ -383,11 +376,8 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         fun merge(node: JSONObject): SvgPaint {
             val props = node.optJSONObject("props") ?: JSONObject()
             val style = node.optJSONObject("style") ?: JSONObject()
-            fun value(name: String): String? = when {
-                style.has(name) && !style.isNull(name) -> style.optString(name)
-                props.has(name) && !props.isNull(name) -> props.optString(name)
-                else -> null
-            }
+            fun value(name: String): String? = craftNativeOptionalString(style.opt(name))
+                ?: craftNativeOptionalString(props.opt(name))
             fun raw(name: String): Any? = when {
                 style.has(name) && !style.isNull(name) -> style.opt(name)
                 props.has(name) && !props.isNull(name) -> props.opt(name)
@@ -486,7 +476,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         for (index in 0 until children.length()) {
             val node = children.optJSONObject(index) ?: continue
             val style = node.optJSONObject("style") ?: JSONObject()
-            if (style.optString("display") == "none") continue
+            if (craftNativeOptionalString(style.opt("display")) == "none") continue
             val paint = inherited.merge(node)
             when (node.optString("type")) {
                 "G" -> drawNodes(canvas, node.optJSONArray("children") ?: JSONArray(), paint)
@@ -582,7 +572,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         }
         var x = craftNativeNumber(props.opt("x"))?.toFloat()?.takeIf { it.isFinite() } ?: 0f
         val y = craftNativeNumber(props.opt("y"))?.toFloat()?.takeIf { it.isFinite() } ?: 0f
-        when (props.optString("textAnchor")) {
+        when (craftNativeOptionalString(props.opt("textAnchor"))) {
             "middle" -> x -= paint.measureText(text) / 2f
             "end" -> x -= paint.measureText(text)
         }
@@ -728,12 +718,15 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
         val explicitRegion = region(pendingProps.optJSONObject("region"))
         val initialRegion = region(pendingProps.optJSONObject("initialRegion"))
         if (explicitRegion != null) {
-            moveCamera(explicitRegion)
+            // A controlled region is an exact camera request. The padding
+            // used for fitToBounds is framing chrome, not part of the region
+            // contract, and would otherwise zoom every Android screen out.
+            moveCamera(explicitRegion, padding = 0)
             initialCameraKey = null
         } else if (initialRegion != null) {
             val key = "region:${pendingProps.optJSONObject("initialRegion")}"
             if (initialCameraKey != key) {
-                moveCamera(initialRegion)
+                moveCamera(initialRegion, padding = 0)
                 initialCameraKey = key
             }
         } else if (craftNativeBoolean(pendingProps.opt("fitToBounds"))) {
@@ -755,9 +748,9 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
         }
     }
 
-    private fun moveCamera(bounds: LatLngBounds) {
+    private fun moveCamera(bounds: LatLngBounds, padding: Int = 24) {
         post {
-            if (width > 0 && height > 0) googleMap?.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 24))
+            if (width > 0 && height > 0) googleMap?.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, padding))
         }
     }
 
@@ -1027,14 +1020,15 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     }
 
     fun configure(style: JSONObject, density: Float) {
-        orientation = if (style.optString("flexDirection") in setOf("row", "row-reverse")) HORIZONTAL else VERTICAL
-        reverse = style.optString("flexDirection").endsWith("-reverse")
-        val flexWrap = style.optString("flexWrap")
-        wrap = flexWrap == "wrap" || flexWrap == "wrap-reverse" || style.optBoolean("flexWrap", false)
+        val flexDirection = craftNativeOptionalString(style.opt("flexDirection")).orEmpty()
+        orientation = if (flexDirection in setOf("row", "row-reverse")) HORIZONTAL else VERTICAL
+        reverse = flexDirection.endsWith("-reverse")
+        val flexWrap = craftNativeOptionalString(style.opt("flexWrap")).orEmpty()
+        wrap = flexWrap == "wrap" || flexWrap == "wrap-reverse" || craftNativeBoolean(style.opt("flexWrap"))
         wrapReverse = flexWrap == "wrap-reverse"
-        alignItems = style.optString("alignItems", "stretch")
-        alignContent = style.optString("alignContent", "flex-start")
-        justifyContent = style.optString("justifyContent", "flex-start")
+        alignItems = craftNativeOptionalString(style.opt("alignItems")) ?: "stretch"
+        alignContent = craftNativeOptionalString(style.opt("alignContent")) ?: "flex-start"
+        justifyContent = craftNativeOptionalString(style.opt("justifyContent")) ?: "flex-start"
         fun spacing(name: String, fallback: Float): Float {
             val value = craftNativeNumber(style.opt(name)) ?: Double.NaN
             val pixels = value * density
@@ -1044,7 +1038,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         val gap = spacing("gap", 0f)
         rowGap = spacing("rowGap", gap)
         columnGap = spacing("columnGap", gap)
-        grid = style.optString("display") == "grid"
+        grid = craftNativeOptionalString(style.opt("display")) == "grid"
         gridColumns = craftNativeGridColumnCount(
             if (style.has("gridTemplateColumns")) style.opt("gridTemplateColumns") else style.opt("gridColumns")
         )
@@ -2095,7 +2089,7 @@ private class CraftNativeKeyboardAvoidingView(context: Context) : FrameLayout(co
     }
 
     fun configure(props: JSONObject, style: JSONObject, density: Float) {
-        behavior = props.optString("behavior", "padding").takeIf { it in setOf("height", "position", "padding") } ?: "padding"
+        behavior = craftNativeOptionalString(props.opt("behavior"))?.takeIf { it in setOf("height", "position", "padding") } ?: "padding"
         val authoredOffset = craftNativeFiniteDouble(props, "keyboardVerticalOffset", 0.0)
         val pixelOffset = (authoredOffset * density.toDouble()).takeIf { it.isFinite() } ?: 0.0
         keyboardVerticalOffset = pixelOffset.roundToInt()
@@ -3958,6 +3952,7 @@ class MainActivity : AppCompatActivity() {
         val bars = CraftNativeChrome(this, routes.tabs)
         bars.layoutParams = FrameLayout.LayoutParams(-1, -1)
         bars.onBack = { onBackPressedDispatcherCompat() }
+        bars.onAccessory = { path -> navigateOpen(path) }
         bars.onButton = { id -> visibleScreen?.takeIf { it.active }?.let { send(it, "NAV_BUTTON", JSONObject().put("id", id)) } }
         bars.onTab = { index ->
             haptic()
@@ -4945,7 +4940,7 @@ class MainActivity : AppCompatActivity() {
             "Text" -> ((previous as? TextView)?.takeUnless { it is Button || it is EditText } ?: TextView(this)).apply {
                 includeFontPadding = false
                 maxLines = craftNativeInt(props.opt("numberOfLines"), 0).takeIf { it > 0 } ?: Int.MAX_VALUE
-                ellipsize = when (props.optString("ellipsizeMode")) {
+                ellipsize = when (craftNativeOptionalString(props.opt("ellipsizeMode"))) {
                     "head" -> TextUtils.TruncateAt.START
                     "middle" -> TextUtils.TruncateAt.MIDDLE
                     "tail" -> TextUtils.TruncateAt.END
@@ -5248,7 +5243,7 @@ class MainActivity : AppCompatActivity() {
                     // from the previous hidden state when it patches props.
                     craftNativeBoolean(props.opt("visible"))
                 } else {
-                    style.has("display") && style.optString("display") != "none"
+                    style.has("display") && craftNativeOptionalString(style.opt("display")) != "none"
                 }
                 val wasVisible = screen.modalVisibility[this]
                 screen.modalVisibility[this] = visible
@@ -5480,7 +5475,7 @@ class MainActivity : AppCompatActivity() {
                 drawing = node
             }
             "ScrollView", "SectionList" -> (previous as? CraftNativeScrollView ?: CraftNativeScrollView(this)).apply {
-                val horizontal = craftNativeBoolean(props.opt("horizontal")) || style.optString("flexDirection") in setOf("row", "row-reverse")
+                val horizontal = craftNativeBoolean(props.opt("horizontal")) || craftNativeOptionalString(style.opt("flexDirection")) in setOf("row", "row-reverse")
                 setHorizontal(horizontal)
                 setNativeNestedScrollingEnabled(true)
                 setScrollIndicators(
@@ -5488,7 +5483,7 @@ class MainActivity : AppCompatActivity() {
                     craftNativeBoolean(props.opt("showsHorizontalScrollIndicator"), true),
                 )
                 setScrollEnabled(craftNativeBoolean(props.opt("scrollEnabled"), true))
-                setKeyboardShouldPersistTaps(props.optString("keyboardShouldPersistTaps", "never"))
+                setKeyboardShouldPersistTaps(craftNativeOptionalString(props.opt("keyboardShouldPersistTaps")) ?: "never")
                 setBounces(craftNativeBoolean(props.opt("bounces"), true))
                 setAlwaysBounce(
                     craftNativeBoolean(props.opt("alwaysBounceVertical"), !horizontal),
@@ -5550,7 +5545,7 @@ class MainActivity : AppCompatActivity() {
                             send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                         }
                     },
-                    keyboardDismissMode = props.optString("keyboardDismissMode"),
+                    keyboardDismissMode = craftNativeOptionalString(props.opt("keyboardDismissMode")).orEmpty(),
                     dismissKeyboard = {
                         (getSystemService(INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager)
                             ?.hideSoftInputFromWindow(nativeScroll.windowToken, 0)
@@ -5587,9 +5582,9 @@ class MainActivity : AppCompatActivity() {
                     { send(screen, "EVENT", JSONObject().put("handlerName", handler).put("nativeEvent", JSONObject())) }
                 }, craftNativeBoolean(propRefresh.opt("refreshing"), craftNativeBoolean(props.opt("refreshing"))))
                 setRefreshAppearance(propRefresh, refreshTintFallback(screen))
-                nativeList.setKeyboardShouldPersistTaps(props.optString("keyboardShouldPersistTaps", "never"))
+                nativeList.setKeyboardShouldPersistTaps(craftNativeOptionalString(props.opt("keyboardShouldPersistTaps")) ?: "never")
                 nativeList.setContentContainerStyle(props.optJSONObject("contentContainerStyle"), resources.displayMetrics.density)
-                nativeList.setKeyboardDismissMode(props.optString("keyboardDismissMode")) {
+                nativeList.setKeyboardDismissMode(craftNativeOptionalString(props.opt("keyboardDismissMode")).orEmpty()) {
                     (getSystemService(INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager)
                         ?.hideSoftInputFromWindow(windowToken, 0)
                 }
@@ -5598,6 +5593,7 @@ class MainActivity : AppCompatActivity() {
             "View", "SafeAreaView" -> (previous as? CraftNativeFlexLayout ?: CraftNativeFlexLayout(this)).apply {
                 configureContainer(this, style)
                 if (type == "SafeAreaView") setSafeAreaEdges(props.optJSONArray("edges"))
+                else setWindowSafeInsets(0, 0, 0, 0)
                 reconcileChildren(screen, this, children, identity, next, style, previousControls)
             }
             "KeyboardAvoidingView" -> (previous as? CraftNativeKeyboardAvoidingView ?: CraftNativeKeyboardAvoidingView(this)).apply {
@@ -5744,7 +5740,7 @@ class MainActivity : AppCompatActivity() {
         if (type == "ActivityIndicator") {
             val animating = craftNativeBoolean(props.opt("animating"), true)
             val hidesWhenStopped = craftNativeBoolean(props.opt("hidesWhenStopped"), true)
-            control.visibility = if (style.optString("display") == "none" || (!animating && hidesWhenStopped)) {
+            control.visibility = if (craftNativeOptionalString(style.opt("display")) == "none" || (!animating && hidesWhenStopped)) {
                 View.GONE
             } else {
                 View.VISIBLE
@@ -5865,7 +5861,7 @@ class MainActivity : AppCompatActivity() {
                 layout.setChildStyle(childView, child.optJSONObject("style") ?: JSONObject(), resources.displayMetrics.density)
             }
         }
-        if (style.optString("flexDirection").endsWith("-reverse")) desired.reverse()
+        if (craftNativeOptionalString(style.opt("flexDirection"))?.endsWith("-reverse") == true) desired.reverse()
         val desiredSet = desired.toSet()
         for ((index, childView) in desired.withIndex()) {
             if (layout.getChildAt(index) !== childView) {
@@ -5992,7 +5988,7 @@ class MainActivity : AppCompatActivity() {
         }
         applyTransform(view, style.optJSONArray("transform"))
         if (view !is CraftNativeModalView) {
-            view.visibility = if (style.optString("display") == "none") View.GONE else View.VISIBLE
+            view.visibility = if (craftNativeOptionalString(style.opt("display")) == "none") View.GONE else View.VISIBLE
         }
         view.elevation = dp(craftNativeNonNegativeDouble(style, "elevation", 0.0)).toFloat()
         view.z = craftNativeFiniteFloat(style, "zIndex", 0f)
@@ -6001,13 +5997,13 @@ class MainActivity : AppCompatActivity() {
         // background paints over the decoded picture (only rounded corners
         // showed it). Keep the outline/borders, with a transparent fill.
         val backgroundColor = if (view is CraftNativeVideoView) Color.TRANSPARENT
-            else color(style.optString("backgroundColor"), Color.TRANSPARENT)
+            else color(craftNativeOptionalString(style.opt("backgroundColor")).orEmpty(), Color.TRANSPARENT)
         val border = craftNativeNonNegativeDouble(style, "borderWidth", 0.0)
         val radius = craftNativeNonNegativeDouble(style, "borderRadius", 0.0)
-        val gradientDirection = style.optString("gradientDirection").takeIf { it.isNotBlank() }
-        val gradientFrom = style.optString("gradientFrom").takeIf { it.isNotBlank() }
-        val gradientVia = style.optString("gradientVia").takeIf { it.isNotBlank() }
-        val gradientTo = style.optString("gradientTo").takeIf { it.isNotBlank() }
+        val gradientDirection = craftNativeOptionalString(style.opt("gradientDirection"))
+        val gradientFrom = craftNativeOptionalString(style.opt("gradientFrom"))
+        val gradientVia = craftNativeOptionalString(style.opt("gradientVia"))
+        val gradientTo = craftNativeOptionalString(style.opt("gradientTo"))
         val gradientColors = if (gradientDirection != null && gradientFrom != null && gradientTo != null) {
             listOfNotNull(
                 color(gradientFrom, Color.TRANSPARENT),
@@ -6025,7 +6021,7 @@ class MainActivity : AppCompatActivity() {
             listOf(radius, radius)
         }.toFloatArray()
         val sideColors = listOf("borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor")
-            .map { color(style.optString(it).ifBlank { style.optString("borderColor") }, Color.TRANSPARENT) }
+            .map { color(craftNativeOptionalString(style.opt(it)) ?: craftNativeOptionalString(style.opt("borderColor")).orEmpty(), Color.TRANSPARENT) }
             .toIntArray()
         val defaultBackground = if (defaultBackgrounds.containsKey(view)) {
             defaultBackgrounds[view]
@@ -6039,7 +6035,7 @@ class MainActivity : AppCompatActivity() {
                     cornerRadii,
                     sideWidths,
                     sideColors,
-                    style.optString("borderStyle").takeIf { it == "dashed" || it == "dotted" },
+                    craftNativeOptionalString(style.opt("borderStyle"))?.takeIf { it == "dashed" || it == "dotted" },
                     gradientDirection,
                     gradientColors,
                 )
@@ -6051,8 +6047,8 @@ class MainActivity : AppCompatActivity() {
                     } else setColor(backgroundColor)
                     if (hasCornerRadii) setCornerRadii(cornerRadii) else cornerRadius = dp(radius).toFloat()
                     if (border > 0) {
-                        val borderColor = color(style.optString("borderColor"), Color.TRANSPARENT)
-                        when (style.optString("borderStyle")) {
+                        val borderColor = color(craftNativeOptionalString(style.opt("borderColor")).orEmpty(), Color.TRANSPARENT)
+                        when (craftNativeOptionalString(style.opt("borderStyle"))) {
                             "dashed" -> setStroke(dp(border), borderColor, dp(border * 3).toFloat(), dp(border * 2).toFloat())
                             "dotted" -> setStroke(dp(border), borderColor, dp(border).toFloat(), dp(border * 1.5).toFloat())
                             else -> setStroke(dp(border), borderColor)
@@ -6065,13 +6061,14 @@ class MainActivity : AppCompatActivity() {
             // and the web.
             null
         } else defaultBackground
-        view.clipToOutline = style.optString("overflow") == "hidden"
-        if (view is ViewGroup) view.clipChildren = style.optString("overflow") == "hidden"
+        val overflow = craftNativeOptionalString(style.opt("overflow"))
+        view.clipToOutline = overflow == "hidden"
+        if (view is ViewGroup) view.clipChildren = overflow == "hidden"
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P &&
             (style.has("shadowColor") || style.has("shadowOpacity") || style.has("shadowRadius"))
         ) {
             val shadowOpacity = craftNativeFiniteFloat(style, "shadowOpacity", 1f).coerceIn(0f, 1f)
-            val shadow = color(style.optString("shadowColor"), Color.BLACK)
+            val shadow = color(craftNativeOptionalString(style.opt("shadowColor")).orEmpty(), Color.BLACK)
             val alphaShadow = Color.argb((Color.alpha(shadow) * shadowOpacity).roundToInt(), Color.red(shadow), Color.green(shadow), Color.blue(shadow))
             view.outlineAmbientShadowColor = alphaShadow
             view.outlineSpotShadowColor = alphaShadow
@@ -6169,7 +6166,7 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun configureText(view: TextView, value: String, style: JSONObject) {
-        view.text = when (style.optString("textTransform")) {
+        view.text = when (craftNativeOptionalString(style.opt("textTransform"))) {
             "uppercase" -> value.uppercase()
             "lowercase" -> value.lowercase()
             "capitalize" -> value.split(' ').joinToString(" ") { word -> word.replaceFirstChar(Char::uppercase) }
@@ -6279,21 +6276,22 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun configureTextStyle(view: TextView, style: JSONObject) {
-        view.setTextColor(color(style.optString("color"), defaultTextColor))
+        view.setTextColor(color(craftNativeOptionalString(style.opt("color")).orEmpty(), defaultTextColor))
         view.setTextSize(TypedValue.COMPLEX_UNIT_SP, craftNativeFiniteFloat(style, "fontSize", 16f))
-        val fontWeight = style.opt("fontWeight") as? String
+        val fontWeight = craftNativeFontWeight(style.opt("fontWeight"))
         val weight = when (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() }
+        val italic = craftNativeOptionalString(style.opt("fontStyle")) == "italic"
+        val family = craftNativeOptionalString(style.opt("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")) {
+        val textAlign = craftNativeOptionalString(style.opt("textAlign"))
+        view.textAlignment = when (textAlign) {
             "left" -> View.TEXT_ALIGNMENT_TEXT_START
             "right" -> View.TEXT_ALIGNMENT_TEXT_END
             "center" -> View.TEXT_ALIGNMENT_CENTER
@@ -6301,7 +6299,7 @@ class MainActivity : AppCompatActivity() {
             else -> View.TEXT_ALIGNMENT_INHERIT
         }
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
-            view.justificationMode = if (style.optString("textAlign") == "justify") {
+            view.justificationMode = if (textAlign == "justify") {
                 Layout.JUSTIFICATION_MODE_INTER_WORD
             } else {
                 Layout.JUSTIFICATION_MODE_NONE
@@ -6315,7 +6313,7 @@ class MainActivity : AppCompatActivity() {
             craftNativeFiniteDouble(style, "lineHeight", Double.NaN).takeIf { it.isFinite() }?.let { dp(it) - view.textSize } ?: 0f,
             1f
         )
-        val shadowColor = style.optString("textShadowColor").takeIf { it.isNotBlank() }
+        val shadowColor = craftNativeOptionalString(style.opt("textShadowColor"))?.takeIf { it.isNotBlank() }
         if (shadowColor == null) {
             view.paint.clearShadowLayer()
         } else {
@@ -6332,16 +6330,16 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun applyTextDecoration(view: TextView, style: JSONObject) {
-        val line = style.optString("textDecorationLine")
+        val line = craftNativeOptionalString(style.opt("textDecorationLine")).orEmpty()
         if (view is EditText) {
             // A field's own text, spanned in place: replacing it would move
             // the caret to the start and tell the screen the text changed.
             val editable = view.text ?: return
             editable.getSpans(0, editable.length, CraftTextDecorationSpan::class.java).forEach(editable::removeSpan)
             if (line.isBlank() || line == "none" || editable.isEmpty()) return
-            val fieldColor = style.optString("textDecorationColor").takeIf { it.isNotBlank() }?.let { color(it, Color.TRANSPARENT) }
+            val fieldColor = craftNativeOptionalString(style.opt("textDecorationColor"))?.takeIf { it.isNotBlank() }?.let { color(it, Color.TRANSPARENT) }
             editable.setSpan(
-                CraftTextDecorationSpan(line, style.optString("textDecorationStyle").ifBlank { "solid" }, fieldColor),
+                CraftTextDecorationSpan(line, craftNativeOptionalString(style.opt("textDecorationStyle")).orEmpty().ifBlank { "solid" }, fieldColor),
                 0,
                 editable.length,
                 Spannable.SPAN_INCLUSIVE_INCLUSIVE,
@@ -6353,14 +6351,14 @@ class MainActivity : AppCompatActivity() {
             if (view.text is Spannable) view.text = text
             return
         }
-        val decorationColor = style.optString("textDecorationColor")
+        val decorationColor = craftNativeOptionalString(style.opt("textDecorationColor")).orEmpty()
             .takeIf { it.isNotBlank() }
             ?.let { color(it, Color.TRANSPARENT) }
         val decorated = SpannableString(text)
         decorated.setSpan(
             CraftTextDecorationSpan(
                 line,
-                style.optString("textDecorationStyle").ifBlank { "solid" },
+                craftNativeOptionalString(style.opt("textDecorationStyle")).orEmpty().ifBlank { "solid" },
                 decorationColor,
             ),
             0,
@@ -6568,8 +6566,16 @@ class MainActivity : AppCompatActivity() {
                 info.roleDescription = role.takeIf { it !in setOf("view", "text", "textinput", "scrollview") }
                 info.hintText = host.tooltipText
                 info.isEnabled = host.isEnabled && !disabled
-                info.isSelected = craftNativeBoolean(state?.opt("selected"))
-                info.isChecked = craftNativeBoolean(state?.opt("checked"))
+                // Keep the native widget state when no accessibilityState was
+                // authored. Overwriting it with the strict false fallback
+                // made a checked Switch/CheckBox announce as unchecked unless
+                // the screen redundantly mirrored its value into metadata.
+                if (state?.has("selected") == true) {
+                    info.isSelected = craftNativeBoolean(state.opt("selected"))
+                }
+                if (state?.has("checked") == true) {
+                    info.isChecked = craftNativeBoolean(state.opt("checked"))
+                }
             }
         })
         ViewCompat.setImportantForAccessibility(