GlassProps

blur is absent: glass frosts with frost, and the blur word is ignored on this path.

Every field here is animatable and every one is a value slot, so driving the material from a SharedValue - a highlight that tracks device tilt, a frost that fades in - costs one slot write per frame and no scene re-encode. Only the inherited r is static: it is a clip, not a material parameter.

Extends

• Omit<BackdropProps, "blur">

Properties

antiAlias?

optional antiAlias?: boolean;

Inherited from

PaintProps.antiAlias

blendMode?

optional blendMode?: BlendMode;

How this drawing composites onto what is already there. 'srcOver' by default.

Inherited from

PaintProps.blendMode

children?

optional children?: ReactNode;

Inherited from

PaintProps.children

color?

optional color?: Animated<Color>;

Inherited from

PaintProps.color

depth?

optional depth?: Animated<number>;

How far the refraction reaches in from the edge, 1–100. Defaults to 20.

dispersion?

optional dispersion?: Animated<number>;

Chromatic aberration at the edge, 0–100. Defaults to 0.

frost?

optional frost?: Animated<number>;

Background frost, 0–100. Defaults to 20.

height

height: Animated<number>;

Inherited from

BackdropProps.height

lightAngle?

optional lightAngle?: Animated<number>;

Where the edge highlight comes from, in degrees. 0 is straight above and positive turns clockwise, −179 to 180. Defaults to 45.

lightIntensity?

optional lightIntensity?: Animated<number>;

How bright the edge highlight is, 0–100 (values above 100 are not clamped). Defaults to 50 - tgfx's own default is 80, which reads as chrome rather than glass over most content. 0 removes the highlight and leaves the refraction and frost alone.

opacity?

optional opacity?: Animated<number>;

Paint-wide alpha multiplier in [0, 1]; only one per chain can animate.

Inherited from

PaintProps.opacity

r?

optional r?: number;

Corner radius. Defaults to 0. Static: the writer does not give it a slot.

Inherited from

BackdropProps.r

ref?

optional ref?: NodeHandle;

A handle from useNode(), for changing this node without a React render. See NodeHandle.

Inherited from

PaintProps.ref

refraction?

optional refraction?: Animated<number>;

Edge refraction strength, 0–100. Defaults to 40.

splay?

optional splay?: Animated<number>;

How the refraction is aimed, 0–100. At 0 it follows the panel's edge curvature; at 100 it points at the panel's centre. Defaults to 0.

strokeCap?

optional strokeCap?: "butt" | "round" | "square";

Inherited from

PaintProps.strokeCap

strokeJoin?

optional strokeJoin?: "round" | "miter" | "bevel";

Inherited from

PaintProps.strokeJoin

strokeMiter?

optional strokeMiter?: Animated<number>;

Past this length-over-width ratio a 'miter' join falls back to bevel. Defaults to 4.

Inherited from

PaintProps.strokeMiter

strokeWidth?

optional strokeWidth?: Animated<number>;

Inherited from

PaintProps.strokeWidth

style?

optional style?: "fill" | "stroke";

'fill' (default) or 'stroke'.

Inherited from

PaintProps.style

visible?

optional visible?: Animated<number | boolean>;

Skip drawing (and hit-testing) this node. A value slot, so a handle or a SharedValue toggles it with no re-encode - the supported way to pool mounted nodes for particle systems and variable-count scenes.

Inherited from

PaintProps.visible

width

width: Animated<number>;

Inherited from

BackdropProps.width

x

x: Animated<number>;

The panel's rect, and what it samples from beneath.

Inherited from

BackdropProps.x

y

y: Animated<number>;

Inherited from

BackdropProps.y