Skip to main content

Box

Box is the most abstract component on top of which all other Pearl UI components are built. By default, it renders a React Native View element.

The Box component improves the development experience in the following ways:

  1. Create flexible layouts with ease.
  2. Provides an easier way to pass styles via props (backgroundColor can be passed as a prop instead of using React Stylesheet or inline styles). Shorthand props are also supported (bg instead of backgroundColor).
  3. Create more complex components using Box as the base component, instead of View (All components in Pearl UI use Box under the hood).

Import#

import { Box } from "pearl-ui";

Usage#

<Box width="100%" height={200} backgroundColor="primary.500" marginBottom="m">  This is a box</Box>

Example#

Props#

Supported style props#

The Box component supports the following style props: