fix: text alignment and stack alignment (#74)

This pull request makes several improvements:
a) Adds missing support for textAlign in the flexbox layout
b) Aliases multilineTextAlignment to textAlign
c) Fixes VStack and HStack alignment, which was previously incorrect
because their content boxes were not filling the outer frame

Author: V3RON

example/screens/testing-grounds/flex-playground/FlexPlaygroundScreen.tsx

@@ -180,6 +180,40 @@ export default function FlexPlaygroundScreen() {
           </VoltraView>
         </Card>
 
+        {/* Text Align Test */}
+        <Card>
+          <Card.Title>Text Align in Flex</Card.Title>
+          <Text style={styles.previewSubtext}>Text alignment within stretched flex children</Text>
+
+          <VoltraView style={{ width: '100%', height: 200, backgroundColor: '#1E293B', padding: 8, marginTop: 12 }}>
+            <Voltra.View
+              style={{
+                backgroundColor: '#334155',
+                padding: 8,
+                width: '100%',
+                height: '100%',
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                gap: 8,
+              }}
+            >
+              <Voltra.View style={{ backgroundColor: '#1E293B', padding: 8, flex: 1 }}>
+                <Voltra.Text style={{ color: '#FFFFFF', fontSize: 14, textAlign: 'left' }}>textAlign: left</Voltra.Text>
+              </Voltra.View>
+              <Voltra.View style={{ backgroundColor: '#1E293B', padding: 8, flex: 1 }}>
+                <Voltra.Text style={{ color: '#FFFFFF', fontSize: 14, textAlign: 'center' }}>
+                  textAlign: center
+                </Voltra.Text>
+              </Voltra.View>
+              <Voltra.View style={{ backgroundColor: '#1E293B', padding: 8, flex: 1 }}>
+                <Voltra.Text style={{ color: '#FFFFFF', fontSize: 14, textAlign: 'right' }}>
+                  textAlign: right
+                </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" />

ios/ui/Style/CompositeStyle.swift

@@ -6,6 +6,7 @@ struct CompositeStyleModifier: ViewModifier {
   let layout: LayoutStyle
   let decoration: DecorationStyle
   let rendering: RenderingStyle
+  var contentAlignment: Alignment = .topLeading
 
   func body(content: Content) -> some View {
     Group {
@@ -18,7 +19,7 @@ struct CompositeStyleModifier: ViewModifier {
 
         content
           .voltraIfLet(layout.padding) { c, p in c.padding(p) }
-          .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+          .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: contentAlignment)
           .modifier(DecorationModifier(style: decoration))
           .modifier(RenderingModifier(style: rendering))
           .layoutValue(key: FlexItemLayoutKey.self, value: FlexItemValues(

ios/ui/Style/View+applyStyle.swift

@@ -1,5 +1,17 @@
 import SwiftUI
 
+// MARK: - TextAlignment Extension
+
+extension TextAlignment {
+  var horizontalAlignment: HorizontalAlignment {
+    switch self {
+    case .leading: return .leading
+    case .center: return .center
+    case .trailing: return .trailing
+    }
+  }
+}
+
 // MARK: - View Extension
 
 extension View {
@@ -13,10 +25,14 @@ extension View {
 
   func applyStyle(_ style: (LayoutStyle, DecorationStyle, RenderingStyle, TextStyle)) -> some View {
     let (layout, decoration, rendering, text) = style
+    let frameAlignment = Alignment(horizontal: text.alignment.horizontalAlignment, vertical: .top)
     return self
       // 1. Text Properties (Propagate font size for measurement)
       .modifier(TextStyleModifier(style: text))
       // 2. Standard Box Model
-      .modifier(CompositeStyleModifier(layout: layout, decoration: decoration, rendering: rendering))
+      .modifier(CompositeStyleModifier(
+        layout: layout, decoration: decoration, rendering: rendering,
+        contentAlignment: frameAlignment
+      ))
   }
 }

ios/ui/Views/VoltraHStack.swift

@@ -34,9 +34,14 @@ public struct VoltraHStack: VoltraView {
     let (layout, _, _, _) = StyleConverter.convert(anyStyle)
     let gap = layout.gap ?? 0
 
+    let hasFillHeight = layout.height == .fill
+
     HStack(alignment: alignment, spacing: gap) {
       element.children ?? .empty
     }
+    .voltraIf(hasFillHeight) { content in
+      content.frame(maxHeight: .infinity, alignment: Alignment(horizontal: .center, vertical: alignment))
+    }
     .applyStyle(element.style)
   }
 

ios/ui/Views/VoltraText.swift

@@ -50,14 +50,22 @@ public struct VoltraText: VoltraView {
       return baseFont
     }
 
+    let alignment: TextAlignment = {
+      // Parameter takes precedence over style
+      if let mta = params.multilineTextAlignment {
+        return JSStyleParser.textAlignment(mta)
+      }
+      return textStyle.alignment
+    }()
+
     Text(.init(textContent))
       .kerning(textStyle.letterSpacing)
       .underline(textStyle.decoration == .underline || textStyle.decoration == .underlineLineThrough)
       .strikethrough(textStyle.decoration == .lineThrough || textStyle.decoration == .underlineLineThrough)
       // These technically work on View, but good to keep close
       .font(font)
       .foregroundColor(textStyle.color)
-      .multilineTextAlignment(textStyle.alignment)
+      .multilineTextAlignment(alignment)
       .lineSpacing(textStyle.lineSpacing)
       .voltraIfLet(params.numberOfLines) { view, numberOfLines in
         view.lineLimit(Int(numberOfLines))

ios/ui/Views/VoltraVStack.swift

@@ -32,9 +32,14 @@ public struct VoltraVStack: View {
     let (layout, _, _, _) = StyleConverter.convert(anyStyle)
     let gap = layout.gap ?? 0
 
+    let hasFillWidth = layout.width == .fill
+
     VStack(alignment: alignment, spacing: gap) {
       element.children ?? .empty
     }
+    .voltraIf(hasFillWidth) { content in
+      content.frame(maxWidth: .infinity, alignment: Alignment(horizontal: alignment, vertical: .center))
+    }
     .applyStyle(element.style)
   }
 

src/styles/types.ts

@@ -62,6 +62,7 @@ export type VoltraTextStyle = VoltraViewStyle &
     | 'fontVariant'
     | 'textDecorationLine'
     | 'lineHeight'
+    | 'textAlign'
   >
 
 export type VoltraStyleProp = StyleProp<VoltraViewStyle>