diff --git a/android/src/main/java/voltra/generated/ShortNames.kt b/android/src/main/java/voltra/generated/ShortNames.kt
index 2503b98..43cea8c 100644
--- a/android/src/main/java/voltra/generated/ShortNames.kt
+++ b/android/src/main/java/voltra/generated/ShortNames.kt
@@ -16,7 +16,9 @@ object ShortNames {
     private val shortToName: Map<String, String> =
         mapOf(
             "ap" to "absolutePosition",
+            "ai" to "alignItems",
             "al" to "alignment",
+            "as" to "alignSelf",
             "ar" to "aspectRatio",
             "an" to "assetName",
             "bkg" to "background",
@@ -53,8 +55,11 @@ object ShortNames {
             "fsh" to "fixedSizeHorizontal",
             "fsv" to "fixedSizeVertical",
             "fl" to "flex",
+            "fb" to "flexBasis",
+            "fdir" to "flexDirection",
             "fg" to "flexGrow",
             "fgw" to "flexGrowWidth",
+            "fk" to "flexShrink",
             "fnt" to "font",
             "ff" to "fontFamily",
             "fs" to "fontSize",
@@ -62,6 +67,7 @@ object ShortNames {
             "fw" to "fontWeight",
             "fgs" to "foregroundStyle",
             "f" to "frame",
+            "g" to "gap",
             "gs" to "gaugeStyle",
             "ge" to "glassEffect",
             "h" to "height",
@@ -70,8 +76,10 @@ object ShortNames {
             "ic" to "icon",
             "id" to "id",
             "it" to "italic",
+            "jc" to "justifyContent",
             "kern" to "kerning",
             "lbl" to "label",
+            "ly" to "layout",
             "lp" to "layoutPriority",
             "l" to "left",
             "ls" to "letterSpacing",
diff --git a/data/components.json b/data/components.json
index 9e8e858..0fe879b 100644
--- a/data/components.json
+++ b/data/components.json
@@ -116,6 +116,14 @@
     "bottom": "b",
     "flex": "fl",
     "flexGrow": "fg",
+    "flexShrink": "fk",
+    "flexBasis": "fb",
+    "alignItems": "ai",
+    "alignSelf": "as",
+    "justifyContent": "jc",
+    "layout": "ly",
+    "flexDirection": "fdir",
+    "gap": "g",
     "lineHeight": "lh",
     "textAlign": "ta",
     "textDecorationLine": "tdl",
@@ -764,18 +772,19 @@
       "swiftAvailability": "iOS 13.0, macOS 10.15",
       "hasChildren": true,
       "parameters": {
-        "spacing": {
-          "type": "number",
-          "default": 0,
-          "optional": true,
-          "description": "Spacing between children"
-        },
         "alignment": {
           "type": "string",
           "default": "center",
           "optional": true,
           "enum": ["leading", "center", "trailing"],
           "description": "Horizontal alignment"
+        },
+        "layout": {
+          "type": "string",
+          "default": "stack",
+          "optional": true,
+          "enum": ["stack", "flex"],
+          "description": "Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox."
         }
       }
     },
@@ -785,21 +794,29 @@
       "swiftAvailability": "iOS 13.0, macOS 10.15",
       "hasChildren": true,
       "parameters": {
-        "spacing": {
-          "type": "number",
-          "default": 0,
-          "optional": true,
-          "description": "Spacing between children"
-        },
         "alignment": {
           "type": "string",
           "default": "center",
           "optional": true,
           "enum": ["top", "center", "bottom"],
           "description": "Vertical alignment"
+        },
+        "layout": {
+          "type": "string",
+          "default": "stack",
+          "optional": true,
+          "enum": ["stack", "flex"],
+          "description": "Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox."
         }
       }
     },
+    {
+      "name": "View",
+      "description": "Flex container with configurable direction. Always uses flexbox layout.",
+      "swiftAvailability": "iOS 16.0, macOS 13.0",
+      "hasChildren": true,
+      "parameters": {}
+    },
     {
       "name": "ZStack",
       "description": "Depth-based stack container",
diff --git a/docs/FLEXBOX.md b/docs/FLEXBOX.md
new file mode 100644
index 0000000..d43b837
--- /dev/null
+++ b/docs/FLEXBOX.md
@@ -0,0 +1,366 @@
+# Flexbox Layout Implementation
+
+## Overview
+
+Voltra implements a React Native-compatible flexbox layout system for iOS using SwiftUI's `Layout` protocol. This provides precise control over layout behavior and matches RN's flexbox semantics more closely than SwiftUI's native layout system.
+
+## Architecture
+
+### Core Components
+
+#### 1. `VoltraFlexStackLayout` (Layout Protocol)
+
+The main layout engine that implements single-axis flexbox. It:
+
+- Computes child sizes based on flex properties
+- Distributes free space using `flexGrow` and `flexShrink`
+- Positions children according to `justifyContent` and `alignItems`
+- Handles gaps, padding, and margins
+
+**Location:** `ios/ui/Layout/VoltraFlexStackLayout.swift`
+
+#### 2. `FlexItemLayoutKey` + `FlexItemValues`
+
+SwiftUI's `LayoutValueKey` mechanism for passing flex properties from child to parent:
+
+```swift
+struct FlexItemValues {
+  var flexGrow: CGFloat = 0
+  var flexShrink: CGFloat = 0
+  var flexBasis: SizeValue?
+  var width: SizeValue?
+  var height: SizeValue?
+  // ... other properties
+}
+```
+
+Children set these via `.layoutValue(key: FlexItemLayoutKey.self, value: ...)` and the parent layout reads them.
+
+**Location:** `ios/ui/Style/FlexEnvironment.swift`
+
+#### 3. Container Components
+
+- **`VoltraFlexView`** - The `<View>` component (dynamic flexDirection)
+- **`VoltraVStack`** - Vertical stack (flexDirection: column)
+- **`VoltraHStack`** - Horizontal stack (flexDirection: row)
+
+All use `VoltraFlexStackLayout` when in flex mode.
+
+#### 4. Style System Integration
+
+- **`StyleConverter`** - Parses JSON styles, applies defaults
+- **`CompositeStyleModifier`** - Applies styles to children, sets `FlexItemLayoutKey`
+- **`FlexContainerStyleModifier`** - Applies container styles AND sets `FlexItemLayoutKey` for nested containers
+- **`isInFlexContainer` environment variable** - Switches between legacy and flex layout paths
+
+## How It Works
+
+### 1. Style Parsing Flow
+
+```
+JSON from RN
+  ↓
+ShortNames.expand ("fg" → "flexGrow")
+  ↓
+StyleConverter.parseLayout
+  • Parses flex/flexGrow/flexShrink from JSON
+  • Applies defaults (0 for grow/shrink)
+  • Handles flex shorthand (flex: 1 → grow=1, shrink=1, basis=0)
+  ↓
+LayoutStyle (non-optional flexGrow/flexShrink with defaults applied)
+```
+
+### 2. Layout Flow
+
+```
+VoltraFlexView creates VoltraFlexStackLayout
+  ↓
+Children rendered with .environment(\.isInFlexContainer, true)
+  ↓
+Each child applies FlexContainerStyleModifier or CompositeStyleModifier
+  • Sets .layoutValue(key: FlexItemLayoutKey.self, value: FlexItemValues(...))
+  ↓
+VoltraFlexStackLayout.sizeThatFits
+  • Reads FlexItemLayoutKey from each child
+  • Computes base sizes (flexBasis or intrinsic)
+  • Distributes free space via flexGrow/flexShrink
+  • Returns container size
+  ↓
+VoltraFlexStackLayout.placeSubviews
+  • Positions children based on justifyContent
+  • Aligns children on cross-axis via alignItems/alignSelf
+  • Places each child with computed size
+```
+
+### 3. Flex Algorithm (Simplified)
+
+**Phase 1: Compute Base Sizes**
+
+- For each child, determine `flexBasis`:
+  - If `flexBasis` is set: use it
+  - If `width`/`height` (depending on axis): use it
+  - Otherwise: measure intrinsic size
+- Apply `minWidth`/`maxWidth`/`minHeight`/`maxHeight` constraints
+
+**Phase 2: Distribute Free Space**
+
+```swift
+totalUsed = sum(baseSizes) + sum(margins) + gaps
+freeSpace = availableSpace - totalUsed
+
+if freeSpace > 0 {
+  // Grow: distribute proportionally by flexGrow
+  for child with flexGrow > 0 {
+    extraSize = freeSpace * (child.flexGrow / totalFlexGrow)
+    finalSize = baseSize + extraSize
+  }
+} else if freeSpace < 0 {
+  // Shrink: reduce proportionally by flexShrink
+  for child with flexShrink > 0 {
+    reduction = abs(freeSpace) * (child.flexShrink / totalFlexShrink)
+    finalSize = baseSize - reduction
+  }
+}
+```
+
+**Phase 3: Position on Main Axis**
+Based on `justifyContent`:
+
+- `flex-start`: Start at container's leading edge
+- `flex-end`: Start at trailing edge
+- `center`: Center items
+- `space-between`: Distribute items evenly, no space at edges
+- `space-around`: Distribute with half-space at edges
+- `space-evenly`: Equal space between all items and edges
+
+**Phase 4: Position on Cross Axis**
+Based on `alignItems` (or per-child `alignSelf`):
+
+- `flex-start`: Align to leading edge
+- `flex-end`: Align to trailing edge
+- `center`: Center on cross-axis
+- `stretch`: Expand to fill cross-axis (if no explicit size)
+
+## Differences from React Native Flexbox
+
+### ✅ Supported (RN-Compatible)
+
+| Feature               | Status | Notes                                                                                           |
+| --------------------- | ------ | ----------------------------------------------------------------------------------------------- |
+| `flexDirection`       | ✅     | `row`, `column`                                                                                 |
+| `flexGrow`            | ✅     | Full support                                                                                    |
+| `flexShrink`          | ✅     | Full support                                                                                    |
+| `flexBasis`           | ✅     | `auto`, fixed, `fill`, `wrap`                                                                   |
+| `flex` shorthand      | ✅     | `flex: 1` → `grow=1, shrink=1, basis=0`                                                         |
+| `justifyContent`      | ✅     | All values: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly` |
+| `alignItems`          | ✅     | `flex-start`, `center`, `flex-end`, `stretch`                                                   |
+| `alignSelf`           | ✅     | Per-child override of `alignItems`                                                              |
+| `gap`                 | ✅     | Spacing between children                                                                        |
+| `padding`             | ✅     | Inner spacing (handled by flex engine)                                                          |
+| `margin`              | ✅     | Outer spacing on children                                                                       |
+| `width`/`height`      | ✅     | Fixed sizes, `fill` (`100%`), `wrap` (`auto`)                                                   |
+| `minWidth`/`maxWidth` | ✅     | Size constraints                                                                                |
+| `aspectRatio`         | ✅     | Maintain aspect ratio                                                                           |
+
+### ❌ Not Supported
+
+| Feature                           | Status | Workaround                     |
+| --------------------------------- | ------ | ------------------------------ |
+| `flexWrap`                        | ❌     | Single-axis only - no wrapping |
+| `flexDirection: 'row-reverse'`    | ❌     | Not implemented                |
+| `flexDirection: 'column-reverse'` | ❌     | Not implemented                |
+| `alignContent`                    | ❌     | Only relevant with wrapping    |
+
+### 🔄 Implementation Differences
+
+1. **No Multi-Line Wrapping**
+
+   - RN's `flexWrap: 'wrap'` is not supported
+   - All items remain on a single axis
+   - Use nested containers for multi-line layouts
+
+2. **Environment-Based Mode Switching**
+
+   - Uses `isInFlexContainer` environment variable
+   - Legacy layout still exists for backward compatibility
+   - Children automatically switch to flex mode when inside flex container
+
+3. **Padding Handling**
+
+   - Padding is handled by the flex layout engine (container padding)
+   - Not applied as SwiftUI `.padding()` modifier in flex mode
+   - This matches RN's box model more closely
+
+4. **Two-Phase Layout**
+   - SwiftUI Layout protocol requires two phases:
+     1. `sizeThatFits`: Compute ideal size
+     2. `placeSubviews`: Position children
+   - RN uses Yoga which has a different algorithm structure
+
+## Enabling Flexbox by Default
+
+### Current State
+
+Flexbox is **partially enabled**:
+
+- `<View>` components use flexbox (`VoltraFlexView`)
+- `<VStack>` and `<HStack>` use flexbox when `layout="flex"` prop is set
+- Legacy layout (`.frame()` + `.layoutPriority()`) still exists for backward compatibility
+
+### Migration Checklist
+
+To make flexbox the default and remove the legacy system:
+
+#### 1. **Remove Legacy Layout Path** ⚠️ Breaking Change
+
+- [ ] Remove `LayoutModifier` (the legacy `.frame()` based system)
+- [ ] Remove the `else` branch in `CompositeStyleModifier` (non-flex path)
+- [ ] Remove `layoutPriority` property from `LayoutStyle`
+- [ ] Remove `flex` shorthand property (superseded by `flexGrow`/`flexShrink`)
+
+**Files to modify:**
+
+- `ios/ui/Style/LayoutStyle.swift` - Remove `LayoutModifier` struct
+- `ios/ui/Style/CompositeStyle.swift` - Remove legacy path
+- `ios/ui/Style/StyleConverter.swift` - Remove `layoutPriority` parsing
+
+#### 2. **Enable Flex by Default in VStack/HStack**
+
+- [ ] Remove `layout="flex"` parameter requirement
+- [ ] Always use `VoltraFlexStackLayout` in VStack/HStack
+- [ ] Remove legacy VStack/HStack rendering paths
+
+**Files to modify:**
+
+- `ios/ui/Views/VoltraVStack.swift` - Remove `legacyBody`, always use `flexBody`
+- `ios/ui/Views/VoltraHStack.swift` - Remove `legacyBody`, always use `flexBody`
+- `data/components.json` - Remove `layout` prop from VStack/HStack schemas
+
+#### 3. **Remove Environment Variable**
+
+- [ ] Remove `isInFlexContainer` environment variable (always true)
+- [ ] Simplify `CompositeStyleModifier` to always use flex child path
+
+**Files to modify:**
+
+- `ios/ui/Style/FlexEnvironment.swift` - Remove `IsInFlexContainerKey`
+- `ios/ui/Style/CompositeStyle.swift` - Remove conditional logic
+- All container components - Remove `.environment(\.isInFlexContainer, true)` calls
+
+#### 4. **Testing & Validation**
+
+- [ ] Test all example screens with flexbox-only layout
+- [ ] Verify nested flex containers work correctly
+- [ ] Test edge cases: zero-sized containers, deeply nested layouts
+- [ ] Check performance with complex layouts (100+ views)
+- [ ] Verify `alignItems: stretch` works correctly
+- [ ] Test with dynamic content (text wrapping, images)
+
+#### 5. **Documentation & Migration Guide**
+
+- [ ] Update main README with flexbox-only approach
+- [ ] Document breaking changes in CHANGELOG
+- [ ] Provide migration guide for users relying on legacy layout
+- [ ] Add examples showing flexbox patterns
+
+### Potential Issues
+
+1. **Breaking Changes for Existing Code**
+
+   - Code relying on `layoutPriority` will break
+   - VStack/HStack without explicit sizing may render differently
+   - Need to provide clear migration path
+
+2. **Performance Considerations**
+
+   - Flex layout is more expensive than simple `.frame()` calls
+   - May need optimization for deeply nested layouts
+   - Consider caching layout calculations
+
+3. **Missing Features**
+
+   - No `flexWrap` support (users may expect it)
+   - No reverse directions (need to document workarounds)
+
+4. **SwiftUI Interop**
+   - Need to ensure flexbox plays well with native SwiftUI views
+   - May need special handling for SwiftUI components in flex containers
+
+## Future Enhancements
+
+### High Priority
+
+1. **FlexWrap Support** - Enable multi-line layouts
+2. **Reverse Directions** - `row-reverse`, `column-reverse`
+3. **Performance Optimization** - Layout caching, incremental updates
+
+### Medium Priority
+
+4. **Absolute Positioning** - Children with `position: absolute`
+5. **Percentage-Based Sizing** - `width: "50%"`, `height: "25%"`
+6. **Advanced Alignment** - `baseline` alignment for text
+
+### Low Priority
+
+7. **Animation Support** - Smooth transitions when flex properties change
+8. **Debug Visualization** - Visual overlay showing flex boxes
+9. **Layout Inspector** - Tool to debug flex layout issues
+
+## Best Practices
+
+### DO ✅
+
+- Use `flexGrow` and `flexShrink` for responsive layouts
+- Prefer `gap` over margin for spacing between items
+- Use `alignSelf` to override alignment for specific children
+- Set explicit `flexBasis` or `width`/`height` when you know the size
+- Use `minWidth`/`maxWidth` to constrain flexible items
+
+### DON'T ❌
+
+- Don't mix legacy and flex layouts in the same container
+- Don't rely on `layoutPriority` (it's legacy)
+- Don't use large `flexGrow` values (1-3 is usually sufficient)
+- Don't nest many flex containers without testing performance
+- Don't expect `flexWrap` to work (not implemented)
+
+## Debugging
+
+### Common Issues
+
+**1. Child not growing despite `flexGrow: 1`**
+
+- ✅ Check that the container has defined size (`width: '100%'` or `height: '100%'`)
+- ✅ Ensure child doesn't have explicit size that prevents growth
+
+**2. Items not aligned correctly**
+
+- Check `alignItems` on container vs `alignSelf` on child
+- Verify you're using the right alignment for the axis (main vs cross)
+
+**3. Unexpected spacing**
+
+- Check if `gap` is set on container
+- Verify margins on children
+- Ensure `justifyContent` is what you expect
+
+**4. Layout not updating**
+
+- Flex layout may not react to content changes
+- Force re-render by changing container key
+
+## Related Files
+
+- `ios/ui/Layout/VoltraFlexStackLayout.swift` - Main layout engine
+- `ios/ui/Layout/FlexContainerHelper.swift` - Container utilities
+- `ios/ui/Style/FlexEnvironment.swift` - Flex item values
+- `ios/ui/Style/CompositeStyle.swift` - Child style application
+- `ios/ui/Views/VoltraFlexView.swift` - View component
+- `ios/ui/Views/VoltraVStack.swift` - VStack component
+- `ios/ui/Views/VoltraHStack.swift` - HStack component
+
+## Resources
+
+- [React Native Flexbox Guide](https://reactnative.dev/docs/flexbox)
+- [SwiftUI Layout Protocol](https://developer.apple.com/documentation/swiftui/layout)
+- [CSS Flexbox Spec](https://www.w3.org/TR/css-flexbox-1/)
diff --git a/example/app/testing-grounds/flex-playground.tsx b/example/app/testing-grounds/flex-playground.tsx
new file mode 100644
index 0000000..c15b990
--- /dev/null
+++ b/example/app/testing-grounds/flex-playground.tsx
@@ -0,0 +1,5 @@
+import FlexPlaygroundScreen from '~/screens/testing-grounds/flex-playground/FlexPlaygroundScreen'
+
+export default function FlexPlaygroundIndex() {
+  return <FlexPlaygroundScreen />
+}
diff --git a/example/package-lock.json b/example/package-lock.json
index dcc67f1..5616587 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -2541,9 +2541,9 @@
       }
     },
     "node_modules/@jest/core/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -2598,9 +2598,9 @@
       }
     },
     "node_modules/@jest/core/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -2778,9 +2778,9 @@
       }
     },
     "node_modules/@jest/core/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -3006,9 +3006,9 @@
       }
     },
     "node_modules/@jest/globals/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -3039,9 +3039,9 @@
       }
     },
     "node_modules/@jest/globals/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -3273,9 +3273,9 @@
       }
     },
     "node_modules/@jest/reporters/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -3316,9 +3316,9 @@
       }
     },
     "node_modules/@jest/reporters/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -3477,9 +3477,9 @@
       }
     },
     "node_modules/@jest/reporters/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -3586,9 +3586,9 @@
       }
     },
     "node_modules/@jest/snapshot-utils/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -3727,17 +3727,17 @@
       }
     },
     "node_modules/@jest/test-sequencer/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
     },
     "node_modules/@jest/test-sequencer/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -7119,9 +7119,9 @@
       }
     },
     "node_modules/expect/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -7141,9 +7141,9 @@
       }
     },
     "node_modules/expect/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -8574,17 +8574,17 @@
       }
     },
     "node_modules/jest-changed-files/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
     },
     "node_modules/jest-changed-files/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -8735,9 +8735,9 @@
       }
     },
     "node_modules/jest-circus/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -8768,9 +8768,9 @@
       }
     },
     "node_modules/jest-circus/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -8940,9 +8940,9 @@
       }
     },
     "node_modules/jest-cli/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -8976,9 +8976,9 @@
       }
     },
     "node_modules/jest-cli/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -9212,9 +9212,9 @@
       }
     },
     "node_modules/jest-config/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -9335,9 +9335,9 @@
       }
     },
     "node_modules/jest-config/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -9571,9 +9571,9 @@
       }
     },
     "node_modules/jest-config/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -9662,9 +9662,9 @@
       }
     },
     "node_modules/jest-diff/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -9766,9 +9766,9 @@
       }
     },
     "node_modules/jest-each/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -9788,9 +9788,9 @@
       }
     },
     "node_modules/jest-each/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -9934,9 +9934,9 @@
       }
     },
     "node_modules/jest-leak-detector/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -10003,9 +10003,9 @@
       }
     },
     "node_modules/jest-matcher-utils/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -10184,9 +10184,9 @@
       }
     },
     "node_modules/jest-resolve/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -10220,9 +10220,9 @@
       }
     },
     "node_modules/jest-resolve/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -10510,9 +10510,9 @@
       }
     },
     "node_modules/jest-runner/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -10578,9 +10578,9 @@
       }
     },
     "node_modules/jest-runner/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -10794,9 +10794,9 @@
       }
     },
     "node_modules/jest-runner/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -10996,9 +10996,9 @@
       }
     },
     "node_modules/jest-runtime/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -11050,9 +11050,9 @@
       }
     },
     "node_modules/jest-runtime/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -11227,9 +11227,9 @@
       }
     },
     "node_modules/jest-runtime/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -11369,9 +11369,9 @@
       }
     },
     "node_modules/jest-snapshot/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -11412,9 +11412,9 @@
       }
     },
     "node_modules/jest-snapshot/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -11573,9 +11573,9 @@
       }
     },
     "node_modules/jest-snapshot/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -11732,17 +11732,17 @@
       }
     },
     "node_modules/jest-watcher/node_modules/@sinclair/typebox": {
-      "version": "0.34.47",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.47.tgz",
-      "integrity": "sha512-ZGIBQ+XDvO5JQku9wmwtabcVTHJsgSWAHYtVuM9pBNNR5E88v6Jcj/llpmsjivig5X8A8HHOb4/mbEKPS5EvAw==",
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
       "dev": true,
       "license": "MIT",
       "peer": true
     },
     "node_modules/jest-watcher/node_modules/ci-info": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
-      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
       "dev": true,
       "funding": [
         {
@@ -12381,9 +12381,9 @@
       }
     },
     "node_modules/make-dir/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "peer": true,
diff --git a/example/screens/live-activities/LiveActivitiesScreen.tsx b/example/screens/live-activities/LiveActivitiesScreen.tsx
index a97bf44..b32fb2c 100644
--- a/example/screens/live-activities/LiveActivitiesScreen.tsx
+++ b/example/screens/live-activities/LiveActivitiesScreen.tsx
@@ -3,9 +3,9 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { ScrollView, StyleSheet, Text, View } from 'react-native'
 import { endAllLiveActivities } from 'voltra/client'
 
+import { ActiveWidgetsIOSCard } from '~/components/ActiveWidgetsIOSCard'
 import { Button } from '~/components/Button'
 import { Card } from '~/components/Card'
-import { ActiveWidgetsIOSCard } from '~/components/ActiveWidgetsIOSCard'
 import { NotificationsCard } from '~/components/NotificationsCard'
 import BasicLiveActivity from '~/screens/live-activities/BasicLiveActivity'
 import CompassLiveActivity from '~/screens/live-activities/CompassLiveActivity'
diff --git a/example/screens/testing-grounds/TestingGroundsScreen.tsx b/example/screens/testing-grounds/TestingGroundsScreen.tsx
index c546097..4fcbcfc 100644
--- a/example/screens/testing-grounds/TestingGroundsScreen.tsx
+++ b/example/screens/testing-grounds/TestingGroundsScreen.tsx
@@ -48,6 +48,13 @@ const TESTING_GROUNDS_SECTIONS = [
       'Explore all available Voltra components including Button, Text, VStack, HStack, ZStack, Image, and more.',
     route: '/testing-grounds/components',
   },
+  {
+    id: 'flex-playground',
+    title: 'Flex Layout Playground',
+    description:
+      'Interactive playground for experimenting with flex layout properties. Test alignItems, justifyContent, flexDirection, spacing, and padding with live visual feedback.',
+    route: '/testing-grounds/flex-playground',
+  },
   {
     id: 'image-preloading',
     title: 'Image Preloading',
diff --git a/example/screens/testing-grounds/flex-playground/FlexPlaygroundScreen.tsx b/example/screens/testing-grounds/flex-playground/FlexPlaygroundScreen.tsx
new file mode 100644
index 0000000..50a34c8
--- /dev/null
+++ b/example/screens/testing-grounds/flex-playground/FlexPlaygroundScreen.tsx
@@ -0,0 +1,240 @@
+import { Link } from 'expo-router'
+import React, { useState } from 'react'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { Voltra } from 'voltra'
+import { VoltraView } from 'voltra/client'
+
+import { Button } from '~/components/Button'
+import { Card } from '~/components/Card'
+
+type FlexDirection = 'row' | 'column'
+type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch'
+type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
+
+const FLEX_DIRECTION_OPTIONS: FlexDirection[] = ['column', 'row']
+const ALIGN_ITEMS_OPTIONS: AlignItems[] = ['flex-start', 'center', 'flex-end', 'stretch']
+const JUSTIFY_CONTENT_OPTIONS: JustifyContent[] = [
+  'flex-start',
+  'center',
+  'flex-end',
+  'space-between',
+  'space-around',
+  'space-evenly',
+]
+
+const FLEX_DIRECTION_LABELS: Record<FlexDirection, string> = {
+  column: 'Column',
+  row: 'Row',
+}
+
+const ALIGN_ITEMS_LABELS: Record<AlignItems, string> = {
+  'flex-start': 'flex-start',
+  center: 'center',
+  'flex-end': 'flex-end',
+  stretch: 'stretch',
+}
+
+const JUSTIFY_CONTENT_LABELS: Record<JustifyContent, string> = {
+  'flex-start': 'flex-start',
+  center: 'center',
+  'flex-end': 'flex-end',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+}
+
+export default function FlexPlaygroundScreen() {
+  const [flexDirection, setFlexDirection] = useState<FlexDirection>('column')
+  const [alignItems, setAlignItems] = useState<AlignItems>('stretch')
+  const [justifyContent, setJustifyContent] = useState<JustifyContent>('flex-start')
+  const [gap, setGap] = useState<number>(8)
+  const [containerPadding, setContainerPadding] = useState<number>(16)
+
+  const cycleFlexDirection = () => {
+    const currentIndex = FLEX_DIRECTION_OPTIONS.indexOf(flexDirection)
+    const nextIndex = (currentIndex + 1) % FLEX_DIRECTION_OPTIONS.length
+    setFlexDirection(FLEX_DIRECTION_OPTIONS[nextIndex])
+  }
+
+  const cycleAlignItems = () => {
+    const currentIndex = ALIGN_ITEMS_OPTIONS.indexOf(alignItems)
+    const nextIndex = (currentIndex + 1) % ALIGN_ITEMS_OPTIONS.length
+    setAlignItems(ALIGN_ITEMS_OPTIONS[nextIndex])
+  }
+
+  const cycleJustifyContent = () => {
+    const currentIndex = JUSTIFY_CONTENT_OPTIONS.indexOf(justifyContent)
+    const nextIndex = (currentIndex + 1) % JUSTIFY_CONTENT_OPTIONS.length
+    setJustifyContent(JUSTIFY_CONTENT_OPTIONS[nextIndex])
+  }
+
+  const increaseGap = () => setGap((prev) => Math.min(prev + 4, 32))
+  const decreaseGap = () => setGap((prev) => Math.max(prev - 4, 0))
+
+  const increasePadding = () => setContainerPadding((prev) => Math.min(prev + 4, 32))
+  const decreasePadding = () => setContainerPadding((prev) => Math.max(prev - 4, 0))
+
+  return (
+    <View style={styles.container}>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+        <Text style={styles.heading}>Flex Layout Playground</Text>
+        <Text style={styles.subheading}>
+          Experiment with flex properties using the new View component with dynamic flexDirection.
+        </Text>
+
+        {/* Controls */}
+        <Card>
+          <Card.Title>Controls</Card.Title>
+
+          {/* Flex Direction */}
+          <View style={styles.controlRow}>
+            <Text style={styles.controlLabel}>Flex Direction:</Text>
+            <Button title={FLEX_DIRECTION_LABELS[flexDirection]} onPress={cycleFlexDirection} variant="secondary" />
+          </View>
+
+          {/* Align Items */}
+          <View style={styles.controlRow}>
+            <Text style={styles.controlLabel}>Align Items:</Text>
+            <Button title={ALIGN_ITEMS_LABELS[alignItems]} onPress={cycleAlignItems} variant="secondary" />
+          </View>
+
+          {/* Justify Content */}
+          <View style={styles.controlRow}>
+            <Text style={styles.controlLabel}>Justify Content:</Text>
+            <Button title={JUSTIFY_CONTENT_LABELS[justifyContent]} onPress={cycleJustifyContent} variant="secondary" />
+          </View>
+
+          {/* Gap */}
+          <View style={styles.controlRow}>
+            <Text style={styles.controlLabel}>Gap: {gap}px</Text>
+            <View style={styles.buttonGroup}>
+              <Button title="-" onPress={decreaseGap} variant="secondary" />
+              <Button title="+" onPress={increaseGap} variant="secondary" />
+            </View>
+          </View>
+
+          {/* Container Padding */}
+          <View style={styles.controlRow}>
+            <Text style={styles.controlLabel}>Padding: {containerPadding}px</Text>
+            <View style={styles.buttonGroup}>
+              <Button title="-" onPress={decreasePadding} variant="secondary" />
+              <Button title="+" onPress={increasePadding} variant="secondary" />
+            </View>
+          </View>
+        </Card>
+
+        {/* Preview */}
+        <Card>
+          <Card.Title>Live Preview</Card.Title>
+          <Text style={styles.previewSubtext}>See how your flex settings affect the layout below</Text>
+
+          <VoltraView style={{ width: '100%', height: 300, backgroundColor: '#1E293B', padding: 8, marginTop: 12 }}>
+            <Voltra.View
+              style={{
+                backgroundColor: '#334155',
+                padding: containerPadding,
+                width: '100%',
+                height: '100%',
+                flexDirection,
+                alignItems,
+                justifyContent,
+                gap,
+              }}
+            >
+              <Voltra.View
+                style={{
+                  backgroundColor: '#EF4444',
+                  padding: 12,
+                  borderRadius: 8,
+                  width: flexDirection === 'row' ? 80 : undefined,
+                  height: flexDirection === 'column' ? 60 : undefined,
+                }}
+              >
+                <Voltra.Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold' }}>Item 1</Voltra.Text>
+              </Voltra.View>
+
+              <Voltra.View
+                style={{
+                  backgroundColor: '#3B82F6',
+                  padding: 12,
+                  borderRadius: 8,
+                  width: flexDirection === 'row' ? 100 : undefined,
+                  height: flexDirection === 'column' ? 80 : undefined,
+                }}
+              >
+                <Voltra.Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold' }}>Item 2</Voltra.Text>
+              </Voltra.View>
+
+              <Voltra.View
+                style={{
+                  backgroundColor: '#10B981',
+                  padding: 12,
+                  borderRadius: 8,
+                  width: flexDirection === 'row' ? 60 : undefined,
+                  height: flexDirection === 'column' ? 50 : undefined,
+                }}
+              >
+                <Voltra.Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold' }}>Item 3</Voltra.Text>
+              </Voltra.View>
+            </Voltra.View>
+          </VoltraView>
+        </Card>
+
+        <View style={styles.footer}>
+          <Link href="/testing-grounds" asChild>
+            <Button title="Back to Testing Grounds" variant="ghost" />
+          </Link>
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    paddingHorizontal: 20,
+    paddingVertical: 24,
+  },
+  heading: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#FFFFFF',
+    marginBottom: 8,
+  },
+  subheading: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#CBD5F5',
+    marginBottom: 20,
+  },
+  controlRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  controlLabel: {
+    fontSize: 14,
+    color: '#CBD5F5',
+    flex: 1,
+  },
+  buttonGroup: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  previewSubtext: {
+    fontSize: 12,
+    color: '#94A3B8',
+    marginTop: 4,
+  },
+  footer: {
+    marginTop: 24,
+    alignItems: 'center',
+  },
+})
diff --git a/ios/shared/ComponentTypeID.swift b/ios/shared/ComponentTypeID.swift
index 5338223..9cc490f 100644
--- a/ios/shared/ComponentTypeID.swift
+++ b/ios/shared/ComponentTypeID.swift
@@ -23,13 +23,14 @@ public enum ComponentTypeID: Int, Codable {
   case LINEAR_GRADIENT = 10
   case V_STACK = 11
   case H_STACK = 12
-  case Z_STACK = 13
-  case GROUP_BOX = 14
-  case GLASS_CONTAINER = 15
-  case SPACER = 16
-  case DIVIDER = 17
-  case MASK = 18
-  case LINK = 19
+  case VIEW = 13
+  case Z_STACK = 14
+  case GROUP_BOX = 15
+  case GLASS_CONTAINER = 16
+  case SPACER = 17
+  case DIVIDER = 18
+  case MASK = 19
+  case LINK = 20
 
   /// Get the component name string for this ID
   public var componentName: String {
@@ -60,6 +61,8 @@ public enum ComponentTypeID: Int, Codable {
       return "VStack"
     case .H_STACK:
       return "HStack"
+    case .VIEW:
+      return "View"
     case .Z_STACK:
       return "ZStack"
     case .GROUP_BOX:
@@ -95,6 +98,7 @@ public enum ComponentTypeID: Int, Codable {
     case "LinearGradient": self = .LINEAR_GRADIENT
     case "VStack": self = .V_STACK
     case "HStack": self = .H_STACK
+    case "View": self = .VIEW
     case "ZStack": self = .Z_STACK
     case "GroupBox": self = .GROUP_BOX
     case "GlassContainer": self = .GLASS_CONTAINER
diff --git a/ios/shared/ShortNames.swift b/ios/shared/ShortNames.swift
index 74e5567..4b99e2e 100644
--- a/ios/shared/ShortNames.swift
+++ b/ios/shared/ShortNames.swift
@@ -13,7 +13,9 @@ public enum ShortNames {
   /// Mapping from short names to full names
   private static let shortToName: [String: String] = [
     "ap": "absolutePosition",
+    "ai": "alignItems",
     "al": "alignment",
+    "as": "alignSelf",
     "ar": "aspectRatio",
     "an": "assetName",
     "bkg": "background",
@@ -50,8 +52,11 @@ public enum ShortNames {
     "fsh": "fixedSizeHorizontal",
     "fsv": "fixedSizeVertical",
     "fl": "flex",
+    "fb": "flexBasis",
+    "fdir": "flexDirection",
     "fg": "flexGrow",
     "fgw": "flexGrowWidth",
+    "fk": "flexShrink",
     "fnt": "font",
     "ff": "fontFamily",
     "fs": "fontSize",
@@ -59,6 +64,7 @@ public enum ShortNames {
     "fw": "fontWeight",
     "fgs": "foregroundStyle",
     "f": "frame",
+    "g": "gap",
     "gs": "gaugeStyle",
     "ge": "glassEffect",
     "h": "height",
@@ -67,8 +73,10 @@ public enum ShortNames {
     "ic": "icon",
     "id": "id",
     "it": "italic",
+    "jc": "justifyContent",
     "kern": "kerning",
     "lbl": "label",
+    "ly": "layout",
     "lp": "layoutPriority",
     "l": "left",
     "ls": "letterSpacing",
diff --git a/ios/shared/VoltraNode.swift b/ios/shared/VoltraNode.swift
index 4d47213..ae330b3 100644
--- a/ios/shared/VoltraNode.swift
+++ b/ios/shared/VoltraNode.swift
@@ -131,6 +131,9 @@ struct VoltraElementView: View {
     case "HStack":
       VoltraHStack(element)
 
+    case "View":
+      VoltraFlexView(element)
+
     case "ZStack":
       VoltraZStack(element)
 
diff --git a/ios/ui/Generated/Parameters/BoxParameters.swift b/ios/ui/Generated/Parameters/BoxParameters.swift
new file mode 100644
index 0000000..8f49950
--- /dev/null
+++ b/ios/ui/Generated/Parameters/BoxParameters.swift
@@ -0,0 +1,24 @@
+//
+//  BoxParameters.swift
+
+//  AUTO-GENERATED from data/components.json
+//  DO NOT EDIT MANUALLY - Changes will be overwritten
+//  Schema version: 1.0.0
+
+import Foundation
+
+/// Parameters for Box component
+/// Flex container with configurable direction. Always uses flexbox layout.
+public struct BoxParameters: ComponentParameters {
+  /// Spacing between children
+  public let spacing: Double
+
+  enum CodingKeys: String, CodingKey {
+    case spacing
+  }
+
+  public init(from decoder: Decoder) throws {
+    let container = try decoder.container(keyedBy: CodingKeys.self)
+    spacing = try container.decodeIfPresent(Double.self, forKey: .spacing) ?? 0
+  }
+}
diff --git a/ios/ui/Generated/Parameters/HStackParameters.swift b/ios/ui/Generated/Parameters/HStackParameters.swift
index a4bf584..21178e7 100644
--- a/ios/ui/Generated/Parameters/HStackParameters.swift
+++ b/ios/ui/Generated/Parameters/HStackParameters.swift
@@ -10,20 +10,20 @@ import Foundation
 /// Parameters for HStack component
 /// Horizontal stack container
 public struct HStackParameters: ComponentParameters {
-  /// Spacing between children
-  public let spacing: Double
-
   /// Vertical alignment
   public let alignment: String
 
+  /// Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox.
+  public let layout: String
+
   enum CodingKeys: String, CodingKey {
-    case spacing
     case alignment
+    case layout
   }
 
   public init(from decoder: Decoder) throws {
     let container = try decoder.container(keyedBy: CodingKeys.self)
-    spacing = try container.decodeIfPresent(Double.self, forKey: .spacing) ?? 0
     alignment = try container.decodeIfPresent(String.self, forKey: .alignment) ?? "center"
+    layout = try container.decodeIfPresent(String.self, forKey: .layout) ?? "stack"
   }
 }
diff --git a/ios/ui/Generated/Parameters/VStackParameters.swift b/ios/ui/Generated/Parameters/VStackParameters.swift
index bc82bd1..bec25e2 100644
--- a/ios/ui/Generated/Parameters/VStackParameters.swift
+++ b/ios/ui/Generated/Parameters/VStackParameters.swift
@@ -10,20 +10,20 @@ import Foundation
 /// Parameters for VStack component
 /// Vertical stack container
 public struct VStackParameters: ComponentParameters {
-  /// Spacing between children
-  public let spacing: Double
-
   /// Horizontal alignment
   public let alignment: String
 
+  /// Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox.
+  public let layout: String
+
   enum CodingKeys: String, CodingKey {
-    case spacing
     case alignment
+    case layout
   }
 
   public init(from decoder: Decoder) throws {
     let container = try decoder.container(keyedBy: CodingKeys.self)
-    spacing = try container.decodeIfPresent(Double.self, forKey: .spacing) ?? 0
     alignment = try container.decodeIfPresent(String.self, forKey: .alignment) ?? "center"
+    layout = try container.decodeIfPresent(String.self, forKey: .layout) ?? "stack"
   }
 }
diff --git a/ios/ui/Generated/Parameters/ViewParameters.swift b/ios/ui/Generated/Parameters/ViewParameters.swift
new file mode 100644
index 0000000..3fd1a57
--- /dev/null
+++ b/ios/ui/Generated/Parameters/ViewParameters.swift
@@ -0,0 +1,12 @@
+//
+//  ViewParameters.swift
+
+//  AUTO-GENERATED from data/components.json
+//  DO NOT EDIT MANUALLY - Changes will be overwritten
+//  Schema version: 1.0.0
+
+import Foundation
+
+/// Parameters for View component
+/// Flex container with configurable direction. Always uses flexbox layout.
+public struct ViewParameters: ComponentParameters {}
diff --git a/ios/ui/Layout/FlexContainerHelper.swift b/ios/ui/Layout/FlexContainerHelper.swift
new file mode 100644
index 0000000..258ea2d
--- /dev/null
+++ b/ios/ui/Layout/FlexContainerHelper.swift
@@ -0,0 +1,114 @@
+import SwiftUI
+
+// MARK: - Shared Flex Container Rendering
+
+/// Shared values computed from a flex container's style
+struct FlexContainerValues {
+  let padding: EdgeInsets
+  let alignItems: FlexAlign
+  let justifyContent: FlexJustify
+  let gap: CGFloat
+  let layout: LayoutStyle
+  let decoration: DecorationStyle
+  let rendering: RenderingStyle
+}
+
+enum FlexContainerHelper {
+  /// Parse flex container values from an element's style dictionary.
+  /// `alignmentMapping` converts component-specific alignment strings (e.g. "leading", "top")
+  /// to FlexAlign values, used as fallback when alignItems isn't set in style.
+  static func parseValues(
+    from element: VoltraElement,
+    alignmentFallback: FlexAlign = .stretch
+  ) -> FlexContainerValues {
+    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
+    let (layout, decoration, rendering, _) = StyleConverter.convert(anyStyle)
+
+    let alignItemsFromStyle = (anyStyle["alignItems"] as? String).flatMap { FlexAlign(fromStyle: $0) }
+    let justifyContentFromStyle = (anyStyle["justifyContent"] as? String).flatMap { FlexJustify(fromStyle: $0) }
+
+    let finalAlignItems = alignItemsFromStyle ?? alignmentFallback
+    let justifyContent = justifyContentFromStyle ?? .flexStart
+    let gap = layout.gap ?? 0
+
+    return FlexContainerValues(
+      padding: layout.padding ?? EdgeInsets(),
+      alignItems: finalAlignItems,
+      justifyContent: justifyContent,
+      gap: gap,
+      layout: layout,
+      decoration: decoration,
+      rendering: rendering
+    )
+  }
+
+  /// Map a VStack alignment string to a FlexAlign fallback
+  static func verticalAlignmentFallback(_ alignment: String) -> FlexAlign {
+    switch alignment.lowercased() {
+    case "leading": return .flexStart
+    case "trailing": return .flexEnd
+    case "center": return .center
+    default: return .stretch
+    }
+  }
+
+  /// Map an HStack alignment string to a FlexAlign fallback
+  static func horizontalAlignmentFallback(_ alignment: String) -> FlexAlign {
+    switch alignment.lowercased() {
+    case "top": return .flexStart
+    case "bottom": return .flexEnd
+    case "center": return .center
+    default: return .stretch
+    }
+  }
+}
+
+// MARK: - Flex Container View Modifier
+
+/// Applies layout, decoration, rendering, margin, offset, positioning, and zIndex
+/// to a flex container — everything except padding (handled by the flex engine).
+/// Also sets FlexItemLayoutKey so this view can be a flex child of another container.
+struct FlexContainerStyleModifier: ViewModifier {
+  let values: FlexContainerValues
+
+  func body(content: Content) -> some View {
+    let layout = values.layout
+    let layoutWithoutPadding: LayoutStyle = {
+      var l = layout
+      l.padding = nil
+      return l
+    }()
+
+    content
+      .modifier(LayoutModifier(style: layoutWithoutPadding))
+      .modifier(DecorationModifier(style: values.decoration))
+      .modifier(RenderingModifier(style: values.rendering))
+      .voltraIfLet(layout.margin) { c, margin in
+        c.background(.clear).padding(margin)
+      }
+      .voltraIfLet(layout.relativeOffset) { c, offset in
+        c.offset(x: offset.x, y: offset.y)
+      }
+      .voltraIfLet(layout.absolutePosition) { c, position in
+        c.position(x: position.x, y: position.y)
+      }
+      .voltraIfLet(layout.zIndex) { c, z in
+        c.zIndex(z)
+      }
+      // Set FlexItemLayoutKey so this container can be a flex child of another container
+      .layoutValue(key: FlexItemLayoutKey.self, value: FlexItemValues(
+        flexGrow: layout.flexGrow,
+        flexShrink: layout.flexShrink,
+        flexBasis: layout.flexBasis,
+        width: layout.width,
+        height: layout.height,
+        minWidth: layout.minWidth,
+        maxWidth: layout.maxWidth,
+        minHeight: layout.minHeight,
+        maxHeight: layout.maxHeight,
+        alignSelf: layout.alignSelf,
+        margin: layout.margin,
+        aspectRatio: layout.aspectRatio
+      ))
+  }
+}
diff --git a/ios/ui/Layout/VoltraFlexStackLayout.swift b/ios/ui/Layout/VoltraFlexStackLayout.swift
new file mode 100644
index 0000000..107afd4
--- /dev/null
+++ b/ios/ui/Layout/VoltraFlexStackLayout.swift
@@ -0,0 +1,400 @@
+import SwiftUI
+
+// MARK: - Voltra Flex Stack Layout
+
+/// SwiftUI Layout implementing RN-like flexbox for a single axis
+struct VoltraFlexStackLayout: Layout {
+  let axis: Axis // .vertical or .horizontal
+  let spacing: CGFloat
+  let alignItems: FlexAlign // Default: .stretch
+  let justifyContent: FlexJustify // Default: .flexStart
+  let containerPadding: EdgeInsets // From container's style
+
+  // MARK: - sizeThatFits
+
+  func sizeThatFits(
+    proposal: ProposedViewSize,
+    subviews: Subviews,
+    cache _: inout ()
+  ) -> CGSize {
+    let available = availableSize(from: proposal)
+    let resolved = resolveChildren(subviews: subviews, available: available)
+    let totalMain = resolved.reduce(0) { $0 + $1.mainSize + $1.mainMargin }
+      + spacing * CGFloat(max(0, subviews.count - 1))
+    let maxCross = resolved.reduce(0) { max($0, $1.crossSize + $1.crossMargin) }
+
+    let mainSize = main(from: proposal) ?? (totalMain + mainPadding)
+    let crossSize = cross(from: proposal) ?? (maxCross + crossPadding)
+
+    return size(main: mainSize, cross: crossSize)
+  }
+
+  // MARK: - placeSubviews
+
+  func placeSubviews(
+    in bounds: CGRect,
+    proposal _: ProposedViewSize,
+    subviews: Subviews,
+    cache _: inout ()
+  ) {
+    let available = CGSize(
+      width: bounds.width - leadingPad - trailingPad,
+      height: bounds.height - topPad - bottomPad
+    )
+    let resolved = resolveChildren(subviews: subviews, available: available)
+
+    // Compute main-axis positions based on justifyContent
+    let totalChildrenAndMargins = resolved.reduce(CGFloat(0)) { $0 + $1.mainSize + $1.mainMargin }
+    let baseSpacing = spacing * CGFloat(max(0, subviews.count - 1))
+    let usesJustifySpacing = justifyContent == .spaceBetween || justifyContent == .spaceAround || justifyContent == .spaceEvenly
+    // For spacing-based justify modes, remaining space includes base spacing (justify replaces it)
+    let totalMain = totalChildrenAndMargins + (usesJustifySpacing ? 0 : baseSpacing)
+    let remainingMain = mainAxis(available) - totalMain
+    let (startOffset, gapSpacing) = justifyOffsets(
+      remaining: remainingMain, count: subviews.count
+    )
+    // For spacing-based justify, gapSpacing replaces base spacing; otherwise add extraSpacing (0) to base
+    let effectiveSpacing = usesJustifySpacing ? gapSpacing : (spacing + gapSpacing)
+
+    var mainCursor = mainStart(bounds) + startOffset
+
+    for (index, subview) in subviews.enumerated() {
+      let child = resolved[index]
+
+      // Main-axis: advance by leading margin
+      mainCursor += child.mainMarginLeading
+
+      // Cross-axis: align based on alignItems / alignSelf
+      let crossPos = crossPosition(
+        child: child,
+        availableCross: crossAxis(available),
+        boundsOrigin: crossStart(bounds)
+      )
+
+      let point = position(main: mainCursor, cross: crossPos)
+      let childProposal = ProposedViewSize(
+        width: axis == .horizontal ? child.mainSize : child.crossSize,
+        height: axis == .vertical ? child.mainSize : child.crossSize
+      )
+      subview.place(at: point, anchor: .topLeading, proposal: childProposal)
+
+      mainCursor += child.mainSize + child.mainMarginTrailing + effectiveSpacing
+    }
+  }
+
+  // MARK: - Child Resolution
+
+  private struct ResolvedChild {
+    let mainSize: CGFloat
+    let crossSize: CGFloat
+    let mainMarginLeading: CGFloat
+    let mainMarginTrailing: CGFloat
+    let crossMarginLeading: CGFloat
+    let crossMarginTrailing: CGFloat
+    var mainMargin: CGFloat { mainMarginLeading + mainMarginTrailing }
+    var crossMargin: CGFloat { crossMarginLeading + crossMarginTrailing }
+    let alignSelf: FlexAlign?
+  }
+
+  private func resolveChildren(
+    subviews: Subviews,
+    available: CGSize
+  ) -> [ResolvedChild] {
+    let availableMain = mainAxis(available)
+    let availableCross = crossAxis(available)
+
+    // Step 1: Compute base sizes
+    var items: [(index: Int, baseMain: CGFloat, flexGrow: CGFloat, flexShrink: CGFloat,
+                 minMain: CGFloat?, maxMain: CGFloat?, crossSize: CGFloat,
+                 margin: EdgeInsets?, alignSelf: FlexAlign?)] = []
+
+    for (i, subview) in subviews.enumerated() {
+      let values = subview[FlexItemLayoutKey.self]
+      let margin = values.margin ?? EdgeInsets()
+
+      // Determine main-axis basis
+      let mainBasis: CGFloat
+      if let basis = values.flexBasis {
+        switch basis {
+        case let .fixed(v): mainBasis = v
+        case .fill: mainBasis = availableMain.isFinite ? availableMain : measureIntrinsicMain(subview, availableCross: availableCross, values: values)
+        case .wrap: mainBasis = measureIntrinsicMain(subview, availableCross: availableCross, values: values)
+        }
+      } else {
+        // flexBasis: auto → use width/height if set, else intrinsic
+        mainBasis = resolveAutoMainBasis(subview, values: values, availableMain: availableMain, availableCross: availableCross)
+      }
+
+      // Determine cross-axis size
+      // Only stretch to a finite available cross; infinite means intrinsic measurement
+      let effectiveAlign = values.alignSelf ?? alignItems
+      let crossProposal: CGFloat? = (effectiveAlign == .stretch && availableCross.isFinite) ? availableCross : nil
+      let crossSize = resolveCrossSize(subview, values: values, proposal: crossProposal, availableCross: availableCross)
+
+      // Min/max on main axis
+      let (minMain, maxMain) = mainMinMax(values)
+
+      let clampedBase = clamp(mainBasis, min: minMain, max: maxMain)
+
+      items.append((i, clampedBase, values.flexGrow, values.flexShrink,
+                    minMain, maxMain, crossSize, values.margin, values.alignSelf))
+    }
+
+    // Step 2: Compute total base + margins + spacing
+    let totalMargins = items.reduce(CGFloat(0)) { total, item in
+      total + mainMarginSum(item.margin ?? EdgeInsets())
+    }
+    let totalSpacing = spacing * CGFloat(max(0, items.count - 1))
+    let totalBase = items.reduce(CGFloat(0)) { $0 + $1.baseMain }
+    let usedSpace = totalBase + totalMargins + totalSpacing
+    let freeSpace = availableMain - usedSpace
+
+    // Step 3: Distribute free space
+    var finalMainSizes = items.map(\.baseMain)
+
+    if freeSpace > 0 {
+      // Grow
+      let totalGrow = items.reduce(CGFloat(0)) { $0 + $1.flexGrow }
+      if totalGrow > 0 {
+        for (j, item) in items.enumerated() {
+          if item.flexGrow > 0 {
+            let share = freeSpace * (item.flexGrow / totalGrow)
+            finalMainSizes[j] = clamp(item.baseMain + share, min: item.minMain, max: item.maxMain)
+          }
+        }
+      }
+    } else if freeSpace < 0 {
+      // Shrink
+      let totalShrink = items.reduce(CGFloat(0)) { $0 + $1.flexShrink }
+      if totalShrink > 0 {
+        let deficit = -freeSpace
+        for (j, item) in items.enumerated() {
+          if item.flexShrink > 0 {
+            let share = deficit * (item.flexShrink / totalShrink)
+            finalMainSizes[j] = clamp(item.baseMain - share, min: item.minMain, max: item.maxMain)
+          }
+        }
+      }
+    }
+
+    // Step 4: Build resolved children
+    return items.enumerated().map { j, item in
+      let m = item.margin ?? EdgeInsets()
+      return ResolvedChild(
+        mainSize: max(0, finalMainSizes[j]),
+        crossSize: item.crossSize,
+        mainMarginLeading: mainLeadingMargin(m),
+        mainMarginTrailing: mainTrailingMargin(m),
+        crossMarginLeading: crossLeadingMargin(m),
+        crossMarginTrailing: crossTrailingMargin(m),
+        alignSelf: item.alignSelf
+      )
+    }
+  }
+
+  // MARK: - Measurement Helpers
+
+  /// Measure child's intrinsic main-axis size (flexBasis: auto, no explicit size)
+  private func measureIntrinsicMain(
+    _ subview: LayoutSubview,
+    availableCross: CGFloat,
+    values _: FlexItemValues
+  ) -> CGFloat {
+    let proposal: ProposedViewSize
+    if axis == .horizontal {
+      proposal = ProposedViewSize(width: nil, height: availableCross)
+    } else {
+      proposal = ProposedViewSize(width: availableCross, height: nil)
+    }
+    let size = subview.sizeThatFits(proposal)
+    return mainAxis(size)
+  }
+
+  /// Resolve auto basis: use explicit width/height if set, else intrinsic
+  private func resolveAutoMainBasis(
+    _ subview: LayoutSubview,
+    values: FlexItemValues,
+    availableMain: CGFloat,
+    availableCross: CGFloat
+  ) -> CGFloat {
+    let explicitMain = axis == .horizontal ? values.width : values.height
+    if let explicit = explicitMain {
+      switch explicit {
+      case let .fixed(v): return v
+      case .fill: return availableMain.isFinite ? availableMain : measureIntrinsicMain(subview, availableCross: availableCross, values: values)
+      case .wrap: break
+      }
+    }
+    return measureIntrinsicMain(subview, availableCross: availableCross, values: values)
+  }
+
+  /// Resolve cross-axis size
+  private func resolveCrossSize(
+    _ subview: LayoutSubview,
+    values: FlexItemValues,
+    proposal: CGFloat?,
+    availableCross: CGFloat
+  ) -> CGFloat {
+    let explicitCross = axis == .horizontal ? values.height : values.width
+    if let explicit = explicitCross {
+      switch explicit {
+      case let .fixed(v): return v
+      case .fill: return availableCross.isFinite ? availableCross : crossAxis(subview.sizeThatFits(ProposedViewSize(width: nil, height: nil)))
+      case .wrap: break
+      }
+    }
+    // If stretch and no explicit cross size, use full cross axis (only finite values)
+    if let proposal = proposal, proposal.isFinite { return proposal }
+    // Otherwise, measure intrinsic
+    let size = subview.sizeThatFits(ProposedViewSize(width: nil, height: nil))
+    return crossAxis(size)
+  }
+
+  private func mainMinMax(_ values: FlexItemValues) -> (CGFloat?, CGFloat?) {
+    if axis == .horizontal {
+      return (values.minWidth, values.maxWidth)
+    } else {
+      return (values.minHeight, values.maxHeight)
+    }
+  }
+
+  private func clamp(_ value: CGFloat, min: CGFloat?, max: CGFloat?) -> CGFloat {
+    var result = value
+    if let min = min { result = Swift.max(result, min) }
+    if let max = max { result = Swift.min(result, max) }
+    return result
+  }
+
+  // MARK: - Justify Content
+
+  private func justifyOffsets(remaining: CGFloat, count: Int) -> (start: CGFloat, extraSpacing: CGFloat) {
+    guard count > 0 else { return (0, 0) }
+    switch justifyContent {
+    case .flexStart: return (0, 0)
+    case .flexEnd: return (max(0, remaining), 0)
+    case .center: return (max(0, remaining / 2), 0)
+    case .spaceBetween:
+      guard count > 1 else { return (0, 0) }
+      return (0, max(0, remaining / CGFloat(count - 1)))
+    case .spaceAround:
+      let gap = remaining / CGFloat(count)
+      return (max(0, gap / 2), max(0, gap))
+    case .spaceEvenly:
+      let gap = remaining / CGFloat(count + 1)
+      return (max(0, gap), max(0, gap))
+    }
+  }
+
+  // MARK: - Cross-Axis Positioning
+
+  private func crossPosition(
+    child: ResolvedChild,
+    availableCross: CGFloat,
+    boundsOrigin: CGFloat
+  ) -> CGFloat {
+    let effectiveAlign = child.alignSelf ?? alignItems
+    let childCrossWithMargin = child.crossSize + child.crossMargin
+    let remaining = availableCross - childCrossWithMargin
+
+    let alignedPos: CGFloat
+    switch effectiveAlign {
+    case .flexStart:
+      alignedPos = 0
+    case .flexEnd:
+      alignedPos = max(0, remaining)
+    case .center:
+      alignedPos = max(0, remaining / 2)
+    case .stretch:
+      alignedPos = 0 // stretch already applied in size
+    }
+
+    return boundsOrigin + alignedPos + child.crossMarginLeading + crossPaddingLeading
+  }
+
+  // MARK: - Axis Helpers
+
+  private var mainPadding: CGFloat {
+    axis == .horizontal
+      ? containerPadding.leading + containerPadding.trailing
+      : containerPadding.top + containerPadding.bottom
+  }
+
+  private var crossPadding: CGFloat {
+    axis == .horizontal
+      ? containerPadding.top + containerPadding.bottom
+      : containerPadding.leading + containerPadding.trailing
+  }
+
+  private var leadingPad: CGFloat { containerPadding.leading }
+  private var trailingPad: CGFloat { containerPadding.trailing }
+  private var topPad: CGFloat { containerPadding.top }
+  private var bottomPad: CGFloat { containerPadding.bottom }
+
+  private var crossPaddingLeading: CGFloat {
+    axis == .horizontal ? containerPadding.top : containerPadding.leading
+  }
+
+  private func mainAxis(_ size: CGSize) -> CGFloat {
+    axis == .horizontal ? size.width : size.height
+  }
+
+  private func crossAxis(_ size: CGSize) -> CGFloat {
+    axis == .horizontal ? size.height : size.width
+  }
+
+  private func main(from proposal: ProposedViewSize) -> CGFloat? {
+    axis == .horizontal ? proposal.width : proposal.height
+  }
+
+  private func cross(from proposal: ProposedViewSize) -> CGFloat? {
+    axis == .horizontal ? proposal.height : proposal.width
+  }
+
+  private func size(main: CGFloat, cross: CGFloat) -> CGSize {
+    axis == .horizontal ? CGSize(width: main, height: cross) : CGSize(width: cross, height: main)
+  }
+
+  private func position(main: CGFloat, cross: CGFloat) -> CGPoint {
+    axis == .horizontal ? CGPoint(x: main, y: cross) : CGPoint(x: cross, y: main)
+  }
+
+  private func mainStart(_ bounds: CGRect) -> CGFloat {
+    axis == .horizontal ? bounds.minX + containerPadding.leading : bounds.minY + containerPadding.top
+  }
+
+  private func crossStart(_ bounds: CGRect) -> CGFloat {
+    axis == .horizontal ? bounds.minY : bounds.minX
+  }
+
+  private func availableSize(from proposal: ProposedViewSize) -> CGSize {
+    // nil proposal = intrinsic sizing → treat as unconstrained (.infinity)
+    CGSize(
+      width: max(0, (proposal.width ?? .infinity) - containerPadding.leading - containerPadding.trailing),
+      height: max(0, (proposal.height ?? .infinity) - containerPadding.top - containerPadding.bottom)
+    )
+  }
+
+  // MARK: - Margin Helpers
+
+  private func mainMarginSum(_ margin: EdgeInsets) -> CGFloat {
+    axis == .horizontal
+      ? margin.leading + margin.trailing
+      : margin.top + margin.bottom
+  }
+
+  private func mainLeadingMargin(_ margin: EdgeInsets) -> CGFloat {
+    axis == .horizontal ? margin.leading : margin.top
+  }
+
+  private func mainTrailingMargin(_ margin: EdgeInsets) -> CGFloat {
+    axis == .horizontal ? margin.trailing : margin.bottom
+  }
+
+  private func crossLeadingMargin(_ margin: EdgeInsets) -> CGFloat {
+    axis == .horizontal ? margin.top : margin.leading
+  }
+
+  private func crossTrailingMargin(_ margin: EdgeInsets) -> CGFloat {
+    axis == .horizontal ? margin.bottom : margin.trailing
+  }
+}
diff --git a/ios/ui/Style/CompositeStyle.swift b/ios/ui/Style/CompositeStyle.swift
index ffb1881..0d0e487 100644
--- a/ios/ui/Style/CompositeStyle.swift
+++ b/ios/ui/Style/CompositeStyle.swift
@@ -1,33 +1,67 @@
 import SwiftUI
 
 struct CompositeStyleModifier: ViewModifier {
+  @Environment(\.isInFlexContainer) var isInFlexContainer
+
   let layout: LayoutStyle
   let decoration: DecorationStyle
   let rendering: RenderingStyle
 
   func body(content: Content) -> some View {
-    content
-      // 1. Apply Layout (Inner Padding & Size)
-      .modifier(LayoutModifier(style: layout))
-      // 2. Apply Decoration (Background, Border, Shadow)
-      .modifier(DecorationModifier(style: decoration))
-      // 3. Apply Rendering (Opacity)
-      .modifier(RenderingModifier(style: rendering))
-      // 4. Apply Outer Margin (Must happen last!)
-      .voltraIfLet(layout.margin) { content, margin in
-        content.background(.clear).padding(margin)
-      }
+    Group {
+      if isInFlexContainer {
+        // FLEX CHILD PATH:
+        // 1. Skip LayoutModifier (no .frame() — parent layout controls sizing)
+        // 2. Apply padding (inner spacing is still the child's responsibility)
+        // 3. Apply decoration + rendering
+        // 4. Attach LayoutValueKey for parent flex layout to read
 
-      // Apply relative positioning (offset from natural position)
-      .voltraIfLet(layout.relativeOffset) { content, offset in
-        content.offset(x: offset.x, y: offset.y)
-      }
-      // Apply absolute positioning (center-based)
-      .voltraIfLet(layout.absolutePosition) { content, position in
-        content.position(x: position.x, y: position.y)
+        content
+          .voltraIfLet(layout.padding) { c, p in c.padding(p) }
+          .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+          .modifier(DecorationModifier(style: decoration))
+          .modifier(RenderingModifier(style: rendering))
+          .layoutValue(key: FlexItemLayoutKey.self, value: FlexItemValues(
+            flexGrow: layout.flexGrow,
+            flexShrink: layout.flexShrink,
+            flexBasis: layout.flexBasis,
+            width: layout.width,
+            height: layout.height,
+            minWidth: layout.minWidth,
+            maxWidth: layout.maxWidth,
+            minHeight: layout.minHeight,
+            maxHeight: layout.maxHeight,
+            alignSelf: layout.alignSelf,
+            margin: layout.margin,
+            aspectRatio: layout.aspectRatio
+          ))
+      } else {
+        // LEGACY PATH: unchanged
+        content
+          .modifier(LayoutModifier(style: layout))
+          .modifier(DecorationModifier(style: decoration))
+          .modifier(RenderingModifier(style: rendering))
       }
-      .voltraIfLet(layout.zIndex) { content, zIndex in
-        content.zIndex(zIndex)
+    }
+    // Margin (flex engine handles margin via LayoutValueKey;
+    // in legacy mode, applied as SwiftUI padding)
+    .voltraIf(!isInFlexContainer) { content in
+      content.voltraIfLet(layout.margin) { c, margin in
+        c.background(.clear).padding(margin)
       }
+    }
+    // Apply relative positioning (offset from natural position)
+    .voltraIfLet(layout.relativeOffset) { content, offset in
+      content.offset(x: offset.x, y: offset.y)
+    }
+    // Apply absolute positioning (center-based)
+    .voltraIfLet(layout.absolutePosition) { content, position in
+      content.position(x: position.x, y: position.y)
+    }
+    .voltraIfLet(layout.zIndex) { content, zIndex in
+      content.zIndex(zIndex)
+    }
+    // CRITICAL: Reset environment so nested children behave normally
+    .environment(\.isInFlexContainer, false)
   }
 }
diff --git a/ios/ui/Style/FlexEnvironment.swift b/ios/ui/Style/FlexEnvironment.swift
new file mode 100644
index 0000000..bf831e4
--- /dev/null
+++ b/ios/ui/Style/FlexEnvironment.swift
@@ -0,0 +1,35 @@
+import SwiftUI
+
+// MARK: - Environment Key
+
+private struct IsInFlexContainerKey: EnvironmentKey {
+  static let defaultValue = false
+}
+
+extension EnvironmentValues {
+  var isInFlexContainer: Bool {
+    get { self[IsInFlexContainerKey.self] }
+    set { self[IsInFlexContainerKey.self] = newValue }
+  }
+}
+
+// MARK: - Flex Item Values
+
+struct FlexItemValues: Equatable {
+  var flexGrow: CGFloat = 0
+  var flexShrink: CGFloat = 0
+  var flexBasis: SizeValue? // nil = auto
+  var width: SizeValue?
+  var height: SizeValue?
+  var minWidth: CGFloat?
+  var maxWidth: CGFloat?
+  var minHeight: CGFloat?
+  var maxHeight: CGFloat?
+  var alignSelf: FlexAlign?
+  var margin: EdgeInsets?
+  var aspectRatio: CGFloat?
+}
+
+struct FlexItemLayoutKey: LayoutValueKey {
+  static let defaultValue = FlexItemValues()
+}
diff --git a/ios/ui/Style/JSStyleParser.swift b/ios/ui/Style/JSStyleParser.swift
index 8185c40..6557599 100644
--- a/ios/ui/Style/JSStyleParser.swift
+++ b/ios/ui/Style/JSStyleParser.swift
@@ -9,6 +9,21 @@ enum JSStyleParser {
     return nil
   }
 
+  static func sizeValue(_ value: Any?) -> SizeValue? {
+    // Numeric → Fixed
+    if let n = number(value) { return .fixed(n) }
+    // String → Fill / Wrap / try numeric
+    guard let str = value as? String else { return nil }
+    switch str {
+    case "100%": return .fill
+    case "auto": return .wrap
+    default:
+      // Try parsing as numeric string
+      if let n = Double(str) { return .fixed(CGFloat(n)) }
+      return nil
+    }
+  }
+
   static func size(_ value: Any?) -> CGSize? {
     guard let dict = value as? [String: Any] else { return nil }
     let w = number(dict["width"]) ?? 0
diff --git a/ios/ui/Style/LayoutStyle.swift b/ios/ui/Style/LayoutStyle.swift
index 2236164..3978c37 100644
--- a/ios/ui/Style/LayoutStyle.swift
+++ b/ios/ui/Style/LayoutStyle.swift
@@ -1,21 +1,83 @@
 import SwiftUI
 
+// DO NOT PUT DEFAULT VALUES IN THE STRUCTURES.
+// ONLY USE OPTIONALS.
+
+// MARK: - Size Value
+
+enum SizeValue: Equatable {
+  case fixed(CGFloat) // Explicit numeric value (e.g., 100)
+  case fill // "100%" — expand to fill available space
+  case wrap // "auto" or missing — size to content
+}
+
+// MARK: - Flex Alignment
+
+enum FlexAlign: String {
+  case flexStart = "flex-start"
+  case center
+  case flexEnd = "flex-end"
+  case stretch
+
+  /// Accept both kebab-case ("flex-start") and camelCase ("flexStart")
+  init?(fromStyle value: String) {
+    if let v = FlexAlign(rawValue: value) {
+      self = v
+    } else {
+      switch value {
+      case "flexStart": self = .flexStart
+      case "flexEnd": self = .flexEnd
+      default: return nil
+      }
+    }
+  }
+}
+
+enum FlexJustify: String {
+  case flexStart = "flex-start"
+  case center
+  case flexEnd = "flex-end"
+  case spaceBetween = "space-between"
+  case spaceAround = "space-around"
+  case spaceEvenly = "space-evenly"
+
+  /// Accept both kebab-case ("space-between") and camelCase ("spaceBetween")
+  init?(fromStyle value: String) {
+    if let v = FlexJustify(rawValue: value) {
+      self = v
+    } else {
+      switch value {
+      case "flexStart": self = .flexStart
+      case "flexEnd": self = .flexEnd
+      case "spaceBetween": self = .spaceBetween
+      case "spaceAround": self = .spaceAround
+      case "spaceEvenly": self = .spaceEvenly
+      default: return nil
+      }
+    }
+  }
+}
+
+// MARK: - Layout Style
+
 struct LayoutStyle {
-  // 1. Size Constraints (flexBasis + constraints)
-  var width: CGFloat?
-  var height: CGFloat?
+  // 1. Size Constraints (now SizeValue for "auto"/"100%" support)
+  var width: SizeValue?
+  var height: SizeValue?
   var minWidth: CGFloat?
   var maxWidth: CGFloat?
   var minHeight: CGFloat?
   var maxHeight: CGFloat?
 
-  // 2. Flexibility
-  // flex: 1 means "grow to fill available space"
-  // flex: 0 means "size to content" (or fixed width)
-  var flex: CGFloat = 0
+  // 2. Flex properties (defaults applied in StyleConverter, not here)
+  var flex: CGFloat? // Shorthand (legacy compat)
+  var flexGrow: CGFloat // Default: 0 (applied in StyleConverter)
+  var flexShrink: CGFloat // Default: 0 (applied in StyleConverter)
+  var flexBasis: SizeValue? // nil = auto
+  var alignSelf: FlexAlign? // nil = auto (inherit from container)
+  var gap: CGFloat? // Spacing between flex children
 
-  // 3. Priority (flexGrow equivalent)
-  // Higher priority wins when space is tight
+  // 3. Priority (legacy only, derived from flex)
   var layoutPriority: Double?
 
   // 4. Aspect Ratio
@@ -31,9 +93,22 @@ struct LayoutStyle {
   var zIndex: Double?
 }
 
+// MARK: - Layout Modifier
+
 struct LayoutModifier: ViewModifier {
   let style: LayoutStyle
 
+  // Extract CGFloat from SizeValue for frame constraints
+  private var widthValue: CGFloat? {
+    guard case let .fixed(v) = style.width else { return nil }
+    return v
+  }
+
+  private var heightValue: CGFloat? {
+    guard case let .fixed(v) = style.height else { return nil }
+    return v
+  }
+
   func body(content: Content) -> some View {
     content
       // A. Aspect Ratio (Must be applied before frames to impact sizing)
@@ -45,19 +120,21 @@ struct LayoutModifier: ViewModifier {
       // We apply min/max/fixed constraints first to establish the "base" size.
       .frame(
         minWidth: style.minWidth,
-        idealWidth: style.width,
-        maxWidth: style.width ?? style.maxWidth, // If width is set, it becomes the max
+        idealWidth: widthValue,
+        maxWidth: widthValue ?? style.maxWidth,
         minHeight: style.minHeight,
-        idealHeight: style.height,
-        maxHeight: style.height ?? style.maxHeight
+        idealHeight: heightValue,
+        maxHeight: heightValue ?? style.maxHeight
       )
 
-      // C. Flex / Grow Logic
-      // If flex > 0, we override the max constraints to .infinity
-      // allowing the view to expand to fill the stack.
+      // C. Flex / Grow Logic (legacy: expand to infinity)
+      // If flex > 0 OR width/height is .fill, expand to .infinity
       .frame(
-        maxWidth: style.flex > 0 ? .infinity : nil,
-        maxHeight: style.flex > 0 ? .infinity : nil
+        maxWidth: shouldExpandWidth ? .infinity : nil,
+        maxHeight: shouldExpandHeight ? .infinity : nil,
+        // SwiftUI defaults frame alignment to center. When expanding to fill,
+        // we want RN-like flex-start behavior so content stays top/leading.
+        alignment: (style.flex ?? 0) > 0 ? .topLeading : .center
       )
 
       // D. Layout Priority (Flex Grow/Shrink arbitration)
@@ -71,4 +148,13 @@ struct LayoutModifier: ViewModifier {
         content.padding(padding)
       }
   }
+
+  // Expand if flex > 0 OR width/height is .fill
+  private var shouldExpandWidth: Bool {
+    (style.flex ?? 0) > 0 || style.width == .fill
+  }
+
+  private var shouldExpandHeight: Bool {
+    (style.flex ?? 0) > 0 || style.height == .fill
+  }
 }
diff --git a/ios/ui/Style/StyleConverter.swift b/ios/ui/Style/StyleConverter.swift
index b411686..93350ea 100644
--- a/ios/ui/Style/StyleConverter.swift
+++ b/ios/ui/Style/StyleConverter.swift
@@ -8,13 +8,39 @@ enum StyleConverter {
   private static func parseLayout(_ js: [String: Any]) -> LayoutStyle {
     // RN: "flex: 1" implies grow. "flexGrow" is specific.
     let flexVal = JSStyleParser.number(js["flex"]) ?? 0
-    let flexGrow = JSStyleParser.number(js["flexGrow"]) ?? 0
-    let finalFlex = max(flexVal, flexGrow)
+    let flexGrowVal = JSStyleParser.number(js["flexGrow"]) ?? 0
+    let flexShrinkVal = JSStyleParser.number(js["flexShrink"])
+    let flexBasisVal = JSStyleParser.sizeValue(js["flexBasis"])
 
-    // If it flexes, give it priority 1 so it beats fixed items.
-    // Only set layoutPriority when flex is active; nil means "don't apply modifier".
+    // Legacy flex: max of flex and flexGrow for backward compat
+    let finalFlex = max(flexVal, flexGrowVal)
     let priority: Double? = finalFlex > 0 ? 1.0 : nil
 
+    // RN flex shorthand: flex > 0 → grow=flex, shrink=1, basis=0
+    let resolvedFlexGrow: CGFloat
+    let resolvedFlexShrink: CGFloat
+    let resolvedFlexBasis: SizeValue?
+
+    if flexVal > 0 {
+      resolvedFlexGrow = flexGrowVal > 0 ? flexGrowVal : flexVal
+      resolvedFlexShrink = flexShrinkVal ?? 1
+      resolvedFlexBasis = flexBasisVal ?? .fixed(0)
+    } else {
+      resolvedFlexGrow = flexGrowVal
+      resolvedFlexShrink = flexShrinkVal ?? 0
+      resolvedFlexBasis = flexBasisVal // nil = auto
+    }
+
+    // Apply defaults here: 0 if not set (instead of in modifiers)
+    let finalFlexGrow: CGFloat = resolvedFlexGrow
+    let finalFlexShrink: CGFloat = resolvedFlexShrink
+
+    // alignSelf
+    let alignSelf: FlexAlign? = (js["alignSelf"] as? String).flatMap { FlexAlign(fromStyle: $0) }
+
+    // gap
+    let gap = JSStyleParser.number(js["gap"])
+
     // Position parsing with mode support
     let left = JSStyleParser.number(js["left"])
     let top = JSStyleParser.number(js["top"])
@@ -48,16 +74,21 @@ enum StyleConverter {
     let zIndex = JSStyleParser.number(js["zIndex"])
 
     return LayoutStyle(
-      // Dimensions
-      width: JSStyleParser.number(js["width"]),
-      height: JSStyleParser.number(js["height"]),
+      // Dimensions (now using SizeValue)
+      width: JSStyleParser.sizeValue(js["width"]),
+      height: JSStyleParser.sizeValue(js["height"]),
       minWidth: JSStyleParser.number(js["minWidth"]),
       maxWidth: JSStyleParser.number(js["maxWidth"]),
       minHeight: JSStyleParser.number(js["minHeight"]),
       maxHeight: JSStyleParser.number(js["maxHeight"]),
 
       // Flex Logic
-      flex: finalFlex,
+      flex: finalFlex > 0 ? finalFlex : nil,
+      flexGrow: finalFlexGrow,
+      flexShrink: finalFlexShrink,
+      flexBasis: resolvedFlexBasis,
+      alignSelf: alignSelf,
+      gap: gap,
       layoutPriority: priority,
       aspectRatio: JSStyleParser.number(js["aspectRatio"]),
 
diff --git a/ios/ui/Style/View+applyStyle.swift b/ios/ui/Style/View+applyStyle.swift
index 7dff36d..ba2f99a 100644
--- a/ios/ui/Style/View+applyStyle.swift
+++ b/ios/ui/Style/View+applyStyle.swift
@@ -1,5 +1,7 @@
 import SwiftUI
 
+// MARK: - View Extension
+
 extension View {
   func applyStyle(_ optionalStyle: [String: JSONValue]?) -> some View {
     voltraIfLet(optionalStyle) { _, rawStyle in
diff --git a/ios/ui/Views/VoltraFlexView.swift b/ios/ui/Views/VoltraFlexView.swift
new file mode 100644
index 0000000..57540d0
--- /dev/null
+++ b/ios/ui/Views/VoltraFlexView.swift
@@ -0,0 +1,33 @@
+import SwiftUI
+
+public struct VoltraFlexView: VoltraView {
+  public typealias Parameters = ViewParameters
+
+  public let element: VoltraElement
+
+  public init(_ element: VoltraElement) {
+    self.element = element
+  }
+
+  public var body: some View {
+    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
+
+    // flexDirection from style (default: column, matching RN's View behavior)
+    let directionStr = anyStyle["flexDirection"] as? String ?? "column"
+    let axis: Axis = directionStr == "row" ? .horizontal : .vertical
+
+    let values = FlexContainerHelper.parseValues(from: element)
+
+    VoltraFlexStackLayout(
+      axis: axis,
+      spacing: values.gap,
+      alignItems: values.alignItems,
+      justifyContent: values.justifyContent,
+      containerPadding: values.padding
+    ) {
+      (element.children ?? .empty)
+        .environment(\.isInFlexContainer, true)
+    }
+    .modifier(FlexContainerStyleModifier(values: values))
+  }
+}
diff --git a/ios/ui/Views/VoltraHStack.swift b/ios/ui/Views/VoltraHStack.swift
index e46659f..8f85ca1 100644
--- a/ios/ui/Views/VoltraHStack.swift
+++ b/ios/ui/Views/VoltraHStack.swift
@@ -10,9 +10,16 @@ public struct VoltraHStack: VoltraView {
   }
 
   public var body: some View {
-    let spacing = params.spacing
-    let alignmentStr = params.alignment.lowercased()
+    if params.layout == "flex" {
+      flexBody(params: params)
+    } else {
+      legacyBody(params: params)
+    }
+  }
 
+  @ViewBuilder
+  private func legacyBody(params: HStackParameters) -> some View {
+    let alignmentStr = params.alignment.lowercased()
     let alignment: VerticalAlignment = switch alignmentStr {
     case "top": .top
     case "bottom": .bottom
@@ -22,9 +29,32 @@ public struct VoltraHStack: VoltraView {
     default: .center
     }
 
-    HStack(alignment: alignment, spacing: spacing) {
+    // Extract gap from style for legacy mode too
+    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
+    let (layout, _, _, _) = StyleConverter.convert(anyStyle)
+    let gap = layout.gap ?? 0
+
+    HStack(alignment: alignment, spacing: gap) {
       element.children ?? .empty
     }
     .applyStyle(element.style)
   }
+
+  @ViewBuilder
+  private func flexBody(params: HStackParameters) -> some View {
+    let alignmentFallback = FlexContainerHelper.horizontalAlignmentFallback(params.alignment)
+    let values = FlexContainerHelper.parseValues(from: element, alignmentFallback: alignmentFallback)
+
+    VoltraFlexStackLayout(
+      axis: .horizontal,
+      spacing: values.gap,
+      alignItems: values.alignItems,
+      justifyContent: values.justifyContent,
+      containerPadding: values.padding
+    ) {
+      (element.children ?? .empty)
+        .environment(\.isInFlexContainer, true)
+    }
+    .modifier(FlexContainerStyleModifier(values: values))
+  }
 }
diff --git a/ios/ui/Views/VoltraVStack.swift b/ios/ui/Views/VoltraVStack.swift
index 5a87a8d..6cca679 100644
--- a/ios/ui/Views/VoltraVStack.swift
+++ b/ios/ui/Views/VoltraVStack.swift
@@ -9,19 +9,50 @@ public struct VoltraVStack: View {
 
   public var body: some View {
     let params = element.parameters(VStackParameters.self)
-    let spacing = params.spacing
-    let alignmentStr = params.alignment.lowercased()
 
+    if params.layout == "flex" {
+      flexBody(params: params)
+    } else {
+      legacyBody(params: params)
+    }
+  }
+
+  @ViewBuilder
+  private func legacyBody(params: VStackParameters) -> some View {
+    let alignmentStr = params.alignment.lowercased()
     let alignment: HorizontalAlignment = switch alignmentStr {
     case "leading": .leading
     case "trailing": .trailing
     case "center": .center
-    default: .leading
+    default: .center
     }
 
-    VStack(alignment: alignment, spacing: spacing) {
+    // Extract gap from style for legacy mode too
+    let anyStyle = element.style?.mapValues { $0.toAny() } ?? [:]
+    let (layout, _, _, _) = StyleConverter.convert(anyStyle)
+    let gap = layout.gap ?? 0
+
+    VStack(alignment: alignment, spacing: gap) {
       element.children ?? .empty
     }
     .applyStyle(element.style)
   }
+
+  @ViewBuilder
+  private func flexBody(params: VStackParameters) -> some View {
+    let alignmentFallback = FlexContainerHelper.verticalAlignmentFallback(params.alignment)
+    let values = FlexContainerHelper.parseValues(from: element, alignmentFallback: alignmentFallback)
+
+    VoltraFlexStackLayout(
+      axis: .vertical,
+      spacing: values.gap,
+      alignItems: values.alignItems,
+      justifyContent: values.justifyContent,
+      containerPadding: values.padding
+    ) {
+      (element.children ?? .empty)
+        .environment(\.isInFlexContainer, true)
+    }
+    .modifier(FlexContainerStyleModifier(values: values))
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 3161e4c..efed3d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3601,7 +3601,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -5478,6 +5478,20 @@
         }
       }
     },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
     "node_modules/anser": {
       "version": "1.4.10",
       "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.10.tgz",
@@ -6063,6 +6077,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/better-opn": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
@@ -6165,9 +6189,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.25.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.0.tgz",
-      "integrity": "sha512-PJ8gYKeS5e/whHBh8xrwYK+dAvEj7JXtz6uTucnMRB8OiGTsKccFekoRrjajPBHV8oOY+2tI4uxeceSimKwMFA==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
       "dev": true,
       "funding": [
         {
@@ -6185,10 +6209,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001718",
-        "electron-to-chromium": "^1.5.160",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -6369,9 +6394,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001720",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001720.tgz",
-      "integrity": "sha512-Ec/2yV2nNPwb4DnTANEV99ZWwm3ZWfdlfkQbWSDDt+PsXEVYwlhPH8tdMaPunYTKKmz7AnHi2oNEi1GcmKCD8g==",
+      "version": "1.0.30001769",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz",
+      "integrity": "sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==",
       "dev": true,
       "funding": [
         {
@@ -7310,9 +7335,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.161",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.161.tgz",
-      "integrity": "sha512-hwtetwfKNZo/UlwHIVBlKZVdy7o8bIZxxKs0Mv/ROPiQQQmDgdm5a+KvKtBsxM8ZjFzTaCeLoodZ8jiBE3o9rA==",
+      "version": "1.5.286",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
+      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
       "dev": true,
       "license": "ISC"
     },
@@ -7356,14 +7381,14 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
-      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "tapable": "^2.3.0"
       },
       "engines": {
         "node": ">=10.13.0"
@@ -7530,9 +7555,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
       "dev": true,
       "license": "MIT",
       "peer": true
@@ -8902,9 +8927,9 @@
       }
     },
     "node_modules/expo-module-scripts/node_modules/prettier": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz",
-      "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -10532,9 +10557,9 @@
       }
     },
     "node_modules/istanbul-reports": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
-      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
       "dev": true,
       "license": "BSD-3-Clause",
       "peer": true,
@@ -10755,7 +10780,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -11216,7 +11241,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
       "license": "ISC",
       "peer": true,
@@ -12000,14 +12025,18 @@
       "license": "MIT"
     },
     "node_modules/loader-runner": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
+      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
         "node": ">=6.11.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/locate-path": {
@@ -12928,9 +12957,9 @@
       "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "dev": true,
       "license": "MIT"
     },
@@ -14004,9 +14033,9 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -14047,23 +14076,23 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
-      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "scheduler": "^0.26.0"
+        "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.1.1"
+        "react": "^19.2.4"
       }
     },
     "node_modules/react-is": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.0.tgz",
-      "integrity": "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+      "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
       "license": "MIT"
     },
     "node_modules/react-native": {
@@ -14258,18 +14287,18 @@
       }
     },
     "node_modules/react-test-renderer": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-19.1.0.tgz",
-      "integrity": "sha512-jXkSl3CpvPYEF+p/eGDLB4sPoDX8pKkYvRl9+rR8HxLY0X04vW7hCm1/0zHoUSjPZ3bDa+wXWNTDVIw/R8aDVw==",
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-19.2.4.tgz",
+      "integrity": "sha512-Ttl5D7Rnmi6JGMUpri4UjB4BAN0FPs4yRDnu2XSsigCWOLm11o8GwRlVsh27ER+4WFqsGtrBuuv5zumUaRCmKw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "react-is": "^19.1.0",
-        "scheduler": "^0.26.0"
+        "react-is": "^19.2.4",
+        "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.1.0"
+        "react": "^19.2.4"
       }
     },
     "node_modules/readdirp": {
@@ -14818,17 +14847,17 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "dev": true,
       "license": "MIT",
       "peer": true
     },
     "node_modules/schema-utils": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
-      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -14846,20 +14875,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/schema-utils/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -15855,13 +15870,17 @@
       }
     },
     "node_modules/tapable": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
-      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tar": {
@@ -15955,9 +15974,9 @@
       }
     },
     "node_modules/terser-webpack-plugin": {
-      "version": "5.3.14",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz",
-      "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
+      "version": "5.3.16",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
+      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -16692,9 +16711,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
       "dev": true,
       "funding": [
         {
@@ -16904,9 +16923,9 @@
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -16939,9 +16958,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.101.3",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.3.tgz",
-      "integrity": "sha512-7b0dTKR3Ed//AD/6kkx/o7duS8H3f1a4w3BYpIriX4BzIhjkn4teo05cptsxvLesHFKK5KObnadmCHBwGc+51A==",
+      "version": "5.105.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.0.tgz",
+      "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -16954,22 +16973,22 @@
         "@webassemblyjs/wasm-parser": "^1.14.1",
         "acorn": "^8.15.0",
         "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.24.0",
+        "browserslist": "^4.28.1",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.3",
-        "es-module-lexer": "^1.2.1",
+        "enhanced-resolve": "^5.19.0",
+        "es-module-lexer": "^2.0.0",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.2.11",
         "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.2.0",
+        "loader-runner": "^4.3.1",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.2",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.3.11",
-        "watchpack": "^2.4.1",
+        "schema-utils": "^4.3.3",
+        "tapable": "^2.3.0",
+        "terser-webpack-plugin": "^5.3.16",
+        "watchpack": "^2.5.1",
         "webpack-sources": "^3.3.3"
       },
       "bin": {
diff --git a/plugin/src/features/android/files/initialStates.ts b/plugin/src/features/android/files/initialStates.ts
index 4d329b2..9b9f68a 100644
--- a/plugin/src/features/android/files/initialStates.ts
+++ b/plugin/src/features/android/files/initialStates.ts
@@ -24,7 +24,6 @@ export async function generateInitialStates(options: GenerateInitialStatesOption
   // voltra/android/server is an ESM module, but the plugin is compiled to CommonJS
   const { renderAndroidWidgetToString } = await import('voltra/android/server')
 
-
   // Prerender widget states
   const prerenderedStates = await prerenderWidgetState(widgets, projectRoot, renderAndroidWidgetToString)
 
diff --git a/src/jsx/View.tsx b/src/jsx/View.tsx
new file mode 100644
index 0000000..a796471
--- /dev/null
+++ b/src/jsx/View.tsx
@@ -0,0 +1,5 @@
+import { createVoltraComponent } from './createVoltraComponent.js'
+import type { ViewProps } from './props/View.js'
+
+export type { ViewProps }
+export const View = createVoltraComponent<ViewProps>('View')
diff --git a/src/jsx/primitives.ts b/src/jsx/primitives.ts
index dd0fae9..d8eed6e 100644
--- a/src/jsx/primitives.ts
+++ b/src/jsx/primitives.ts
@@ -16,5 +16,6 @@ export * from './Symbol.js'
 export * from './Text.js'
 export * from './Timer.js'
 export * from './Toggle.js'
+export * from './View.js'
 export * from './VStack.js'
 export * from './ZStack.js'
diff --git a/src/jsx/props/Box.ts b/src/jsx/props/Box.ts
new file mode 100644
index 0000000..ab3b5ec
--- /dev/null
+++ b/src/jsx/props/Box.ts
@@ -0,0 +1,10 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type BoxProps = VoltraBaseProps & {
+  /** Spacing between children */
+  spacing?: number
+}
diff --git a/src/jsx/props/HStack.ts b/src/jsx/props/HStack.ts
index 56fe786..6fcd19a 100644
--- a/src/jsx/props/HStack.ts
+++ b/src/jsx/props/HStack.ts
@@ -5,8 +5,8 @@
 import type { VoltraBaseProps } from '../baseProps'
 
 export type HStackProps = VoltraBaseProps & {
-  /** Spacing between children */
-  spacing?: number
   /** Vertical alignment */
   alignment?: 'top' | 'center' | 'bottom'
+  /** Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox. */
+  layout?: 'stack' | 'flex'
 }
diff --git a/src/jsx/props/VStack.ts b/src/jsx/props/VStack.ts
index ef00b11..ccb55fd 100644
--- a/src/jsx/props/VStack.ts
+++ b/src/jsx/props/VStack.ts
@@ -5,8 +5,8 @@
 import type { VoltraBaseProps } from '../baseProps'
 
 export type VStackProps = VoltraBaseProps & {
-  /** Spacing between children */
-  spacing?: number
   /** Horizontal alignment */
   alignment?: 'leading' | 'center' | 'trailing'
+  /** Layout mode. 'stack' uses native SwiftUI stacks. 'flex' uses RN-like flexbox. */
+  layout?: 'stack' | 'flex'
 }
diff --git a/src/jsx/props/View.ts b/src/jsx/props/View.ts
new file mode 100644
index 0000000..a775247
--- /dev/null
+++ b/src/jsx/props/View.ts
@@ -0,0 +1,7 @@
+// 🤖 AUTO-GENERATED from data/components.json
+// DO NOT EDIT MANUALLY - Changes will be overwritten
+// Schema version: 1.0.0
+
+import type { VoltraBaseProps } from '../baseProps'
+
+export type ViewProps = VoltraBaseProps
diff --git a/src/payload/component-ids.ts b/src/payload/component-ids.ts
index 9556609..38fab26 100644
--- a/src/payload/component-ids.ts
+++ b/src/payload/component-ids.ts
@@ -21,13 +21,14 @@ export const COMPONENT_NAME_TO_ID: Record<string, number> = {
   LinearGradient: 10,
   VStack: 11,
   HStack: 12,
-  ZStack: 13,
-  GroupBox: 14,
-  GlassContainer: 15,
-  Spacer: 16,
-  Divider: 17,
-  Mask: 18,
-  Link: 19,
+  View: 13,
+  ZStack: 14,
+  GroupBox: 15,
+  GlassContainer: 16,
+  Spacer: 17,
+  Divider: 18,
+  Mask: 19,
+  Link: 20,
 }
 
 /**
@@ -47,13 +48,14 @@ export const COMPONENT_ID_TO_NAME: Record<number, string> = {
   10: 'LinearGradient',
   11: 'VStack',
   12: 'HStack',
-  13: 'ZStack',
-  14: 'GroupBox',
-  15: 'GlassContainer',
-  16: 'Spacer',
-  17: 'Divider',
-  18: 'Mask',
-  19: 'Link',
+  13: 'View',
+  14: 'ZStack',
+  15: 'GroupBox',
+  16: 'GlassContainer',
+  17: 'Spacer',
+  18: 'Divider',
+  19: 'Mask',
+  20: 'Link',
 }
 
 /**
diff --git a/src/payload/short-names.ts b/src/payload/short-names.ts
index c47494f..25b86ac 100644
--- a/src/payload/short-names.ts
+++ b/src/payload/short-names.ts
@@ -9,7 +9,9 @@
  */
 export const NAME_TO_SHORT: Record<string, string> = {
   absolutePosition: 'ap',
+  alignItems: 'ai',
   alignment: 'al',
+  alignSelf: 'as',
   aspectRatio: 'ar',
   assetName: 'an',
   background: 'bkg',
@@ -46,8 +48,11 @@ export const NAME_TO_SHORT: Record<string, string> = {
   fixedSizeHorizontal: 'fsh',
   fixedSizeVertical: 'fsv',
   flex: 'fl',
+  flexBasis: 'fb',
+  flexDirection: 'fdir',
   flexGrow: 'fg',
   flexGrowWidth: 'fgw',
+  flexShrink: 'fk',
   font: 'fnt',
   fontFamily: 'ff',
   fontSize: 'fs',
@@ -55,6 +60,7 @@ export const NAME_TO_SHORT: Record<string, string> = {
   fontWeight: 'fw',
   foregroundStyle: 'fgs',
   frame: 'f',
+  gap: 'g',
   gaugeStyle: 'gs',
   glassEffect: 'ge',
   height: 'h',
@@ -63,8 +69,10 @@ export const NAME_TO_SHORT: Record<string, string> = {
   icon: 'ic',
   id: 'id',
   italic: 'it',
+  justifyContent: 'jc',
   kerning: 'kern',
   label: 'lbl',
+  layout: 'ly',
   layoutPriority: 'lp',
   left: 'l',
   letterSpacing: 'ls',
@@ -155,7 +163,9 @@ export const NAME_TO_SHORT: Record<string, string> = {
  */
 export const SHORT_TO_NAME: Record<string, string> = {
   ap: 'absolutePosition',
+  ai: 'alignItems',
   al: 'alignment',
+  as: 'alignSelf',
   ar: 'aspectRatio',
   an: 'assetName',
   bkg: 'background',
@@ -192,8 +202,11 @@ export const SHORT_TO_NAME: Record<string, string> = {
   fsh: 'fixedSizeHorizontal',
   fsv: 'fixedSizeVertical',
   fl: 'flex',
+  fb: 'flexBasis',
+  fdir: 'flexDirection',
   fg: 'flexGrow',
   fgw: 'flexGrowWidth',
+  fk: 'flexShrink',
   fnt: 'font',
   ff: 'fontFamily',
   fs: 'fontSize',
@@ -201,6 +214,7 @@ export const SHORT_TO_NAME: Record<string, string> = {
   fw: 'fontWeight',
   fgs: 'foregroundStyle',
   f: 'frame',
+  g: 'gap',
   gs: 'gaugeStyle',
   ge: 'glassEffect',
   h: 'height',
@@ -209,8 +223,10 @@ export const SHORT_TO_NAME: Record<string, string> = {
   ic: 'icon',
   id: 'id',
   it: 'italic',
+  jc: 'justifyContent',
   kern: 'kerning',
   lbl: 'label',
+  ly: 'layout',
   lp: 'layoutPriority',
   l: 'left',
   ls: 'letterSpacing',
diff --git a/src/styles/types.ts b/src/styles/types.ts
index f93e78a..deb088e 100644
--- a/src/styles/types.ts
+++ b/src/styles/types.ts
@@ -4,6 +4,13 @@ export type VoltraViewStyle = Pick<
   RNViewStyle,
   | 'flex'
   | 'flexGrow'
+  | 'flexShrink'
+  | 'flexBasis'
+  | 'alignItems'
+  | 'alignSelf'
+  | 'justifyContent'
+  | 'flexDirection'
+  | 'gap'
   | 'minWidth'
   | 'maxWidth'
   | 'width'
diff --git a/website/docs/ios/components/layout.md b/website/docs/ios/components/layout.md
index 624631e..aff2976 100644
--- a/website/docs/ios/components/layout.md
+++ b/website/docs/ios/components/layout.md
@@ -17,6 +17,10 @@ Each stack type has different alignment options based on its layout direction.
 
 A vertical stack container that arranges its children in a column.
 
+:::tip Flexbox Option
+VStack can optionally use a flexbox layout engine by setting `layout="flex"`. This enables React Native-style flexbox properties like `justifyContent` and `alignItems` via the `style` prop. See [Flexbox Layout](../development/flexbox-layout) for details.
+:::
+
 **Parameters:**
 
 - `spacing` (number, optional): Spacing between children in points
@@ -24,6 +28,7 @@ A vertical stack container that arranges its children in a column.
   - `"leading"` - Align to left edge
   - `"center"` (default) - Align to center
   - `"trailing"` - Align to right edge
+- `layout` (string, optional): Layout mode - `"stack"` (default) or `"flex"`. When set to `"flex"`, enables flexbox properties via style prop.
 
 **Apple Documentation:** [VStack](https://developer.apple.com/documentation/swiftui/vstack)
 
@@ -33,6 +38,10 @@ A vertical stack container that arranges its children in a column.
 
 A horizontal stack container that arranges its children in a row.
 
+:::tip Flexbox Option
+HStack can optionally use a flexbox layout engine by setting `layout="flex"`. This enables React Native-style flexbox properties like `justifyContent` and `alignItems` via the `style` prop. See [Flexbox Layout](../development/flexbox-layout) for details.
+:::
+
 **Parameters:**
 
 - `spacing` (number, optional): Spacing between children in points
@@ -42,6 +51,7 @@ A horizontal stack container that arranges its children in a row.
   - `"bottom"` - Align to bottom edge
   - `"firstTextBaseline"` - Align to first text baseline
   - `"lastTextBaseline"` - Align to last text baseline
+- `layout` (string, optional): Layout mode - `"stack"` (default) or `"flex"`. When set to `"flex"`, enables flexbox properties via style prop.
 
 **Apple Documentation:** [HStack](https://developer.apple.com/documentation/swiftui/hstack)
 
@@ -104,6 +114,75 @@ Use `offsetX` and `offsetY` style properties to fine-tune individual element pos
 
 ---
 
+### View
+
+A flexible container component that **always uses flexbox layout**. Unlike VStack and HStack which use native SwiftUI stacks by default, View is specifically designed for React Native-style flexbox layouts.
+
+:::tip Flexbox-First Component
+The View component is purpose-built for flexbox layouts and always uses the flexbox layout engine. You don't need to add `layout="flex"` – it's flexbox by default. See the [Flexbox Layout](../development/flexbox-layout) guide for comprehensive documentation.
+:::
+
+**Style Properties:**
+
+View responds to flexbox style properties set via the `style` prop:
+
+- `flexDirection`: `'row'` | `'column'` (default: `'column'`)
+- `alignItems`: `'flex-start'` | `'center'` | `'flex-end'` | `'stretch'`
+- `justifyContent`: `'flex-start'` | `'center'` | `'flex-end'` | `'space-between'` | `'space-around'` | `'space-evenly'`
+- `gap`: Spacing between children in points
+
+**Example:**
+
+```tsx
+// Horizontal layout with space between
+<Voltra.View
+  style={{
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 12,
+    padding: 16,
+    backgroundColor: '#101828',
+    borderRadius: 12
+  }}
+>
+  <Voltra.Text style={{ color: '#FFFFFF' }}>Left</Voltra.Text>
+  <Voltra.Text style={{ color: '#FFFFFF' }}>Center</Voltra.Text>
+  <Voltra.Text style={{ color: '#FFFFFF' }}>Right</Voltra.Text>
+</Voltra.View>
+
+// Vertical layout with centered items
+<Voltra.View
+  style={{
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 8,
+    padding: 16
+  }}
+>
+  <Voltra.Symbol name="checkmark.circle" tintColor="#10B981" />
+  <Voltra.Text style={{ color: '#10B981' }}>Success</Voltra.Text>
+</Voltra.View>
+```
+
+**When to use View:**
+
+- You need React Native-style flexbox behavior
+- You want dynamic `flexDirection` (switching between row/column)
+- You need `justifyContent` spacing modes
+
+**When to use VStack/HStack:**
+
+- Simple vertical or horizontal layouts
+- You want SwiftUI's native stack performance
+- You need SwiftUI-specific alignment (like firstTextBaseline)
+
+**Availability:** iOS 16.0+
+
+**Learn More:** [Flexbox Layout Guide](../development/flexbox-layout)
+
+---
+
 ### Spacer
 
 A flexible space component that expands to fill available space in its container.
diff --git a/website/docs/ios/development/_meta.json b/website/docs/ios/development/_meta.json
index 2816115..12106b7 100644
--- a/website/docs/ios/development/_meta.json
+++ b/website/docs/ios/development/_meta.json
@@ -44,6 +44,11 @@
     "name": "styling",
     "label": "Styling"
   },
+  {
+    "type": "file",
+    "name": "flexbox-layout",
+    "label": "Flexbox Layout"
+  },
   {
     "type": "file",
     "name": "interactions",
diff --git a/website/docs/ios/development/flexbox-layout.md b/website/docs/ios/development/flexbox-layout.md
new file mode 100644
index 0000000..4e50d15
--- /dev/null
+++ b/website/docs/ios/development/flexbox-layout.md
@@ -0,0 +1,718 @@
+# Flexbox Layout
+
+:::warning Opt-In Feature
+Flexbox layout is **opt-in** and not enabled by default in Voltra. To use flexbox properties, you must explicitly enable flexbox mode using one of the three methods described below. Regular VStack and HStack components use native SwiftUI stacks and do not support flexbox properties.
+:::
+
+Voltra brings React Native-style flexbox capabilities to iOS, providing powerful layout control with familiar APIs. This guide covers everything you need to know about using flexbox in your Voltra applications.
+
+## Three Ways to Enable Flexbox
+
+### 1. Use the View Component (Always Flexbox)
+
+The `View` component is purpose-built for flexbox layouts and always uses the flexbox layout engine:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+  <Voltra.Text>Left</Voltra.Text>
+  <Voltra.Text>Right</Voltra.Text>
+</Voltra.View>
+```
+
+### 2. VStack with layout="flex"
+
+Add the `layout="flex"` prop to VStack to enable flexbox mode:
+
+```tsx
+<Voltra.VStack layout="flex" style={{ justifyContent: 'space-between' }}>
+  <Voltra.Text>Top</Voltra.Text>
+  <Voltra.Text>Bottom</Voltra.Text>
+</Voltra.VStack>
+```
+
+### 3. HStack with layout="flex"
+
+Add the `layout="flex"` prop to HStack to enable flexbox mode:
+
+```tsx
+<Voltra.HStack layout="flex" style={{ justifyContent: 'space-evenly' }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+  <Voltra.Text>Item 3</Voltra.Text>
+</Voltra.HStack>
+```
+
+**Availability:** iOS 16.0+ (requires SwiftUI Layout protocol)
+
+## Why Use Flexbox?
+
+### When to Use Flexbox
+
+Choose flexbox layout when you need:
+
+- **React Native familiarity**: You're coming from React Native and want the same flexbox mental model
+- **Advanced spacing**: `justifyContent` modes like `space-between`, `space-around`, or `space-evenly`
+- **Dynamic flex direction**: Switching between row and column layouts at runtime
+- **Flex grow/shrink**: Proportional sizing with `flexGrow`, `flexShrink`, and `flexBasis`
+- **Fine-grained control**: Precise alignment and distribution of child elements
+
+### When to Use Native Stacks
+
+Choose native VStack/HStack (without `layout="flex"`) when you need:
+
+- **Simple layouts**: Basic vertical or horizontal stacking
+- **Maximum performance**: Native SwiftUI stacks for straightforward use cases
+- **SwiftUI-specific features**: Properties like `firstTextBaseline` alignment
+
+## Flexbox Properties Reference
+
+### Container Properties
+
+Set these properties on the flexbox container (View, VStack with `layout="flex"`, or HStack with `layout="flex"`):
+
+#### flexDirection
+
+Controls the main axis direction:
+
+- `'column'` (default): Vertical layout, children stack top to bottom
+- `'row'`: Horizontal layout, children stack left to right
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row' }}>
+  <Voltra.Text>First</Voltra.Text>
+  <Voltra.Text>Second</Voltra.Text>
+</Voltra.View>
+```
+
+#### alignItems
+
+Controls cross-axis alignment (perpendicular to main axis):
+
+- `'flex-start'`: Align to the start of the cross axis
+- `'center'`: Center on the cross axis
+- `'flex-end'`: Align to the end of the cross axis
+- `'stretch'` (default): Stretch to fill the cross axis
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  <Voltra.Text>Vertically centered</Voltra.Text>
+</Voltra.View>
+```
+
+#### justifyContent
+
+Controls main-axis distribution (along the main axis):
+
+- `'flex-start'` (default): Pack items at the start
+- `'center'`: Center items
+- `'flex-end'`: Pack items at the end
+- `'space-between'`: First item at start, last at end, equal space between
+- `'space-around'`: Equal space around each item
+- `'space-evenly'`: Exactly equal space everywhere
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+  <Voltra.Text>Left</Voltra.Text>
+  <Voltra.Text>Right</Voltra.Text>
+</Voltra.View>
+```
+
+#### gap
+
+Spacing between children along the main axis (in points):
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', gap: 16 }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+  <Voltra.Text>Item 3</Voltra.Text>
+</Voltra.View>
+```
+
+:::note One-Axis Gap
+The `gap` property applies spacing along the main axis only (the direction of `flexDirection`). Unlike CSS Grid, there is no separate `columnGap` or `rowGap`. The gap is always applied between children in the flex direction.
+:::
+
+### Child Properties
+
+Set these properties on children inside a flexbox container:
+
+#### flex
+
+Shorthand for `flexGrow` and `flexShrink`:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row' }}>
+  <Voltra.View style={{ flex: 1, backgroundColor: '#3B82F6' }} />
+  <Voltra.View style={{ flex: 1, backgroundColor: '#10B981' }} />
+</Voltra.View>
+```
+
+#### flexGrow
+
+Controls how much an item should grow relative to siblings (default: 0):
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row' }}>
+  <Voltra.View style={{ flexGrow: 1, backgroundColor: '#3B82F6' }} />
+  <Voltra.View style={{ flexGrow: 2, backgroundColor: '#10B981' }} />
+</Voltra.View>
+```
+
+The second item grows twice as much as the first.
+
+#### flexShrink
+
+Controls how much an item should shrink relative to siblings (default: 0):
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row' }}>
+  <Voltra.View style={{ flexShrink: 1, width: 200 }} />
+  <Voltra.View style={{ flexShrink: 2, width: 200 }} />
+</Voltra.View>
+```
+
+#### flexBasis
+
+Sets the initial size before flex grow/shrink:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row' }}>
+  <Voltra.View style={{ flexBasis: 100, flexGrow: 1 }} />
+  <Voltra.View style={{ flexBasis: 200, flexGrow: 1 }} />
+</Voltra.View>
+```
+
+#### alignSelf
+
+Override the parent's `alignItems` for a specific child:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+  <Voltra.Text>Top aligned</Voltra.Text>
+  <Voltra.Text style={{ alignSelf: 'center' }}>Center aligned</Voltra.Text>
+</Voltra.View>
+```
+
+#### Sizing Properties
+
+Standard sizing properties work on flexbox children:
+
+- `width`, `height`: Fixed dimensions
+- `minWidth`, `maxWidth`: Minimum/maximum width constraints
+- `minHeight`, `maxHeight`: Minimum/maximum height constraints
+- `margin`: Outer spacing
+- `padding`: Inner spacing
+
+## Understanding Axes
+
+Flexbox operates on two axes:
+
+### Main Axis
+
+The main axis is determined by `flexDirection`:
+
+- `flexDirection: 'row'` → **horizontal** main axis (left to right)
+- `flexDirection: 'column'` → **vertical** main axis (top to bottom)
+
+Use `justifyContent` to control distribution along the main axis.
+
+### Cross Axis
+
+The cross axis is perpendicular to the main axis:
+
+- `flexDirection: 'row'` → **vertical** cross axis (top to bottom)
+- `flexDirection: 'column'` → **horizontal** cross axis (left to right)
+
+Use `alignItems` to control alignment along the cross axis.
+
+```tsx
+// Row: main = horizontal, cross = vertical
+<Voltra.View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+  <Voltra.Text>Centered horizontally (main) and vertically (cross)</Voltra.Text>
+</Voltra.View>
+
+// Column: main = vertical, cross = horizontal
+<Voltra.View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
+  <Voltra.Text>Centered vertically (main) and horizontally (cross)</Voltra.Text>
+</Voltra.View>
+```
+
+## JustifyContent Spacing Modes
+
+The `justifyContent` property offers powerful spacing modes:
+
+### space-between
+
+First item at the start, last item at the end, equal space between items:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 16 }}>
+  <Voltra.Text>Left</Voltra.Text>
+  <Voltra.Text>Middle</Voltra.Text>
+  <Voltra.Text>Right</Voltra.Text>
+</Voltra.View>
+```
+
+Result: `[Left]     [Middle]     [Right]`
+
+### space-around
+
+Equal space around each item (edges get half the space):
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 16 }}>
+  <Voltra.Text>One</Voltra.Text>
+  <Voltra.Text>Two</Voltra.Text>
+  <Voltra.Text>Three</Voltra.Text>
+</Voltra.View>
+```
+
+Result: `  [One]    [Two]    [Three]  `
+
+### space-evenly
+
+Exactly equal space everywhere (including edges):
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', justifyContent: 'space-evenly', padding: 16 }}>
+  <Voltra.Text>One</Voltra.Text>
+  <Voltra.Text>Two</Voltra.Text>
+  <Voltra.Text>Three</Voltra.Text>
+</Voltra.View>
+```
+
+Result: `   [One]   [Two]   [Three]   `
+
+## Flex Grow, Shrink, and Basis
+
+### Equal Distribution
+
+Give all items `flex: 1` to distribute space equally:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', height: 200 }}>
+  <Voltra.View style={{ flex: 1, backgroundColor: '#3B82F6' }} />
+  <Voltra.View style={{ flex: 1, backgroundColor: '#10B981' }} />
+  <Voltra.View style={{ flex: 1, backgroundColor: '#F59E0B' }} />
+</Voltra.View>
+```
+
+Each item takes exactly 1/3 of the available width.
+
+### Proportional Distribution
+
+Use different `flexGrow` values for proportional sizing:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', height: 200 }}>
+  <Voltra.View style={{ flexGrow: 1, backgroundColor: '#3B82F6' }} />
+  <Voltra.View style={{ flexGrow: 2, backgroundColor: '#10B981' }} />
+  <Voltra.View style={{ flexGrow: 1, backgroundColor: '#F59E0B' }} />
+</Voltra.View>
+```
+
+First item gets 1/4 of space, middle gets 2/4 (half), last gets 1/4.
+
+### Fixed and Flexible Items
+
+Combine fixed sizes with flexible items:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'column', height: 600 }}>
+  {/* Fixed header */}
+  <Voltra.View style={{ height: 60, backgroundColor: '#1F2937' }}>
+    <Voltra.Text style={{ color: '#FFFFFF', padding: 16 }}>Header</Voltra.Text>
+  </Voltra.View>
+
+  {/* Flexible content */}
+  <Voltra.View style={{ flexGrow: 1, backgroundColor: '#F3F4F6', padding: 16 }}>
+    <Voltra.Text>This content area grows to fill available space</Voltra.Text>
+  </Voltra.View>
+
+  {/* Fixed footer */}
+  <Voltra.View style={{ height: 80, backgroundColor: '#1F2937' }}>
+    <Voltra.Text style={{ color: '#FFFFFF', padding: 16 }}>Footer</Voltra.Text>
+  </Voltra.View>
+</Voltra.View>
+```
+
+## Complete Examples
+
+### Header with Left and Right Content
+
+```tsx
+<Voltra.View
+  style={{
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: '#1F2937'
+  }}
+>
+  <Voltra.Text style={{ color: '#FFFFFF', fontSize: 18, fontWeight: 'bold' }}>
+    My App
+  </Voltra.Text>
+  <Voltra.Button title="Settings" />
+</Voltra.View>
+```
+
+### Evenly Spaced Buttons
+
+```tsx
+<Voltra.View
+  style={{
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    padding: 24,
+    backgroundColor: '#FFFFFF'
+  }}
+>
+  <Voltra.Button title="Cancel" />
+  <Voltra.Button title="Save" />
+  <Voltra.Button title="Submit" />
+</Voltra.View>
+```
+
+### Flexible Middle Section
+
+```tsx
+<Voltra.View style={{ flexDirection: 'column', height: 800 }}>
+  {/* Header */}
+  <Voltra.View
+    style={{
+      height: 60,
+      backgroundColor: '#3B82F6',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}
+  >
+    <Voltra.Text style={{ color: '#FFFFFF', fontSize: 20 }}>Header</Voltra.Text>
+  </Voltra.View>
+
+  {/* Scrollable content area */}
+  <Voltra.ScrollView style={{ flexGrow: 1, backgroundColor: '#F9FAFB' }}>
+    <Voltra.View style={{ padding: 16 }}>
+      <Voltra.Text>Content goes here and can scroll</Voltra.Text>
+    </Voltra.View>
+  </Voltra.ScrollView>
+
+  {/* Footer */}
+  <Voltra.View
+    style={{
+      height: 80,
+      backgroundColor: '#1F2937',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}
+  >
+    <Voltra.Button title="Action" />
+  </Voltra.View>
+</Voltra.View>
+```
+
+### Dynamic Direction
+
+```tsx
+export function ResponsiveLayout() {
+  const [isLandscape, setIsLandscape] = React.useState(false);
+
+  return (
+    <Voltra.View
+      style={{
+        flexDirection: isLandscape ? 'row' : 'column',
+        justifyContent: 'space-between',
+        padding: 16
+      }}
+    >
+      <Voltra.View style={{ flex: 1, backgroundColor: '#3B82F6', margin: 8 }} />
+      <Voltra.View style={{ flex: 1, backgroundColor: '#10B981', margin: 8 }} />
+      <Voltra.View style={{ flex: 1, backgroundColor: '#F59E0B', margin: 8 }} />
+    </Voltra.View>
+  );
+}
+```
+
+### Card Layout with Mixed Alignment
+
+```tsx
+<Voltra.View
+  style={{
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 16,
+    shadowColor: '#000000',
+    shadowOpacity: 0.1,
+    shadowRadius: 8
+  }}
+>
+  {/* Header row */}
+  <Voltra.View
+    style={{
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 12
+    }}
+  >
+    <Voltra.Text style={{ fontSize: 18, fontWeight: 'bold' }}>Card Title</Voltra.Text>
+    <Voltra.Symbol name="ellipsis.circle" tintColor="#6B7280" />
+  </Voltra.View>
+
+  {/* Content */}
+  <Voltra.View style={{ marginBottom: 16 }}>
+    <Voltra.Text style={{ color: '#6B7280' }}>
+      This is the card content with some descriptive text.
+    </Voltra.Text>
+  </Voltra.View>
+
+  {/* Action buttons */}
+  <Voltra.View
+    style={{
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    }}
+  >
+    <Voltra.Button title="Cancel" />
+    <Voltra.View style={{ width: 8 }} />
+    <Voltra.Button title="Confirm" />
+  </Voltra.View>
+</Voltra.View>
+```
+
+## Differences from React Native
+
+While Voltra's flexbox is inspired by React Native, there are some key differences:
+
+### Flexbox is Opt-In
+
+Unlike React Native where all View components use flexbox by default, Voltra requires explicit opt-in:
+
+```tsx
+// React Native (flexbox by default)
+<View style={{ flexDirection: 'row' }}>
+  <Text>Works automatically</Text>
+</View>
+
+// Voltra (must opt in)
+<Voltra.View style={{ flexDirection: 'row' }}>
+  <Voltra.Text>Works with View component</Voltra.Text>
+</Voltra.View>
+
+// OR
+<Voltra.HStack layout="flex" style={{ justifyContent: 'space-between' }}>
+  <Voltra.Text>Works with layout="flex"</Voltra.Text>
+</Voltra.HStack>
+```
+
+### Gap is One-Axis Only
+
+Voltra supports the `gap` style property, but unlike CSS Grid, it only applies spacing along the main axis (the direction of `flexDirection`):
+
+```tsx
+// React Native
+<View style={{ gap: 12, rowGap: 16, columnGap: 8 }}>
+  <Text>Supports separate row/column gaps</Text>
+</View>
+
+// Voltra (one-axis gap only)
+<Voltra.View style={{ gap: 12, flexDirection: 'row' }}>
+  <Voltra.Text>Gap applies horizontally</Voltra.Text>
+</Voltra.View>
+```
+
+There is no `columnGap` or `rowGap` - only a single `gap` value that applies between children in the flex direction.
+
+### No Flex Wrap
+
+Voltra does not support `flexWrap`. All flex items are laid out in a single line along the main axis:
+
+```tsx
+// React Native
+<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+  <Text>Items</Text>
+  <Text>Can</Text>
+  <Text>Wrap</Text>
+</View>
+
+// Voltra (no wrap support)
+<Voltra.View style={{ flexDirection: 'row' }}>
+  {/* Items will overflow or shrink, never wrap to next line */}
+  <Voltra.Text>All items in one line</Voltra.Text>
+</Voltra.View>
+```
+
+### No Percentage Dimensions
+
+Voltra does not support percentage-based width or height:
+
+```tsx
+// React Native
+<View style={{ width: '50%' }}>
+  <Text>Half width</Text>
+</View>
+
+// Voltra (use flexGrow instead)
+<Voltra.View style={{ flexGrow: 1 }}>
+  <Voltra.Text>Flexible width</Voltra.Text>
+</Voltra.View>
+```
+
+### Properties Must Be in style Prop
+
+All flexbox properties must be passed via the `style` prop, not as direct component props:
+
+```tsx
+// Correct
+<Voltra.View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  <Voltra.Text>Centered</Voltra.Text>
+</Voltra.View>
+
+// Incorrect (won't work)
+<Voltra.View flexDirection="row" alignItems="center">
+  <Voltra.Text>Won't work</Voltra.Text>
+</Voltra.View>
+```
+
+### Default alignItems is stretch
+
+Like React Native, the default `alignItems` value is `'stretch'`:
+
+```tsx
+<Voltra.View style={{ flexDirection: 'row', height: 100 }}>
+  {/* This will stretch to full height */}
+  <Voltra.View style={{ width: 50, backgroundColor: '#3B82F6' }} />
+</Voltra.View>
+```
+
+### Default flexDirection for View is column
+
+Like React Native, View defaults to `flexDirection: 'column'`:
+
+```tsx
+<Voltra.View>
+  {/* These stack vertically by default */}
+  <Voltra.Text>First</Voltra.Text>
+  <Voltra.Text>Second</Voltra.Text>
+</Voltra.View>
+```
+
+## Troubleshooting
+
+### Flexbox properties not working
+
+**Problem:** Setting `flexDirection`, `justifyContent`, or `alignItems` has no effect.
+
+**Solution:** Ensure you've enabled flexbox mode:
+
+```tsx
+// ❌ Won't work - flexbox not enabled
+<Voltra.VStack style={{ justifyContent: 'space-between' }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+</Voltra.VStack>
+
+// ✅ Works - flexbox enabled
+<Voltra.VStack layout="flex" style={{ justifyContent: 'space-between' }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+</Voltra.VStack>
+
+// ✅ Also works - View always uses flexbox
+<Voltra.View style={{ justifyContent: 'space-between' }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+</Voltra.View>
+```
+
+### Items not growing or shrinking
+
+**Problem:** Items don't respond to available space.
+
+**Solution:** Check `flexGrow` and `flexShrink` values. Default is 0 for both:
+
+```tsx
+// ❌ Won't grow - flexGrow defaults to 0
+<Voltra.View style={{ flexDirection: 'row', width: 400 }}>
+  <Voltra.View style={{ width: 100, backgroundColor: '#3B82F6' }} />
+  <Voltra.View style={{ backgroundColor: '#10B981' }} /> {/* Won't fill space */}
+</Voltra.View>
+
+// ✅ Grows to fill space
+<Voltra.View style={{ flexDirection: 'row', width: 400 }}>
+  <Voltra.View style={{ width: 100, backgroundColor: '#3B82F6' }} />
+  <Voltra.View style={{ flexGrow: 1, backgroundColor: '#10B981' }} />
+</Voltra.View>
+```
+
+### Unexpected alignment
+
+**Problem:** Items are aligned differently than expected.
+
+**Solution:** Review main vs. cross axis. Remember that `flexDirection` determines which axis is which:
+
+```tsx
+// If you want vertical centering in a row:
+<Voltra.View style={{ flexDirection: 'row', alignItems: 'center' }}>
+  <Voltra.Text>Vertically centered</Voltra.Text>
+</Voltra.View>
+
+// If you want horizontal centering in a column:
+<Voltra.View style={{ flexDirection: 'column', alignItems: 'center' }}>
+  <Voltra.Text>Horizontally centered</Voltra.Text>
+</Voltra.View>
+```
+
+### Spacing issues
+
+**Problem:** Items aren't spaced as expected.
+
+**Solution:** Understand the difference between `gap` style property and `justifyContent` modes:
+
+```tsx
+// gap adds fixed space between items
+<Voltra.View style={{ flexDirection: 'row', gap: 16 }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+</Voltra.View>
+
+// justifyContent distributes items across available space
+<Voltra.View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+</Voltra.View>
+
+// You can combine both
+<Voltra.View style={{ flexDirection: 'row', gap: 8, justifyContent: 'space-evenly' }}>
+  <Voltra.Text>Item 1</Voltra.Text>
+  <Voltra.Text>Item 2</Voltra.Text>
+</Voltra.View>
+```
+
+### Items overflowing container
+
+**Problem:** Child items extend beyond the container bounds.
+
+**Solution:** Use `flexShrink` to allow items to shrink, or set explicit size constraints:
+
+```tsx
+// ❌ May overflow if content is too wide
+<Voltra.View style={{ flexDirection: 'row', width: 300 }}>
+  <Voltra.Text>This is a very long text that might overflow</Voltra.Text>
+</Voltra.View>
+
+// ✅ Allows shrinking
+<Voltra.View style={{ flexDirection: 'row', width: 300 }}>
+  <Voltra.Text style={{ flexShrink: 1 }}>
+    This is a very long text that will shrink if needed
+  </Voltra.Text>
+</Voltra.View>
+```
+
+## Next Steps
+
+- Explore the [View component documentation](../components/layout#view) for detailed API reference
+- Learn about [styling in Voltra](./styling) for more style property options
+- Check out the [example app](https://github.com/margelo/voltra/tree/main/example) for more flexbox examples
diff --git a/website/docs/ios/development/styling.md b/website/docs/ios/development/styling.md
index 215619c..188a4ea 100644
--- a/website/docs/ios/development/styling.md
+++ b/website/docs/ios/development/styling.md
@@ -59,12 +59,33 @@ The following React Native style properties are supported:
 
 - `overflow: 'hidden'` - Clips content to bounds (maps to `clipped` modifier)
 
+### Flexbox Properties (Opt-in)
+
+When using the `View` component or enabling flexbox mode on `VStack`/`HStack` with `layout="flex"`, additional flexbox properties become available via the `style` prop:
+
+**Container Properties:**
+- `flexDirection`: `'row'` | `'column'` - Main axis direction
+- `alignItems`: `'flex-start'` | `'center'` | `'flex-end'` | `'stretch'` - Cross-axis alignment
+- `justifyContent`: `'flex-start'` | `'center'` | `'flex-end'` | `'space-between'` | `'space-around'` | `'space-evenly'` - Main-axis distribution
+- `gap`: number - Spacing between children along the main axis (one-axis only, no columnGap/rowGap)
+
+**Child Properties:**
+- `flex`: number - Shorthand for flexGrow/flexShrink
+- `flexGrow`: number - Growth factor
+- `flexShrink`: number - Shrink factor
+- `flexBasis`: number | 'auto' - Base size
+- `alignSelf`: Override parent's alignItems
+
+:::note
+Flexbox properties only work when flexbox layout is enabled. See [Flexbox Layout](./flexbox-layout) for comprehensive documentation.
+:::
+
 ### Limitations
 
 Properties not listed above are ignored during rendering. This includes common React Native properties like:
 
-- Most flexbox layout properties (`flexDirection`, `justifyContent`, `alignItems`, etc.) - Note: `flex`, `flexGrow`, and `flexShrink` are supported
-- `gap` and spacing properties
+- Flexbox layout properties (`flexDirection`, `justifyContent`, `alignItems`, `gap`, etc.) are only available when using flexbox layout. Use the `View` component or set `layout="flex"` on VStack/HStack to enable these properties. See [Flexbox Layout](./flexbox-layout) for details. Properties `flex`, `flexGrow`, `flexShrink`, `flexBasis`, and `alignSelf` work on children inside flexbox containers.
+- `columnGap`, `rowGap`, and `flexWrap` properties - Voltra only supports a single `gap` value along the main axis, and does not support wrapping
 - Percentage-based widths and heights
 - `right` and `bottom` positioning properties - Only `left` and `top` are supported
 - Most text styling properties beyond `fontSize`, `fontWeight`, `fontFamily`, `color`, `letterSpacing`, and `fontVariant`