Box

Source

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

import { Box } from "pearl-ui";

Usage

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

Example

Embed not loading? Click here

Component Properties

Supported Style Properties

The Box component supports the following style props:

• backgroundColor (Note: Only backgroundColor props are supported, not the color prop)
• layout
• transform
• position
• opacity and visibility
• margin and padding
• border
• shadow
• shadow

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.

Property	Type	Default	Description
from	object		Defines the starting state of the animation.
to	object		Defines the ending state of the animation.
transition	object		Specifies the type of transition that the animation will use.
exitTransition	object		Determines 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.
state	object		Manages the overall state of the animation, including the from and to states.
delay	number		Manage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate	() => void		Callback 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.
animateInitialState	boolean	false	If true, the from prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.