reactnatively

Box

The universal layout primitive. Express spacing, sizing, flex, and position constraints directly as props — eliminating most StyleSheet boilerplate for structural layout.

Import

typescript

import { Box } from 'reactnatively';

Hero section layout

HeroSection.tsx

1import { Box, Heading, Text, Button } from 'reactnatively';23export function HeroSection() {4  return (5    <Box flex={1} justify="center" align="center" px={24} py={48}>6      <Box7        bg="rgba(139,92,246,0.15)"8        borderRadius={16}9        px={12}10        py={6}11        mb={20}12      >13        <Text variant="xs" color="#a78bfa" weight="semibold">14          New in 2.015        </Text>16      </Box>1718      <Heading level="h1" align="center" style={{ marginBottom: 16 }}>19        Build faster with Glass20      </Heading>2122      <Text variant="lg" align="center" color="rgba(255,255,255,0.5)" style={{ marginBottom: 32 }}>23        Production-ready components for React Native and Expo24      </Text>2526      <Box direction="row" gap={12}>27        <Button variant="solid" color="primary" size="lg">Get Started</Button>28        <Button variant="glass" size="lg">View Docs</Button>29      </Box>30    </Box>31  );32}

Card with absolute badge

NotificationCard.tsx

1import { Box, Text, Heading } from 'reactnatively';23export function NotificationCard({ unread, title, body }) {4  return (5    <Box6      bg="rgba(255,255,255,0.05)"7      borderRadius={16}8      p={20}9      mb={12}10      position="relative"11      overflow="hidden"12    >13      {unread && (14        <Box15          position="absolute"16          top={16}17          right={16}18          width={8}19          height={8}20          borderRadius={4}21          bg="#6366f1"22        />23      )}24      <Heading level="h5" style={{ marginBottom: 6 }}>{title}</Heading>25      <Text variant="sm" color="rgba(255,255,255,0.5)" numberOfLines={2}>26        {body}27      </Text>28    </Box>29  );30}

Props

Prop	Type	Default	Description
p / px / py / pt / pb / pl / pr	SpacingKey \| number	undefined	Padding shorthand props. SpacingKey maps to theme spacing tokens.
m / mx / my / mt / mb / ml / mr	SpacingKey \| number	undefined	Margin shorthand props.
flex	number	undefined	Flex grow/shrink factor.
direction	FlexDirection	undefined	Flex direction (row, column, etc.).
align	FlexAlign	undefined	alignItems value.
justify	FlexJustify	undefined	justifyContent value.
wrap	FlexWrap	undefined	flexWrap value.
gap	SpacingKey \| number	undefined	Gap between flex children.
width / height	number \| string	undefined	Explicit dimensions.
minWidth / maxWidth / minHeight / maxHeight	number \| string	undefined	Size constraints.
bg	string	undefined	Background color.
borderRadius	RadiiKey \| number	undefined	Corner radius using a theme token or pixel value.
overflow	'visible' \| 'hidden' \| 'scroll'	undefined	Overflow behaviour.
opacity	number	undefined	Opacity (0–1).
position	'relative' \| 'absolute'	undefined	CSS-style position.
top / right / bottom / left / zIndex	number	undefined	Position offset and z-index.
style	StyleProp<ViewStyle>	undefined	Escape hatch for arbitrary styles.
children	ReactNode	undefined	Content rendered inside the box.