Skip to content
Voltraby Callstack

Flexbox Layout

Voltra supports React Native-style flexbox layout through the Voltra.View component.

Enabling Flexbox

Section titled “Enabling Flexbox”

Use Voltra.View to opt in to flexbox layout:

<Voltra.View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Voltra.Text>Left</Voltra.Text>
  <Voltra.Text>Right</Voltra.Text>
</Voltra.View>

Supported Properties

Section titled “Supported Properties”

Voltra supports the following flexbox style properties. For detailed explanations and examples of each property, see the React Native Flexbox documentation.

Container Properties

Section titled “Container Properties”
Property Supported Values
flexDirection 'column' (default), 'row'
justifyContent 'flex-start' (default), 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'
alignItems 'stretch' (default), 'flex-start', 'center', 'flex-end'
gap Number (points) — applies along main axis only

Child Properties

Section titled “Child Properties”
Property Description
flex Shorthand for flexGrow and flexShrink
flexGrow How much the item should grow (default: 0)
flexShrink How much the item should shrink (default: 0)
flexBasis Initial size before flex grow/shrink
alignSelf Override parent’s alignItems for this child
width, height Fixed dimensions
minWidth, maxWidth Width constraints
minHeight, maxHeight Height constraints
margin Outer spacing
padding Inner spacing

Unsupported Properties

Section titled “Unsupported Properties”

The following React Native flexbox properties are not supported in Voltra:

  • flexWrap — items are always laid out in a single line
  • rowGap, columnGap — only the unified gap property is supported, applied along the main axis
  • Percentage-based width or height (e.g. width: '50%') — use flexGrow instead

Differences from React Native

Section titled “Differences from React Native”

If you’re coming from React Native, the biggest difference is that flexbox is opt-in: in React Native every View uses flexbox by default, but in Voltra only Voltra.View does — other containers (VStack, HStack) use native SwiftUI layout instead. The rest of the differences are the unsupported/limited properties listed in the tables above (single-axis gap, no flexWrap, no percentage dimensions).

Next Steps

Section titled “Next Steps”
© 2026 Voltra by Callstack