Box

A theme-aware replacement for View with shorthand props for padding, margin, gap, alignment, and background color. Spacing values can be theme tokens (xs, sm, md, lg, xl) or raw numbers.

Usage

Open on Snack ↗

import { Box, Typography } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Box p="md" bg="#f5f5f5">
            <Typography variant="bodyMedium">Padded content</Typography>
          </Box>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Spacing Tokens

Token	Value
xs	4
sm	8
md	16
lg	24
xl	32

You can also pass a raw number:

Open on Snack ↗

import { Box, Typography } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center' }}>
          <Box p={20} mx={12} bg="#e0e0e0">
            <Typography>20dp padding, 12dp horizontal margin</Typography>
          </Box>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Padding & Margin

Open on Snack ↗

import { Box, Typography } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, padding: 16, gap: 12 }}>
          <Box p="md" m="sm" bg="#fce4ec">
            <Typography>p="md" m="sm"</Typography>
          </Box>
          <Box px="lg" py="sm" bg="#e8f5e9">
            <Typography>px="lg" py="sm"</Typography>
          </Box>
          <Box pt="sm" pb="md" ps="lg" pe="xl" bg="#e3f2fd">
            <Typography>pt sm, pb md, ps lg, pe xl (RTL-aware)</Typography>
          </Box>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

ps and pe map to paddingStart / paddingEnd, so they flip automatically in RTL layouts. The same applies to ms / me.

Gap

Open on Snack ↗

import { Box, Button } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
          <Box gap="sm">
            <Button variant="filled" onPress={() => {}}>First</Button>
            <Button variant="outlined" onPress={() => {}}>Second</Button>
          </Box>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

rowGap and columnGap are also available for finer control.

Alignment

Open on Snack ↗

import { Box, Typography } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <View style={{ flex: 1, padding: 16 }}>
          <Box align="center" justify="space-between" style={{ height: 200, backgroundColor: '#f5f5f5' }}>
            <Typography>Top</Typography>
            <Typography>Middle</Typography>
            <Typography>Bottom</Typography>
          </Box>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

Prop	Type	Default	Required	Description
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
hrefAttrs	{ target?: string; rel?: string; download?: string | boolean; }	-	No	Web only. The `target`, `rel` and `download` of the `<a>` that a view with an `href` renders, for example under Expo Router's `<Link asChild>`. `target: '_blank'` opens the link in a new tab. Native ignores it.
onKeyDown	(event: { nativeEvent: { key?: string; }; }) => void	-	No	-