ViewStyleProps

Type definitions

type ViewStyleProps = {
    width?: number;
    height?: number;
    direction?: "row" | "column";
    top?: number;
    left?: number;
    bottom?: number;
    right?: number;
    rotation?: number;
    overflow?: "visible" | "hidden" | "fit";
    backgroundColor?: string;
    borderRadius?: number;
    borderWidth?: number;
    borderColor?: string;
    boxShadow?: BoxShadow[];
    padding?: number;
    paddingVertical?: number;
    paddingHorizontal?: number;
    paddingTop?: number;
    paddingRight?: number;
    paddingBottom?: number;
    paddingLeft?: number;
}

Properties

width

Width of a component in pixels.

• Type: number

Caution

The behavior of the View component varies depending on the type of its parent component:

• Non-layout parent - When the parent is not a layout component, the width property is required.
• Layout parent - For parents that are layout components, please refer to the relevant component documentation.

---

height

Height of a component in pixels.

• Type: number

Caution

The behavior of the View component varies depending on the type of its parent component:

• Non-layout parent - When the parent is not a layout component, the height property is required.
• Layout parent - For parents that are layout components, please refer to the relevant component documentation.

---

direction

Defines how static children are positioned inside a View component.

• Type: "row" | "column"
• Default value: "row"
• Supported values:
  • "row" - Children are positioned from left to right.
  • "column" - Children are positioned from top to bottom.

---

top

Specifies the distance in pixels from the top edge of a component to the top edge of its parent component. If this attribute is set, the element will be positioned absolutely, overriding any layout constraints imposed by its parent.

• Type: number

---

right

Specifies the distance in pixels from the right edge of a component to the right edge of its parent component. If this attribute is set, the element will be positioned absolutely, overriding any layout constraints imposed by its parent.

• Type: number

---

bottom

Specifies the distance in pixels from the bottom edge of a component to the bottom edge of its parent component. If this attribute is set, the element will be positioned absolutely, overriding any layout constraints imposed by its parent.

• Type: number

---

left

Specifies the distance in pixels from the left edge of a component to the left edge of its parent component. If this attribute is set, the element will be positioned absolutely, overriding any layout constraints imposed by its parent.

• Type: number

---

padding

Specifies the padding for each side of a component.

• Type: number

---

paddingVertical

Specifies the padding for the top and bottom side of a component.

• Type: number

---

paddingHorizontal

Specifies the padding for the left and right side of a component.

• Type: number

---

paddingTop

Specifies the padding for the top side of a component.

• Type: number

---

paddingBottom

Specifies the padding for the bottom side of a component.

• Type: number

---

paddingLeft

Specifies the padding for the left side of a component.

• Type: number

---

paddingRight

Specifies the padding for the right side of a component.

• Type: number

---

rotation

Specifies the rotation of a component, measured in degrees. If this attribute is set, the element will be positioned absolutely, overriding any layout constraints imposed by its parent.

• Type: number

---

overflow

Controls the behaviour of the content exceeding the area size.

• Type: "visible" | "hidden" | "fit"
• Default value: "hidden"
• Supported values:
  • "visible" - Render everything, including content that extends beyond their parent.
  • "hidden" - Render only parts of the children that are inside their parent area.
  • "fit" - If children components are too big to fit inside the parent, resize everything inside to fit.

Note

When using fit, components with unknown sizes are treated as if they had a size of 0 when calculating the scaling factor.

Caution

fit will resize everything inside the parent, including absolutely positioned elements.

---

backgroundColor

Background color in #RRGGBBAA or #RRGGBB format.

• Type: string
• Default value: #00000000

---

borderRadius

Radius of a rounded corner.

• Type: number
• Default value: 0.0

---

borderWidth

Border width.

• Type: number
• Default value: 0.0

---

borderColor

Border color in a "#RRGGBBAA" format.

• Type: string
• Default value: "#00000000"

---

boxShadow

List of box shadows.

• Type: BoxShadow[]

---

padding

Specifies the padding for each side of a component.

• Type: number
• Default value: 0.0

---

paddingVertical

Specifies the padding for the top and bottom side of a component.

• Type: number
• Default value: 0.0

---

paddingHorizontal

Specifies the padding for the left and right side of a component.

• Type: number
• Default value: 0.0

---

paddingTop

Specifies the padding for the top side of a component.

• Type: number
• Default value: 0.0

---

paddingRight

Specifies the padding for the right side of a component.

• Type: number
• Default value: 0.0

---

paddingBottom

Specifies the padding for the bottom side of a component.

• Type: number
• Default value: 0.0

---

paddingLeft

Specifies the padding for the left side of a component.

• Type: number
• Default value: 0.0

BoxShadow

type BoxShadow = {
  offsetX?: number;
  offsetyY?: number;
  color?: string;
  blurRadius?: number;
}

Properties

offsetX

Specifies the horizontal offset on the x-axis. Positive values move the element to the right, negative values move it to the left.

• Type: number
• Default value: 0.0

---

offsetY

Specifies the vertical offset on the y-axis. Positive values move the element downward, negative values move it upward.

• Type: number
• Default value: 0.0

---

color

Color in a "#RRGGBBAA" format.

• Type: string
• Default value: #FFFFFFFF

---

blurRadius

Defines the radius of the blur effect.

• Type: number
• Default value: 0.0