feat(styles): add textAlign to VoltraTextStyle

[mrevanzak]

Summary

Add textAlign property to VoltraTextStyle type definition, aligning TypeScript types with existing native iOS support.

Changes

• Added textAlign to the Pick<RNTextStyle, ...> union in VoltraTextStyle

Problem

The native iOS side (JSStyleParser.swift) already supports textAlign for Timer and Text components, mapping values like "center", "right", "end" to SwiftUI's TextAlignment. However, the TypeScript type definition was missing this property, preventing autocomplete and type-checking.

Verification

• TypeScript compiles without errors
• Aligns with existing short-name mapping (textAlign ↔ ta) in data/components.json

[vercel]

@mrevanzak is attempting to deploy a commit to the Callstack Team on Vercel.

A member of the Team first needs to authorize it.

[V3RON]

This is a bit complicated because Text views in SwiftUI behave differently than elements in web or React Native. They don't expand by default. They simply occupy as much space as their content requires.

multilineTextAlignment only takes effect when there is more than one line of text. To achieve a true CSS text-align equivalent, you would have to modify the frame (e.g., .frame(maxWidth: .infinity, alignment: .trailing)), but that is risky and can break the layout. It is usually better to use layout containers like VStack or HStack to position the text correctly.

We definitely need to include this property in our styles, but perhaps we should rename it to multilineTextAlignment so it’s clear that it isn't a direct equivalent to textAlign?

[mrevanzak]

This is a bit complicated because Text views in SwiftUI behave differently than elements in web or React Native. They don't expand by default. They simply occupy as much space as their content requires.

multilineTextAlignment only takes effect when there is more than one line of text. To achieve a true CSS text-align equivalent, you would have to modify the frame (e.g., .frame(maxWidth: .infinity, alignment: .trailing)), but that is risky and can break the layout. It is usually better to use layout containers like VStack or HStack to position the text correctly.

We definitely need to include this property in our styles, but perhaps we should rename it to multilineTextAlignment so it’s clear that it isn't a direct equivalent to textAlign?

but it works in my case like textAlign should be :D in my case its only 1 line of text and i can make it right aligned with textAlign: right

[V3RON]

https://developer.apple.com/documentation/swiftui/view/multilinetextalignment(_:)

The modifier has no effect on a Text view that contains only one line of text, because a text view has a width that exactly matches the width of its widest line. If you want to align an entire text view rather than its contents, set the aligment of its container, like a VStack or a frame that you create with the frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) modifier.

However, it turns out that if you are developing a widget and you use this modifier for a Text initialized with a date or time, it will work.

You can use this modifier to control the alignment of a Text view that you create with the init(_:style:) initializer to display localized dates and times, including when the view uses only a single line, but only when that view appears in a widget.

What’s your use case where it works?

[mrevanzak]

https://developer.apple.com/documentation/swiftui/view/multilinetextalignment(_:)

The modifier has no effect on a Text view that contains only one line of text, because a text view has a width that exactly matches the width of its widest line. If you want to align an entire text view rather than its contents, set the aligment of its container, like a VStack or a frame that you create with the frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) modifier.

However, it turns out that if you are developing a widget and you use this modifier for a Text initialized with a date or time, it will work.

You can use this modifier to control the alignment of a Text view that you create with the init(_:style:) initializer to display localized dates and times, including when the view uses only a single line, but only when that view appears in a widget.

What’s your use case where it works?

oh i see. no wonder it's worked on me. i used it on <Voltra.Timer />

[Marcados]

<Voltra.Text
            style={{
              color: '#FFFFFF',
              fontSize: 18,
              fontWeight: '400',
              // @ts-expect-error - textAlign is not a valid prop for Voltra.Text
              textAlign: 'center',
            }}
>

does work fine, and no need for

multilineTextAlignment="center"

[mrevanzak]

<Voltra.Text
            style={{
              color: '#FFFFFF',
              fontSize: 18,
              fontWeight: '400',
              // @ts-expect-error - textAlign is not a valid prop for Voltra.Text
              textAlign: 'center',
            }}
>

does work fine, and no need for

multilineTextAlignment="center"

yes that's what i used right now before this one get merge @Marcados