Components
HStack
A SwiftUI HStack component for horizontal layouts. Also called Row (Universal).
Expo UI HStack matches the official SwiftUI HStack API and arranges its children horizontally.
Usage
Basic horizontal stack
import { Host, HStack, Text } from '@expo/ui/swift-ui';
export default function BasicHStackExample() {
return (
<Host style={{ flex: 1 }}>
<HStack spacing={12}>
<Text>First</Text>
<Text>Second</Text>
<Text>Third</Text>
</HStack>
</Host>
);
}With alignment
The alignment prop controls vertical alignment of children. Available options are: top, center, bottom, firstTextBaseline, and lastTextBaseline.
import { Host, HStack, Rectangle } from '@expo/ui/swift-ui';
import { frame } from '@expo/ui/swift-ui/modifiers';
export default function HStackAlignmentExample() {
return (
<Host style={{ flex: 1 }}>
<HStack spacing={12} alignment="top">
<Rectangle modifiers={[frame({ width: 50, height: 50 })]} />
<Rectangle
modifiers={[frame({ width: 50, height: 100 })]}
/>
<Rectangle modifiers={[frame({ width: 50, height: 75 })]} />
</HStack>
</Host>
);
}API
import { HStack } from '@expo/ui/swift-ui';Component
HStack
Type: React.Element<HStackProps>
HStackProps
alignment
Optional • Literal type: string
The vertical alignment of children within the stack.
Acceptable values are: 'center' | 'top' | 'bottom' | 'firstTextBaseline' | 'lastTextBaseline'
children
Type: ReactNode
spacing
Optional • Type: number
The spacing between children.
Inherited props
Modifiers
Use these modifiers in the modifiers prop of the SwiftUI and Universal version.
Modifiers for HStack
scrollTargetLayoutiOS 17+
Modifiers for any view
accessibilityAddTraitsaccessibilityElementaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityInputLabelsaccessibilityLabelaccessibilityRemoveTraitsaccessibilityValueactivityBackgroundTintalignmentGuideallowsTighteninganimationaspectRatiobackgroundbackgroundOverlayblurboldborderbrightnessclippedclipShapecolorInvertcontainerBackgroundcontainerRelativeFrameiOS 17+containerShapecontentShapecontentTransitioniOS 16+contrastcornerRadiuscreateModifierdisableddynamicTypeSizeenvironmentfixedSizefontforegroundColorforegroundStyleframegeometryGroupiOS 17+glassEffectglassEffectIdgrayscalegridCellAnchoriOS 16+gridCellColumnsgridCellUnsizedAxesgridColumnAlignmentiOS 16+hiddenhueRotationidignoreSafeAreaimageScaleinvalidatableContentiOS 17+italickerninglayoutPrioritylineHeightiOS 26+lineLimitlineSpacingluminanceToAlphamaskmatchedGeometryEffectminimumScaleFactormonospacedDigitmultilineTextAlignmentoffsetonAppearonDisappearonGeometryChangeonLongPressGestureonTapGestureopacityoverlaypaddingprivacySensitiveredactedrotation3DEffectrotationEffectsaturationscaleEffectshadowstrikethroughstrokeBordertextCasetinttruncationModeunderlineunredactedwidgetURLzIndex
Sources
The original Expo docs for this page:
- HStack (SwiftUI) (
source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/hstack.md) - HStack (Universal) (
source-of-truth/versions/v57.0.0/sdk/ui/universal/row.md)