@craft-native/ios 0.0.160 → 0.0.162

package/README.md

@@ -120,7 +120,7 @@ ordinary native children while preserving the shared flex layout contract.
 Keyboard frame changes update the native controller's additional safe area, so
 focused inputs and responsive `onLayout` measurements move with the keyboard.
 
-The opt-in `native` renderer hosts compiled `.stx` screens in JavaScriptCore and renders their `View`, `SafeAreaView`, `Text`, `Button`, `Link`, `Checkbox`, `TextInput`, `Picker`, `DatePicker`, `Switch`, `Slider`, `ActivityIndicator`, `Icon`, `Image`, `Video`, `ScrollView`, and recycling `FlatList` nodes as UIKit controls. `Icon` uses SF Symbols with the shared symbol/name contract and accessibility metadata. `FlatList` uses `UICollectionView` with stable keyed rows, incremental diffs, grids, horizontal and inverted layouts, list chrome, and end-reached pagination. Native views support `onLayout` callbacks with point-based frame measurements that refresh after safe-area or orientation changes. Flex items support `flex`, `flexGrow`, `flexShrink`, and numeric `flexBasis` for main-axis space distribution. Native screens also expose the versioned capability bridge: JSON storage and SQLite survive relaunch, lifecycle and deep-link events are scoped to the top route, and local notifications use `UNUserNotificationCenter`. Enable each capability in `craft.config.json`; disabled calls preserve Craft's `CAPABILITY_DISABLED` rejection code and every request has deterministic timeout/cancellation behavior. The default remains `web`; existing iOS apps are unchanged. `Checkbox` supports controlled `checked`/`value`, indeterminate state, and boolean `onValueChange`; `Picker` renders `<select>`/`<option>` values with `onValueChange` or `onChange`; `DatePicker` emits local date/time values plus ISO and millisecond timestamps; `Switch` supports state-aware `trackColor`, `thumbColor`, and iOS `ios_backgroundColor`; `Slider` supports track/thumb tint props and `step` snapping; `Image` reports load lifecycle events and structured failures; `Video` uses an `AVPlayerViewController` attached to the native screen for URI playback, native controls, and route-safe teardown. The portable component, capability, list, style, image-source, event, accessibility, and reconciliation behavior is specified in the [Native STX guide](../../docs/guides/native-stx.md).
+The opt-in `native` renderer hosts compiled `.stx` screens in JavaScriptCore and renders their `View`, `SafeAreaView`, `Text`, `Button`, `Link`, `Checkbox`, `TextInput`, `Picker`, `DatePicker`, `Switch`, `Slider`, `ActivityIndicator`, `Icon`, `Image`, `Video`, `ScrollView`, `SectionList`, and recycling `FlatList` nodes as UIKit controls. `Icon` uses SF Symbols with the shared symbol/name contract and accessibility metadata. `SectionList` uses the same native scroll host for ordinary `.stx` slot children; grouped section data should use `FlatList` until the section-data protocol is available. `FlatList` uses `UICollectionView` with stable keyed rows, incremental diffs, grids, horizontal and inverted layouts, list chrome, and end-reached pagination. Native views support `onLayout` callbacks with point-based frame measurements that refresh after safe-area or orientation changes. Flex items support `flex`, `flexGrow`, `flexShrink`, and numeric `flexBasis` for main-axis space distribution. Native screens also expose the versioned capability bridge: JSON storage and SQLite survive relaunch, lifecycle and deep-link events are scoped to the top route, and local notifications use `UNUserNotificationCenter`. Enable each capability in `craft.config.json`; disabled calls preserve Craft's `CAPABILITY_DISABLED` rejection code and every request has deterministic timeout/cancellation behavior. The default remains `web`; existing iOS apps are unchanged. `Checkbox` supports controlled `checked`/`value`, indeterminate state, and boolean `onValueChange`; `Picker` renders `<select>`/`<option>` values with `onValueChange` or `onChange`; `DatePicker` emits local date/time values plus ISO and millisecond timestamps; `Switch` supports state-aware `trackColor`, `thumbColor`, and iOS `ios_backgroundColor`; `Slider` supports track/thumb tint props and `step` snapping; `Image` reports load lifecycle events and structured failures; `Video` uses an `AVPlayerViewController` attached to the native screen for URI playback, native controls, and route-safe teardown. The portable component, capability, list, style, image-source, event, accessibility, and reconciliation behavior is specified in the [Native STX guide](../../docs/guides/native-stx.md).
 
 ```bash
 craft ios init NativeDemo --renderer native --output ./ios-native
@@ -185,6 +185,7 @@ Edit `craft.config.json` in your iOS project:
   "enableHealthKit": false,
   "enableAppleMusic": false,
   "enableHeartRate": false,
+  "enableBackgroundAudio": false,
   "enableScreenCapture": true,
   "iosVersion": "15.0",
   "teamId": ""
@@ -195,6 +196,11 @@ The app name is shown as written (`"HQ.training"` is fine); the Xcode
 project, target and Swift types use a PascalCase identifier made from it
 (`HQTraining`). A key left out of the file keeps its default.
 
+`enableBackgroundAudio` adds the `audio` background mode, so a soundscape or a
+meditation's ambience (Web Audio, on the playback session) keeps playing with
+the screen locked; a sleep timer then fades it out on the audio clock. Turn it
+on only for an app that plays sound people listen to: App Review checks.
+
 Purpose strings in your own words, by Info.plist key (each replaces Craft's
 generic sentence; the keys for frameworks the shell links are always written,
 since App Store Connect checks the binary):
@@ -399,6 +405,13 @@ const readings = await health.getHeartRateSamples({ startDate: Date.now() - 8640
 const nights = await health.getSleepIntervals({ startDate: Date.now() - 86400000 })
 // An app built before these reads existed has neither; check first.
 if (health.supports('getHeartRateSamples')) { /* ... */ }
+// Mindful minutes: ask for 'mindful' (with writing allowed), then save a
+// meditation or breathing session. The id is kept as the sample's external
+// UUID, so saving it again keeps the first sample ({ existing: true }).
+await health.requestAuthorization(['mindful'], { write: true })
+await health.saveMindfulSession({ id: 'session-42', startDate: started, endDate: Date.now() })
+// Every app's mindful sessions, oldest first; ownApp marks the ones this app wrote.
+const mindful = await health.getMindfulSessions({ startDate: Date.now() - 7 * 86400000 })
 
 // Screen Capture
 const screenshotBase64 = await window.craft.takeScreenshot();

package/dist/cli.js

@@ -361,6 +361,8 @@ function renderBackgroundModes(config) {
     modes.add("remote-notification");
   if (config.enableHeartRate)
     modes.add("bluetooth-central");
+  if (config.enableBackgroundAudio)
+    modes.add("audio");
   if (!modes.size)
     return "";
   return `    <key>UIBackgroundModes</key>

package/dist/index.d.ts

@@ -79,6 +79,15 @@ export interface CraftConfig {
      * time the page scans or connects.
      */
     enableHeartRate?: boolean;
+    /**
+     * Keep playing sound with the screen locked or the app in the background:
+     * a sleep soundscape, a meditation timer's ambience. Adds the `audio`
+     * background mode. iOS keeps the app running only while it plays, and App
+     * Review expects audible content, so turn it on only for an app that plays
+     * some (Web Audio on native screens and in the web view, which use the
+     * playback session).
+     */
+    enableBackgroundAudio?: boolean;
     /**
      * Purpose strings in the app's own words, by Info.plist key
      * (`{ NSAppleMusicUsageDescription: 'Shows the song playing during a workout.' }`).

package/dist/index.js

@@ -490,6 +490,8 @@ function renderBackgroundModes(config) {
     modes.add("remote-notification");
   if (config.enableHeartRate)
     modes.add("bluetooth-central");
+  if (config.enableBackgroundAudio)
+    modes.add("audio");
   if (!modes.size)
     return "";
   return `    <key>UIBackgroundModes</key>

package/package.json

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

package/templates/CraftApp.swift

@@ -2548,6 +2548,22 @@ struct CraftWebView: UIViewRepresentable {
                 } else {
                     rejectCallback(callbackId, error: "HealthKit is disabled", code: "CAPABILITY_DISABLED")
                 }
+            case "saveHealthMindfulSession":
+                if config.enableHealthKit {
+                    CraftHealth.shared.saveMindfulSession(body: body) { [weak self] in self?.answer(callbackId, $0) }
+                } else {
+                    rejectCallback(callbackId, error: "HealthKit is disabled", code: "CAPABILITY_DISABLED")
+                }
+            case "getHealthMindfulSessions":
+                if config.enableHealthKit {
+                    CraftHealth.shared.getMindfulSessions(
+                        startDate: body["startDate"] as? Double,
+                        endDate: body["endDate"] as? Double,
+                        limit: body["limit"] as? Int
+                    ) { [weak self] in self?.answer(callbackId, $0) }
+                } else {
+                    rejectCallback(callbackId, error: "HealthKit is disabled", code: "CAPABILITY_DISABLED")
+                }
 
             // MARK: - Live Activities
             case "startLiveActivity":
@@ -5056,6 +5072,14 @@ struct CraftWebView: UIViewRepresentable {
                     getSleepIntervals: function(options) {
                         options = options || {};
                         return craft._invoke('getHealthSleepIntervals', {startDate: options.startDate, endDate: options.endDate});
+                    },
+                    saveMindfulSession: function(session) {
+                        session = session || {};
+                        return craft._invoke('saveHealthMindfulSession', {id: session.id, startDate: session.startDate, endDate: session.endDate});
+                    },
+                    getMindfulSessions: function(options) {
+                        options = options || {};
+                        return craft._invoke('getHealthMindfulSessions', {startDate: options.startDate, endDate: options.endDate, limit: options.limit});
                     }
                 };
                 // The Music app's song and transport. Nothing is read until

package/templates/CraftHealth.swift

@@ -43,6 +43,10 @@ final class CraftHealth {
             getHeartRateSamples(startDate: options(0)["startDate"] as? Double, endDate: options(0)["endDate"] as? Double, limit: options(0)["limit"] as? Int, completion: completion)
         case "getSleepIntervals":
             getSleepIntervals(startDate: options(0)["startDate"] as? Double, endDate: options(0)["endDate"] as? Double, completion: completion)
+        case "saveMindfulSession":
+            saveMindfulSession(body: options(0), completion: completion)
+        case "getMindfulSessions":
+            getMindfulSessions(startDate: options(0)["startDate"] as? Double, endDate: options(0)["endDate"] as? Double, limit: options(0)["limit"] as? Int, completion: completion)
         default:
             completion(.failure(CraftHealthError(message: "Unsupported Health method", code: "UNKNOWN_ACTION")))
         }
@@ -106,6 +110,14 @@ final class CraftHealth {
                 if let sleepType = HKObjectType.categoryType(forIdentifier: .sleepAnalysis) {
                     readTypes.insert(sleepType)
                 }
+            case "mindful":
+                // Mindful minutes: a meditation or breathing session. Read
+                // to show them, and (unless read only) written by an app
+                // that times them.
+                if let mindfulType = HKObjectType.categoryType(forIdentifier: .mindfulSession) {
+                    readTypes.insert(mindfulType)
+                    shareTypes.insert(mindfulType)
+                }
             case "dietaryEnergy", "dietaryProtein", "dietaryCarbohydrates", "dietaryFat":
                 // What a food log (MyFitnessPal, Lose It!, Cronometer...)
                 // writes to Apple Health: read only, never written back.
@@ -559,4 +571,104 @@ final class CraftHealth {
         healthStore.execute(query)
     }
 
+    /// Saves a mindful session (Mindful Minutes in the Health app): a
+    /// meditation or breathing session that ran from `startDate` to
+    /// `endDate`, epoch milliseconds. `id` is the app's own id for it, kept
+    /// as the sample's external UUID, so saving the same session twice (a
+    /// retry, a second device) keeps the first sample instead of adding
+    /// another: the answer then says `existing: true`.
+    func saveMindfulSession(body: [String: Any], completion: @escaping Completion) {
+        guard let healthStore = healthStore else {
+            completion(.failure(CraftHealthError(message: "HealthKit not available")))
+            return
+        }
+        guard let mindfulType = HKObjectType.categoryType(forIdentifier: .mindfulSession) else {
+            completion(.failure(CraftHealthError(message: "Mindful sessions are unavailable")))
+            return
+        }
+        guard let id = body["id"] as? String, !id.isEmpty, id.count <= 128,
+              let startValue = body["startDate"] as? Double,
+              let endValue = body["endDate"] as? Double,
+              endValue > startValue,
+              endValue - startValue <= 24 * 3600 * 1000 else {
+            completion(.failure(CraftHealthError(message: "A valid id, startDate and endDate (at most a day apart) are required", code: "INVALID_ARGUMENT")))
+            return
+        }
+
+        let start = Date(timeIntervalSince1970: startValue / 1000)
+        let end = Date(timeIntervalSince1970: endValue / 1000)
+        // Only this app's own samples can be the same session.
+        let predicate = NSCompoundPredicate(andPredicateWithSubpredicates: [
+            HKQuery.predicateForObjects(withMetadataKey: HKMetadataKeyExternalUUID, allowedValues: [id]),
+            HKQuery.predicateForObjects(from: HKSource.default()),
+        ])
+        let lookup = HKSampleQuery(sampleType: mindfulType, predicate: predicate, limit: 1, sortDescriptors: nil) { _, samples, _ in
+            if let kept = samples?.first {
+                completion(.success(["id": kept.uuid.uuidString, "externalId": id, "existing": true]))
+                return
+            }
+            let sample = HKCategorySample(
+                type: mindfulType,
+                value: HKCategoryValue.notApplicable.rawValue,
+                start: start,
+                end: end,
+                metadata: [HKMetadataKeyExternalUUID: id]
+            )
+            healthStore.save(sample) { success, error in
+                if success {
+                    completion(.success(["id": sample.uuid.uuidString, "externalId": id, "existing": false]))
+                } else {
+                    completion(.failure(CraftHealthError(message: error?.localizedDescription ?? "Mindful session could not be saved")))
+                }
+            }
+        }
+        healthStore.execute(lookup)
+    }
+
+    /// Mindful sessions between two instants, oldest first, from every app
+    /// that writes them (the Mindfulness app, Calm, this one). Each says
+    /// whether this app wrote it (`ownApp`) and carries the external id it
+    /// was saved with, so a page can tell its own sessions from the rest.
+    func getMindfulSessions(startDate: Double?, endDate: Double?, limit: Int?, completion: @escaping Completion) {
+        guard let healthStore = healthStore else {
+            completion(.failure(CraftHealthError(message: "HealthKit not available")))
+            return
+        }
+        guard let mindfulType = HKObjectType.categoryType(forIdentifier: .mindfulSession) else {
+            completion(.failure(CraftHealthError(message: "Mindful sessions are unavailable")))
+            return
+        }
+
+        let end = endDate.map { Date(timeIntervalSince1970: $0 / 1000) } ?? Date()
+        let start = startDate.map { Date(timeIntervalSince1970: $0 / 1000) } ?? Calendar.current.date(byAdding: .day, value: -30, to: end)!
+        let predicate = HKQuery.predicateForSamples(withStart: start, end: end, options: [])
+        let oldestFirst = NSSortDescriptor(key: HKSampleSortIdentifierStartDate, ascending: true)
+        let cap = max(1, min(limit ?? 1000, 5000))
+        let ownBundle = Bundle.main.bundleIdentifier
+
+        let query = HKSampleQuery(sampleType: mindfulType, predicate: predicate, limit: cap, sortDescriptors: [oldestFirst]) { _, samples, error in
+            if let error = error, (error as? HKError)?.code != .errorNoData {
+                completion(.failure(CraftHealthError(message: error.localizedDescription)))
+                return
+            }
+            let rows: [[String: Any]] = (samples ?? []).map { sample in
+                let source = sample.sourceRevision.source
+                var item: [String: Any] = [
+                    "id": sample.uuid.uuidString,
+                    "startDate": sample.startDate.timeIntervalSince1970 * 1000,
+                    "endDate": sample.endDate.timeIntervalSince1970 * 1000,
+                    "durationSeconds": sample.endDate.timeIntervalSince(sample.startDate),
+                    "sourceName": source.name,
+                    "sourceBundleId": source.bundleIdentifier,
+                    "ownApp": ownBundle != nil && source.bundleIdentifier == ownBundle,
+                ]
+                if let external = sample.metadata?[HKMetadataKeyExternalUUID] as? String { item["externalId"] = external }
+                if let device = sample.device?.name { item["deviceName"] = device }
+                return item
+            }
+            completion(.success(rows))
+        }
+        healthStore.execute(query)
+    }
+
 }

package/templates/CraftNativeScreen.swift

@@ -185,6 +185,12 @@ private enum CraftNativeGridBridge {
     private typealias AutoRowsFunction = @convention(c) (
         Float, Float, UInt32, Float, Float, Float, UnsafeRawPointer, Int, UnsafeMutableRawPointer
     ) -> Int32
+    private typealias AlignedFunction = @convention(c) (
+        Float, Float, UInt32, Float, Float, UInt32, UnsafeRawPointer, Int, UnsafeMutableRawPointer
+    ) -> Int32
+    private typealias AutoRowsAlignedFunction = @convention(c) (
+        Float, Float, UInt32, Float, Float, UInt32, Float, UnsafeRawPointer, Int, UnsafeMutableRawPointer
+    ) -> Int32
 
     private static let function: Function? = {
         guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_grid") else { return nil }
@@ -194,6 +200,14 @@ private enum CraftNativeGridBridge {
         guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_grid_auto_rows") else { return nil }
         return unsafeBitCast(symbol, to: AutoRowsFunction.self)
     }()
+    private static let alignedFunction: AlignedFunction? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_grid_aligned") else { return nil }
+        return unsafeBitCast(symbol, to: AlignedFunction.self)
+    }()
+    private static let autoRowsAlignedFunction: AutoRowsAlignedFunction? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_grid_auto_rows_aligned") else { return nil }
+        return unsafeBitCast(symbol, to: AutoRowsAlignedFunction.self)
+    }()
 
     static func frames(
         availableWidth: CGFloat,
@@ -202,7 +216,8 @@ private enum CraftNativeGridBridge {
         columnGap: CGFloat,
         rowGap: CGFloat,
         items: [(intrinsicWidth: CGFloat, intrinsicHeight: CGFloat, explicitWidth: CGFloat?, explicitHeight: CGFloat?, minWidth: CGFloat?, maxWidth: CGFloat?, minHeight: CGFloat?, maxHeight: CGFloat?, marginLeft: CGFloat, marginRight: CGFloat, marginTop: CGFloat, marginBottom: CGFloat, stretch: Bool, alignment: UInt32)],
-        autoRowHeight: CGFloat? = nil
+        autoRowHeight: CGFloat? = nil,
+        alignContent: UInt32 = 0
     ) -> [(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)]? {
         guard !items.isEmpty else { return nil }
         if autoRowHeight != nil, autoRowsFunction == nil { return nil }
@@ -222,8 +237,14 @@ private enum CraftNativeGridBridge {
         let status = input.withUnsafeBufferPointer { inputBuffer in
             output.withUnsafeMutableBufferPointer { outputBuffer in
                 if let autoRowHeight, let autoRowsFunction {
+                    if alignContent != 0, let autoRowsAlignedFunction {
+                        return autoRowsAlignedFunction(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), alignContent, Float(autoRowHeight), UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
+                    }
                     return autoRowsFunction(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), Float(autoRowHeight), UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
                 }
+                if alignContent != 0, let alignedFunction {
+                    return alignedFunction(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), alignContent, UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
+                }
                 guard let function else { return Int32(-1) }
                 return function(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
             }
@@ -235,6 +256,18 @@ private enum CraftNativeGridBridge {
     }
 }
 
+private func craftNativeAlignContentCode(_ value: String) -> UInt32 {
+    switch value {
+    case "center": return 1
+    case "flex-end": return 2
+    case "space-between": return 3
+    case "space-around": return 4
+    case "stretch": return 5
+    case "space-evenly": return 6
+    default: return 0
+    }
+}
+
 private final class CraftNativeVideoView: UIView {
     private let playerController = AVPlayerViewController()
     private var player: AVPlayer?
@@ -436,6 +469,7 @@ private enum CraftNativeLength: Equatable {
 private struct CraftNativeLayoutStyle {
     let width: CraftNativeLength?
     let height: CraftNativeLength?
+    let aspectRatio: CGFloat?
     let minWidth: CraftNativeLength?
     let maxWidth: CraftNativeLength?
     let minHeight: CraftNativeLength?
@@ -465,6 +499,8 @@ private struct CraftNativeLayoutStyle {
         func number(_ value: Any?) -> CGFloat? { (value as? NSNumber).map { CGFloat(truncating: $0) } }
         width = CraftNativeLength(raw["width"])
         height = CraftNativeLength(raw["height"])
+        let ratio = number(raw["aspectRatio"])
+        aspectRatio = ratio.flatMap { $0.isFinite && $0 > 0 ? $0 : nil }
         minWidth = CraftNativeLength(raw["minWidth"])
         maxWidth = CraftNativeLength(raw["maxWidth"])
         minHeight = CraftNativeLength(raw["minHeight"])
@@ -870,12 +906,13 @@ private class CraftNativeFlowView: UIStackView {
             let content = CGRect(x: padding.left, y: padding.top, width: max(0, size.width - paddingWidth), height: max(0, size.height - paddingHeight))
             for child in children where child.craftLayoutStyle.position == "absolute" {
                 let style = child.craftLayoutStyle
-                let fixedWidth = style.left != nil && style.right != nil
+                var fixedWidth = style.left != nil && style.right != nil
                     ? max(0, content.width - (style.left ?? 0) - (style.right ?? 0))
                     : style.width?.resolve(content.width)
-                let fixedHeight = style.top != nil && style.bottom != nil
+                var fixedHeight = style.top != nil && style.bottom != nil
                     ? max(0, content.height - (style.top ?? 0) - (style.bottom ?? 0))
                     : style.height?.resolve(content.height)
+                (fixedWidth, fixedHeight) = aspectDimensions(style, width: fixedWidth, height: fixedHeight)
                 let measured = CraftNativeFlexLayout.measure(child, width: fixedWidth, height: fixedHeight, maxWidth: content.width, maxHeight: content.height)
                 let x = style.left ?? (style.right.map { content.width - $0 - measured.width } ?? 0)
                 let y = style.top ?? (style.bottom.map { content.height - $0 - measured.height } ?? 0)
@@ -885,6 +922,21 @@ private class CraftNativeFlowView: UIStackView {
         return (size, frames)
     }
 
+    /// Resolves the missing side of an aspect-ratio box after its parent has
+    /// supplied any definite width or height. Keeping this at the host edge
+    /// lets grid and absolute children follow the same rule as flex items
+    /// without adding platform-specific measurement behavior to native views.
+    private func aspectDimensions(
+        _ style: CraftNativeLayoutStyle,
+        width: CGFloat?,
+        height: CGFloat?
+    ) -> (width: CGFloat?, height: CGFloat?) {
+        guard let ratio = style.aspectRatio else { return (width, height) }
+        if let width, height == nil { return (width, width / ratio) }
+        if let height, width == nil { return (height * ratio, height) }
+        return (width, height)
+    }
+
     private func layoutFlex(
         _ children: [UIView],
         horizontal: Bool,
@@ -964,8 +1016,14 @@ private class CraftNativeFlowView: UIStackView {
             let crossLeading = horizontal ? style.marginTop : style.marginLeft
             let crossTrailing = horizontal ? style.marginBottom : style.marginRight
             let align = style.alignSelf ?? alignItems
-            let explicitMain = (horizontal ? style.width : style.height)?.resolve(definiteMain)
-            let explicitCross = (horizontal ? style.height : style.width)?.resolve(definiteCross)
+            let authoredMain = (horizontal ? style.width : style.height)?.resolve(definiteMain)
+            let authoredCross = (horizontal ? style.height : style.width)?.resolve(definiteCross)
+            let explicitMain = authoredMain ?? style.aspectRatio.flatMap { ratio in
+                authoredCross.map { horizontal ? $0 * ratio : $0 / ratio }
+            }
+            let explicitCross = authoredCross ?? style.aspectRatio.flatMap { ratio in
+                authoredMain.map { horizontal ? $0 / ratio : $0 * ratio }
+            }
             let minMain = (horizontal ? style.minWidth : style.minHeight)?.resolve(definiteMain)
             let maxMain = (horizontal ? style.maxWidth : style.maxHeight)?.resolve(definiteMain)
             let minCross = (horizontal ? style.minHeight : style.minWidth)?.resolve(definiteCross)
@@ -1146,6 +1204,9 @@ private class CraftNativeFlowView: UIStackView {
                 case "space-around":
                     crossBetween = free / CGFloat(lineCrosses.count) + crossGap
                     crossLeading = free / CGFloat(lineCrosses.count * 2)
+                case "space-evenly":
+                    crossBetween = free / CGFloat(lineCrosses.count + 1) + crossGap
+                    crossLeading = free / CGFloat(lineCrosses.count + 1)
                 case "stretch":
                     let extra = free / CGFloat(lineCrosses.count)
                     lineCrosses = lineCrosses.map { $0 + extra }
@@ -1242,11 +1303,14 @@ private class CraftNativeFlowView: UIStackView {
             let style = child.craftLayoutStyle
             let available = max(0, cellWidth - style.marginLeft - style.marginRight)
             let align = style.alignSelf ?? alignItems
-            let fixedWidth = style.width?.resolve(cellWidth) ?? (align == "stretch" ? available : nil)
+            var fixedWidth = style.width?.resolve(cellWidth)
+            var fixedHeight = style.height?.resolve(nil)
+            if fixedWidth == nil && fixedHeight == nil && align == "stretch" { fixedWidth = available }
+            (fixedWidth, fixedHeight) = aspectDimensions(style, width: fixedWidth, height: fixedHeight)
             let size = CraftNativeFlexLayout.measure(
                 child,
                 width: fixedWidth.map { min($0, available) },
-                height: style.height?.resolve(nil),
+                height: fixedHeight,
                 maxWidth: available,
                 maxHeight: CraftNativeFlexLayout.unbounded
             )
@@ -1270,16 +1334,23 @@ private class CraftNativeFlowView: UIStackView {
                 let align = style.alignSelf ?? alignItems
                 let size = sizes[index]
                 let alignment: UInt32 = align == "center" ? 1 : align == "flex-end" ? 2 : 0
+                var explicitWidth = style.width?.resolve(cellWidth)
+                var explicitHeight = style.height?.resolve(nil)
+                if explicitWidth == nil && explicitHeight == nil && align == "stretch" {
+                    explicitWidth = max(0, cellWidth - style.marginLeft - style.marginRight)
+                }
+                (explicitWidth, explicitHeight) = aspectDimensions(style, width: explicitWidth, height: explicitHeight)
                 return (
                     size.width, size.height,
-                    style.width?.resolve(cellWidth), style.height?.resolve(nil),
+                    explicitWidth, explicitHeight,
                     style.minWidth?.resolve(cellWidth), style.maxWidth?.resolve(cellWidth),
                     style.minHeight?.resolve(nil), style.maxHeight?.resolve(nil),
                     style.marginLeft, style.marginRight, style.marginTop, style.marginBottom,
                     align == "stretch", alignment
                 )
             },
-            autoRowHeight: gridAutoRows.map { $0.resolve(innerHeight) ?? 0 }
+            autoRowHeight: gridAutoRows.map { $0.resolve(innerHeight) ?? 0 },
+            alignContent: craftNativeAlignContentCode(alignContent)
         )
         if place {
             if let sharedFrames {
@@ -1289,24 +1360,41 @@ private class CraftNativeFlowView: UIStackView {
                 }
                 return CGSize(width: width, height: innerHeight ?? height)
             }
-            var rowTop = padding.top
+            let gridHeight = innerHeight ?? height
+            let gridGaps = CGFloat(max(0, rowHeights.count - 1)) * verticalGap
+            let gridFree = max(0, gridHeight - rowHeights.reduce(0, +) - gridGaps)
+            var rowLeading: CGFloat = 0
+            var rowBetween = verticalGap
+            var rowExtra: CGFloat = 0
+            switch alignContent {
+            case "center": rowLeading = gridFree / 2
+            case "flex-end": rowLeading = gridFree
+            case "space-between":
+                if rowHeights.count > 1 { rowBetween += gridFree / CGFloat(rowHeights.count - 1) }
+            case "space-around":
+                rowLeading = gridFree / CGFloat(rowHeights.count * 2)
+                rowBetween += gridFree / CGFloat(rowHeights.count)
+            case "stretch": rowExtra = gridFree / CGFloat(max(1, rowHeights.count))
+            default: break
+            }
+            var rowTop = padding.top + rowLeading
             for (index, child) in children.enumerated() {
                 let style = child.craftLayoutStyle
                 let row = index / columns
                 let column = index % columns
-                let rowHeight = rowHeights[row]
+                let rowHeight = rowHeights[row] + rowExtra
                 let size = sizes[index]
                 let align = style.alignSelf ?? alignItems
                 let availableWidth = max(0, cellWidth - style.marginLeft - style.marginRight)
                 let availableHeight = max(0, rowHeight - style.marginTop - style.marginBottom)
                 let childWidth = min(availableWidth, size.width)
-                let childHeight = align == "stretch" && style.height == nil ? availableHeight : min(availableHeight, size.height)
+                let childHeight = align == "stretch" && style.height == nil && style.aspectRatio == nil ? availableHeight : min(availableHeight, size.height)
                 let x = padding.left + CGFloat(column) * (cellWidth + horizontalGap) + style.marginLeft
                     + (align == "center" ? (availableWidth - childWidth) / 2 : align == "flex-end" ? availableWidth - childWidth : 0)
                 let y = rowTop + style.marginTop
                     + (align == "center" ? (availableHeight - childHeight) / 2 : align == "flex-end" ? availableHeight - childHeight : 0)
                 frames.append((child, CGRect(x: x, y: y, width: childWidth, height: childHeight)))
-                if column == columns - 1 || index == children.count - 1 { rowTop += rowHeight + verticalGap }
+                if column == columns - 1 || index == children.count - 1 { rowTop += rowHeight + rowBetween }
             }
         }
         return CGSize(width: width, height: innerHeight ?? height)
@@ -3581,7 +3669,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         current.protocolId = node["id"] as? String
         current.style = style
         result.accessibilityIdentifier = accessibilityIdentifier(node, props: props) ?? path
-        if type != "View" && type != "SafeAreaView" && type != "KeyboardAvoidingView" && type != "ScrollView" && type != "FlatList" && type != "Modal" {
+        if type != "View" && type != "SafeAreaView" && type != "KeyboardAvoidingView" && type != "ScrollView" && type != "SectionList" && type != "FlatList" && type != "Modal" {
             result.setContentHuggingPriority(.required, for: .vertical)
         }
         applyViewStyle(style, to: result, node: current)
@@ -3893,7 +3981,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 controls: (props["controls"] as? Bool) == true,
                 resizeMode: style["resizeMode"] as? String ?? props["resizeMode"] as? String
             )
-        case "ScrollView":
+        case "ScrollView", "SectionList":
             let scroll = result as! CraftNativeScrollView
             let flexDirection = style["flexDirection"] as? String
             let direction = (props["horizontal"] as? Bool) == true
@@ -4020,7 +4108,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             let icon = CraftNativeIconView()
             icon.contentMode = .scaleAspectFit
             return icon
-        case "ScrollView":
+        case "ScrollView", "SectionList":
             return CraftNativeScrollView()
         case "FlatList":
             return CraftNativeFlatList()
@@ -4055,6 +4143,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "video": return "Video"
         case "icon": return "Icon"
         case "scrollview": return "ScrollView"
+        case "sectionlist": return "SectionList"
         case "flatlist": return "FlatList"
         case "svg": return "Svg"
         case "touchableopacity": return "TouchableOpacity"