Row

Lays children out horizontally. Extends Box with all spacing, alignment, and gap props.

Usage

Open on Snack ↗

import { Button, Row } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Row gap="sm" align="center">
            <Button variant="filled" onPress={() => {}}>Save</Button>
            <Button variant="outlined" onPress={() => {}}>Cancel</Button>
          </Row>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Wrapping

Enable wrap to let children flow onto the next line when they overflow:

Open on Snack ↗

import { Chip, Row } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

const tags = ['React', 'TypeScript', 'Expo', 'Material', 'Native', 'Components', 'Design']

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Row wrap gap="sm">
            {tags.map((tag) => (
              <Chip key={tag} onPress={() => {}}>{tag}</Chip>
            ))}
          </Row>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Inverted

Reverse the layout direction with inverted:

Open on Snack ↗

import { Row, Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Row inverted gap="sm">
            <Typography>First</Typography>
            <Typography>Second</Typography>
          </Row>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
wrap	boolean		No	Whether children should wrap to the next line when they overflow.
inverted	boolean		No	Reverses the layout direction (`row-reverse`).
p	SpacingValue	-	No	Padding on all sides
px	SpacingValue	-	No	Horizontal padding (paddingStart + paddingEnd)
py	SpacingValue	-	No	Vertical padding (paddingTop + paddingBottom)
pt	SpacingValue	-	No	Padding top
pb	SpacingValue	-	No	Padding bottom
ps	SpacingValue	-	No	Padding start (left in LTR, right in RTL)
pe	SpacingValue	-	No	Padding end (right in LTR, left in RTL)
m	SpacingValue	-	No	Margin on all sides
mx	SpacingValue	-	No	Horizontal margin (marginStart + marginEnd)
my	SpacingValue	-	No	Vertical margin (marginTop + marginBottom)
mt	SpacingValue	-	No	Margin top
mb	SpacingValue	-	No	Margin bottom
ms	SpacingValue	-	No	Margin start
me	SpacingValue	-	No	Margin end
gap	SpacingValue	-	No	Gap between children
rowGap	SpacingValue	-	No	Row gap between children
columnGap	SpacingValue	-	No	Column gap between children
flex	number	-	No	Flex value
align	enum	-	No	Align items along the cross axis
justify	enum	-	No	Justify content along the main axis
bg	string	-	No	Background color