Row
A horizontal layout container for universal @expo/ui components.
For the complete documentation index, see llms.txt. Use this file to discover all available pages.
A horizontal layout container that arranges its children from start to end. Delegates to Jetpack Compose's Row on Android, SwiftUI's HStack on iOS, and a flex View on web.
Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
Usage
Basic row
import { Host, Row, Text } from '@expo/ui'; export default function RowExample() { return ( <Host matchContents> <Row spacing={8}> <Text>One</Text> <Text>Two</Text> <Text>Three</Text> </Row> </Host> ); }
Alignment
Use alignment to position children along the cross (vertical) axis.
import { Host, Row, Text } from '@expo/ui'; export default function RowAlignmentExample() { return ( <Host style={{ flex: 1 }}> <Row spacing={8} alignment="center"> <Text>Centered</Text> <Text>Centered</Text> </Row> </Host> ); }
Pushing content apart with Spacer
Pair Row with a flexible Spacer to push its children to the opposite ends.
import { Host, Row, Text, Spacer } from '@expo/ui'; export default function RowSpacerExample() { return ( <Host style={{ flex: 1 }}> <Row> <Text>Leading</Text> <Spacer flexible /> <Text>Trailing</Text> </Row> </Host> ); }
API
import { Row } from '@expo/ui';
Component
A horizontal layout container that arranges its children from start to end.
Props for the Row component, a horizontal layout container.
string • Default: 'start'Cross-axis (vertical) alignment of children.
Acceptable values are: 'start' | 'center' | 'end'
booleanWhether the component is disabled. Disabled components do not respond to user interaction.
ModifierConfig[]Platform-specific modifier escape hatch. Pass an array of modifier configs
from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers.
() => voidCalled when the component is removed from screen.
numberHorizontal spacing between children, in density-independent pixels.
Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.