Skip to main content


The Box component is a fundamental building block in the Pearl UI library. It is a highly abstract component that serves as the foundation for all other components in Pearl UI. By default, it renders a React Native View element.

The Box component enhances the development experience by providing the following benefits

  1. Simplified Layout Creation: The Box component allows developers to create flexible layouts with ease.
  2. Style Prop Support: It provides a more intuitive way to pass styles via props. For instance, backgroundColor can be passed as a prop instead of using React Stylesheet or inline styles. Shorthand props are also supported (e.g., bgColor instead of backgroundColor).
  3. Base for Complex Components: The Box component can be used as the base component for creating more complex components, replacing the need for View. All components in Pearl UI use Box as their base.


import { Box } from "pearl-ui";


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


Component Properties#

Supported Style Properties#

The Box component supports the following style props:

Animation Properties#

The Box component also supports animation properties from the Moti library, which allows for the creation of dynamic and interactive UI elements. The useMotiWithStyleProps hook from the Moti library is utilized to manage these animation properties.

fromobjectDefines the starting state of the animation.
toobjectDefines the ending state of the animation.
transitionobjectSpecifies the type of transition that the animation will use.
exitTransitionobjectDetermines the transition type that will be used when the component is unmounted. By default, exit uses transition to configure its animations, so this prop is not required. However, if you pass exitTransition, it will override transition for exit animations.
stateobjectManages the overall state of the animation, including the from and to states.
delaynumberManage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate() => voidCallback function called after finishing an animation.
stylePriority"state" | "animate""animate"This is not a prop you will likely find yourself using. If set to "animate", then styles passed from the animate prop will take precedent. Otherwise, if set to "state", then the state prop will take precedent for matching styles.
animateInitialStatebooleanfalseIf true, the from prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.