Style Functions

Style Functions in Pearl UI are a collection of predefined functions that are utilized by the useStyleProps hook. These functions enable the addition of style props to any React Native element and link specific style properties to the values in the active theme object, facilitating a design-system-driven development experience.

Here is a list of the style functions supported in Pearl UI:

Collections of Style Functions

Pearl UI offers a collection of commonly used style functions.

Box Style Functions

These are the style functions used to construct the Box component. The collection includes the following style functions:

• Background Color
• Opacity
• Visibility
• Layout
• Transform
• Spacing
• Border
• Shadow
• Position

import { boxStyleFunctions } from "pearl-ui";

Text Style Functions

These are the style functions used to construct the Text component. The collection includes the following style functions:

• Color
• Background Color
• Opacity
• Visibility
• Layout
• Transform
• Typography
• Spacing
• Position
• Text Shadow

import { textStyleFunctions } from "pearl-ui";

All Functions

This is a collection of all the style functions offered in Pearl UI.

import { allStyleFunctions } from "pearl-ui";

Individual Style Functions

Each style function in Pearl UI is designed to convert specific style props to React Native styles. Here are the individual style functions:

Background Color

The backgroundColorStyleFunction converts all the backgroundColor style props to React Native styles.

import { backgroundColorStyleFunction } from "pearl-ui";

Color

The colorStyleFunction converts all the color style props to React Native styles.

import { colorStyleFunction } from "pearl-ui";

Opacity

The opacityStyleFunction converts all the opacity style props to React Native styles.

import { opacityStyleFunction } from "pearl-ui";

Visibility

The visibleStyleFunction converts all the visible style props to React Native styles.

import { visibleStyleFunction } from "pearl-ui";

Spacing

The spacingStyleFunction converts all the spacing style props to React Native styles.

import { spacingStyleFunction } from "pearl-ui";

Typography

The typographyStyleFunction converts all the typography style props to React Native styles.

import { typographyStyleFunction } from "pearl-ui";

Layout

The layoutStyleFunction converts all the layout style props to React Native styles.

import { layoutStyleFunction } from "pearl-ui";

Transform

The transformStyleFunction converts all the transform style props to React Native styles.

import { transformStyleFunction } from "pearl-ui";

Position

The positionStyleFunction converts all the position style props to React Native styles.

import { positionStyleFunction } from "pearl-ui";

Border

The borderStyleFunction converts all the border style props to React Native styles.

import { borderStyleFunction } from "pearl-ui";

Shadow

The shadowStyleFunction converts all the shadow style props to React Native styles.

import { shadowStyleFunction } from "pearl-ui";

Text Shadow

The textShadowStyleFunction converts all the textShadow style props to React Native styles.

import { textShadowStyleFunction } from "pearl-ui";