This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
Row
A horizontal layout container for universal @expo/ui components.
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/ui- yarn expo install @expo/ui- pnpm expo install @expo/ui- bun 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 { useColorScheme } from 'react-native'; import { Host, Row, Text } from '@expo/ui'; export default function RowExample() { const colorScheme = useColorScheme(); const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }; return ( <Host matchContents> <Row spacing={8}> <Text textStyle={ink}>One</Text> <Text textStyle={ink}>Two</Text> <Text textStyle={ink}>Three</Text> </Row> </Host> ); }
Alignment
Use alignment to position children along the cross (vertical) axis.
import { useColorScheme } from 'react-native'; import { Host, Row, Text } from '@expo/ui'; export default function RowAlignmentExample() { const colorScheme = useColorScheme(); const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }; return ( <Host style={{ width: '100%', height: 160 }}> <Row spacing={8} alignment="center"> <Text textStyle={{ ...ink, fontSize: 30 }}>Large</Text> <Text textStyle={ink}>centered</Text> </Row> </Host> ); }
Pushing content apart with Spacer
Pair Row with a flexible Spacer to push its children to the opposite ends.
import { useColorScheme } from 'react-native'; import { Host, Row, Text, Spacer } from '@expo/ui'; export default function RowSpacerExample() { const colorScheme = useColorScheme(); const ink = { color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }; return ( <Host matchContents={{ vertical: true }} style={{ width: '100%' }}> <Row> <Text textStyle={ink}>Leading</Text> <Spacer flexible /> <Text textStyle={ink}>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.
A modifier supplied here replaces any modifier of the same type that the
component derives from style or other props.
() => voidCalled when the component appears on screen.
() => voidCalled when the component is removed from screen.
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.