Type Definitions

Essential types used in component props.

PercentString

A string type for percentage-based values with multiple format options.

type PercentString = string;

Supported Formats

Percent without specifying any dimension

"${number}%" // radius = "100%"

Calculates percent fraction of its axis (if used in Vector), otherwise percent fraction of self container's width

Width-based Percentage

"${number}w%" // radius = "20w%"

Calculates percentage relative to the self container's width.

Height-based Percentage

"${number}h%"

Calculates percentage relative to the self container's height.

Vector

2D position for coordinates used in props.

interface Vector {
  x: number | PercentString;
  y: number | PercentString;
}

const example1: Vector = {
  x: 500,
  y: '100%'
}

const example2: Vector = {
  x: '20h%',
  y: '30w%'
}

const example3: Vector = {
  x: '20w%',
  y: 30,
}

Both absolute pixel values and percentage-based values can be mixed within the same Vector, allowing flexible positioning across different screen sizes.

RadiusValue

The radial gradient radius accepts either an absolute pixel value or a percentage string.

type RadiusValue = number | PercentString;

Examples

const radiusInPixels: RadiusValue = 120;
const radiusRelativeToShortestSide: RadiusValue = '50%';
const radiusRelativeToWidth: RadiusValue = '70w%';
const radiusRelativeToHeight: RadiusValue = '45h%';

TileMode

Controls how the gradient handles areas beyond its defined bounds.

type TileMode = "clamp" | "decal";

• "clamp" - extends the edge colors beyond the gradient bounds
• "decal" - areas outside the gradient bounds are transparent

ColorValue

Similar to React Native's standard color format.